Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#20014b
  • activityBar.border#3d028e
  • activityBar.foreground#f0e5ff
  • activityBarBadge.background#42cacd
  • activityBarBadge.foreground#20014b
  • button.background#6003e2
  • button.foreground#f0e5ff
  • button.hoverBackground#700bfc
  • button.secondaryBackground#4b02b0
  • button.secondaryForeground#f0e5ff
  • button.secondaryHoverBackground#6003e2d0
  • checkbox.background#6803f3
  • checkbox.border#6803f3
  • checkbox.foreground#42cacd
  • debugIcon.continueForeground#ffc022
  • debugIcon.disconnectForeground#fd4e4e
  • debugIcon.restartForeground#16bc77
  • debugToolBar.background#6003e2
  • diffEditor.border#42cacd
  • diffEditor.diagonalFill#3d028e
  • diffEditor.insertedLineBackground#36a16866
  • diffEditor.insertedTextBackground#36a16866
  • diffEditor.removedTextBackground#fd4e4e33
  • dropdown.background#6803f3cc
  • dropdown.border#6803f3
  • editor.background#20014b
  • editor.findMatchBackground#974efd
  • editor.findMatchHighlightBackground#5903d1cc
  • editor.foldBackground#3d028e66
  • editor.foreground#f0e5ff
  • editor.hoverHighlightBackground#f0e5ff33
  • editor.lineHighlightBackground#3d028e
  • editor.selectionBackground#f0e5ff33
  • editor.selectionHighlightBackground#f0e5ff0d
  • editor.wordHighlightBackground#f0e5ff0d
  • editorCursor.foreground#fd4e4e
  • editorGroup.border#3d028e
  • editorGroup.dropBackground#42cacd66
  • editorGroupHeader.tabsBackground#120129
  • editorGutter.addedBackground#36a168
  • editorGutter.background#12012966
  • editorGutter.commentRangeForeground#6803f3
  • editorGutter.deletedBackground#b13737
  • editorGutter.foldingControlForeground#974efd
  • editorGutter.modifiedBackground#974efd
  • editorIndentGuide.activeBackground#974efd
  • editorIndentGuide.background#3d028e
  • editorLineNumber.activeForeground#f0e5ff
  • editorLineNumber.foreground#5903d1
  • editorOverviewRuler.addedForeground#36a168
  • editorOverviewRuler.background#20014b
  • editorOverviewRuler.border#3d028e
  • editorOverviewRuler.deletedForeground#b13737
  • editorOverviewRuler.errorForeground#fd4e4e
  • editorOverviewRuler.findMatchForeground#974efd
  • editorSuggestWidget.background#120129
  • editorWhitespace.foreground#5903d166
  • editorWidget.background#20014b
  • editorWidget.border#3d028e
  • gitlens.trailingLineForegroundColor#974efd
  • input.background#3d028e
  • input.border#6803f3
  • input.foreground#f0e5ff
  • input.placeholderForeground#f0e5ff66
  • inputOption.activeBorder#42cacd
  • list.activeSelectionIconForeground#f0e5ff
  • list.dropBackground#5903d166
  • list.focusOutline#42cacd99
  • list.hoverBackground#20014b
  • list.inactiveSelectionBackground#3d028e
  • list.inactiveSelectionForeground#f0e5ff
  • minimap.background#12012966
  • minimap.selectionOccurrenceHighlight#3d028e
  • panel.background#120129
  • panel.border#3d028e
  • panelTitle.activeBorder#42cacd
  • panelTitle.activeForeground#f0e5ff
  • progressBar.background#42cacd
  • scrollbarSlider.activeBackground#42cacd99
  • scrollbarSlider.background#42cacd33
  • scrollbarSlider.hoverBackground#42cacd66
  • selection.background#f0e5ff66
  • sideBar.background#120129
  • sideBar.border#3d028e
  • sideBar.foreground#974efdcc
  • sideBarSectionHeader.background#20014b
  • sideBarSectionHeader.border#3d028e
  • sideBarTitle.foreground#974efd
  • statusBar.background#120129
  • statusBar.border#3d028e
  • statusBar.debuggingBackground#42cacd
  • statusBar.debuggingForeground#20014b
  • statusBar.foreground#974efd
  • tab.activeBorderTop#3d028e
  • tab.border#3d028e
  • tab.inactiveBackground#120129
  • titleBar.activeBackground#120129
  • titleBar.activeForeground#f0e5ff
  • titleBar.inactiveBackground#120129
  • titleBar.inactiveForeground#974efd
  • tree.indentGuidesStroke#974efd
  • window.activeBorder#120129
  • window.inactiveBorder#120129

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a1cfcitalic
variable, string constant.other.placeholder#f0e5ff—
constant.other.color#ffffff—
invalid, invalid.illegal#ff5370—
keyword, storage.type, storage.modifier#c792ea—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#89ddff—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#82aaff—
meta.block variable.other#f07178—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f78c6c—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c3e88d—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffcb6b—
support.type#b2ccd6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370—
variable.language#ff5370italic
entity.name.method.js#82aaffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82aaff—
entity.other.attribute-name#c792ea—
markup.inserted#c3e88d—
markup.deleted#ff5370—
markup.changed#c792ea—
string.regexp#89ddff—
constant.character.escape#89ddff—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82aaffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#b2ccd6—
entity.other.attribute-name.class#82aaff—
entity.other.attribute-name.id.css, punctuation.definition.entity.css#1482ffbold
support.type.property-name.css, meta.property-name.css, punctuation.definition.entity.css#ffcb6b—
variable.css, variable.scss, meta.property-list.css#36a168bold
punctuation.separator.key-value.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.scss, source.css.scss#974efd66—
keyword.other.important.scss, keyword.other.important.css#fd4e4eitalic
source.go#ffcb6b—
entity.name.import.go#c3e88d—
entity.name.type.go#f07178—
punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go#b077ff—
keyword.control.go#ff5370—
keyword.type.go#16bc77bold
keyword.function.go#1482ffbold
entity.name.package.go#3794ffbold
constant.other.placeholder.go#b2ccd6bold
variable.other.assignment.go#1482ffbold
keyword.const.go#ff5370bold
meta.preprocessor.haskell#ff5370—
variable.other.member.definition.haskell#36a168—
constant.other.haskell#82aaff—
variable.other.generic-type.haskell#974efd—
text.html.derivative#f0e5ff99—
variable.other.object.java#ff5370—
storage.modifier.import.java#16bc77—
variable.other.definition.java#ffc022—
storage.type.java#f07178—
meta.method-call.java#c3e88d—
variable.other.object.property.java#1482ff—
meta.method.body.java#b2ccd6—
variable.other.constant.js#ffc022bold
meta.object-literal.key.js#16bc77—
variable.other.constant.property.js, variable.other.object.js#ff5370—
keyword.operator.assignment.js#f0e5ff99—
keyword.control.conditional.js—italic bold
support.type.property-name.json#c792ea—
source.json meta.structure.dictionary.json #c792ea—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #ffcb6b—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #f78c6c—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #ff5370—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #c17e70—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #82aaff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #f07178—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #c792ea—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json #c3e88d—
source.kotlin#36a168bold
meta.block.kotlin#1482ff—
text.html.markdown, punctuation.definition.list_item.markdown#f0e5ff—
meta.paragraph.markdown#f0e5ff99—
text.html.markdown markup.inline.raw.markdown, markup.inline.raw.string.markdown#c3e88d—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737e—
markdown.heading#ffc022bold
markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#82aaffbold
string.other.link.title.markdown#f07178—
markup.underline.link.markdown#1482ff—
string.other.link.description.title.markdown#c792ea—
constant.other.reference.link.markdown#ffcb6b—
markup.raw.block.fenced.markdown#00000050—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.fenced_code.block.markdown#16bc77—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f0e5ff—
variable.language.fenced.markdown#65737e—
meta.separator#65737ebold
markup.quote punctuation.definition.blockquote.markdown#65737e—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffcb6bitalic
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#f78c6cunderline
markup.quote—italic
markup.raw.block#c792ea—
markup.table#f0e5ff—
variable.other.class.php, keyword.control.return.php#1482ff—
constant.other.php#82aaff—
variable.other.php#ffc022bold
variable.other.global.safer.php#f07178bold
constant.other.class.php#f78c6c—
variable.other.property.php#36a168—
punctuation.definition.variable.php#f07178—
punctuation.definition.string.begin.php, punctuation.definition.string.end.php, punctuation.separator.delimiter.php, string.quoted.single.php#c792ea—
keyword.operator.key.php, keyword.operator.comparison.php#ff5370—
meta.attribute.python#82aaff—
meta.indexed-name.python#16bc77—
meta.item-access.arguments.python, constant.other.caps.python#1482ffbold
meta.function-call.generic.python#f78c6c—
meta.function-call.arguments.python#c3e88d—
keyword.control.flow.python#f07178—
keyword.operator.logical.python#ff5370bold
source.python#82aaffbold
string.quoted.docstring.multi.python#f0e5ff99bold
storage.type.function.python#ffc022bold
source.ruby#82aaff—
variable.other.readwrite.instance.ruby#ffcb6b—
variable.other.ruby#82aaff—
variable.other.constant.ruby#f07178—
entity.name.function.ruby#b077ff—
keyword.control.ruby#f05656—
support.class.ruby#1482ff—
variable.other.block.ruby#b077ff—
punctuation.separator.arguments.ruby#f05656bold
keyword.control.pseudo-method.ruby#16bc77italic
meta.embedded.line.ruby#ffcb6b—
source.scala#82aaff—
variable.other.declaration.scala#16bc77—
meta.scope.if-block.shell#16bc77—
string.interpolated.dollar.shell#f07178—
meta.scope.group.shell#82aaff—
variable.other.bracket.shell#ffc022bold
variable.other.normal.shell#1482ffbold
meta.scope.case-pattern.shell#ffc022—
keyword.control.shell#ff5370—
entity.name.function.shell#16bc77bold
variable.other.positional.shell#f07178—
constant.other.database-name.sql#ff5370bold
constant.other.table-name.sql#ffc022—
keyword.other.sql#1482ff—
source.sql#16bc77—
keyword.other.alias.sql—bold
variable.other.object.ts#f07178bold
storage.type.function.ts#1482ff—
storage.type.property.ts, storage.type.type.ts#f07178—
storage.type.interface.ts#fd4e4ebold
variable.other.object.property.ts#16bc77—
variable.other.property.ts#16bc77—
string.quoted.double.ts#f0e5ff99—
meta.object-literal.key.ts#c3e88d—
variable.object.property.ts#1482ff—
Crucible Theme by Setu Design - VS Code Theme