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.activeBorder#4D5BFC
  • activityBar.activeFocusBorder#49DCB1
  • activityBar.background#120E1D
  • activityBar.foreground#F9F9F9
  • activityBarBadge.background#4D5BFC
  • activityBarBadge.foreground#120E1D
  • badge.background#4D5BFC
  • badge.foreground#120E1D
  • button.background#CCFF66
  • button.foreground#120E1D80
  • button.hoverBackground#00D0FF
  • diffEditor.insertedTextBackground#00D0FF33
  • dropdown.background#120E1D90
  • dropdown.border#F9F9F922
  • dropdown.foreground#F9F9F999
  • editor.background#120E1D
  • editor.findMatchBackground#00D0FF66
  • editor.findMatchHighlightBackground#F9F9F922
  • editor.foreground#F8F8F8
  • editor.hoverHighlightBackground#F9F9F922
  • editor.inactiveSelectionBackground#717DFF39
  • editor.lineHighlightBackground#F9F9F907
  • editor.lineHighlightBorder#F9F9F904
  • editor.selectionBackground#717DFF39
  • editor.selectionHighlightBackground#717DFF39
  • editor.selectionHighlightBorder#717DFF39
  • editor.wordHighlightBackground#120E1D00
  • editor.wordHighlightStrongBackground#120E1D
  • editor.wordHighlightStrongBorder#F9F9F980
  • editorCodeLens.foreground#F9F9F966
  • editorCursor.foreground#F9F9F9
  • editorError.foreground#DB5461
  • editorGroup.border#120E1D80
  • editorGroup.emptyBackground#120E1D80
  • editorGroupHeader.tabsBackground#120E1D
  • editorGutter.addedBackground#CCFF66
  • editorGutter.deletedBackground#DB5461
  • editorGutter.modifiedBackground#00D0FF
  • editorHoverWidget.background#120E1D
  • editorHoverWidget.border#120E1D90
  • editorIndentGuide.background1#F9F9F922
  • editorLineNumber.foreground#F9F9F933
  • editorLink.activeForeground#00D0FF
  • editorOverviewRuler.addedForeground#CCFF6600
  • editorOverviewRuler.border#F9F9F900
  • editorOverviewRuler.bracketMatchForeground#00D0FF00
  • editorOverviewRuler.deletedForeground#F9F9F900
  • editorOverviewRuler.errorForeground#DB5461
  • editorOverviewRuler.infoForeground#49DCB100
  • editorOverviewRuler.modifiedForeground#00D0FF00
  • editorOverviewRuler.warningForeground#4D5BFC
  • editorRuler.foreground#F9F9F966
  • editorSuggestWidget.background#120E1D
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#EEEEEE
  • editorSuggestWidget.highlightForeground#4D5BFC
  • editorSuggestWidget.selectedBackground#EEEEEE10
  • editorWarning.foreground#4D5BFC
  • editorWhitespace.foreground#F9F9F966
  • editorWidget.background#120E1D
  • editorWidget.border#00D0FF00
  • errorForeground#DB5461
  • extensionButton.prominentBackground#CCFF66
  • extensionButton.prominentForeground#120E1D90
  • extensionButton.prominentHoverBackground#00D0FF
  • focusBorder#4D5BFC
  • input.background#120E1D90
  • input.border#4D5BFC
  • input.foreground#EEEEEE
  • input.placeholderForeground#F9F9F966
  • inputOption.activeBackground#120E1D00
  • inputOption.activeBorder#4D5BFC
  • inputValidation.errorBackground#120E1D90
  • inputValidation.errorBorder#DB5461
  • inputValidation.infoBackground#120E1D90
  • inputValidation.infoBorder#4D5BFC
  • inputValidation.warningBackground#120E1D90
  • inputValidation.warningBorder#4D5BFC
  • list.activeSelectionBackground#F9F9F920
  • list.activeSelectionForeground#F9F9F9
  • list.errorForeground#DB5461
  • list.focusBackground#F9F9F922
  • list.focusForeground#EEEEEE
  • list.highlightForeground#F9F9F9
  • list.hoverBackground#F9F9F910
  • list.inactiveSelectionBackground#F9F9F922
  • list.inactiveSelectionForeground#EEEEEE
  • list.warningForeground#4D5BFC
  • minimapSlider.activeBackground#F9F9F950
  • minimapSlider.background#F9F9F920
  • minimapSlider.hoverBackground#F9F9F940
  • panel.background#120E1D
  • panel.border#F9F9F920
  • panelTitle.activeBorder#4D5BFC
  • pickerGroup.border#120E1D00
  • pickerGroup.foreground#00D0FF
  • progressBar.background#CCFF66
  • scrollbar.shadow#F9F9F980
  • scrollbarSlider.activeBackground#F9F9F970
  • scrollbarSlider.background#F9F9F910
  • scrollbarSlider.hoverBackground#F9F9F960
  • sideBar.background#120E1D
  • sideBar.border#F9F9F920
  • sideBar.foreground#F9F9F990
  • sideBarSectionHeader.background#F9F9F909
  • sideBarSectionHeader.foreground#F9F9F9
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#120E1D
  • statusBar.debuggingBackground#120E1D90
  • statusBar.foreground#F9F9F990
  • statusBar.noFolderBackground#120E1D90
  • statusBarItem.hoverBackground#F9F9F933
  • tab.activeBackground#120E1D
  • tab.activeBorder#4D5BFC
  • tab.activeBorderBottom#4D5BFC
  • tab.activeForeground#F9F9F9
  • tab.border#F9F9F900
  • tab.hoverBackground#120E1D
  • tab.inactiveBackground#120E1D
  • tab.inactiveForeground#F9F9F950
  • tab.lastPinnedBorder#F9F9F920
  • terminal.background#120E1D
  • titleBar.activeBackground#120E1D90
  • titleBar.activeForeground#F9F9F999
  • titleBar.inactiveBackground#120E1D90
  • titleBar.inactiveForeground#F9F9F999
  • tree.indentGuidesStroke#F9F9F920
  • widget.shadow#120E1D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#666666
string#49DCB1
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#DB5461
string.template.js, variable.parameter.js#49DCB1
meta.template.expression.js#EEEEEE
constant.numeric#4D5BFC
string.embedded.begin, string.embedded.end#4D5BFC
string.embedded#CCFF66
constant.language#4D5BFC
constant.character, constant.other#4D5BFC
variable.language#4D5BFC
variable.readwrite, variable.readwrite.other.block#DB5461
variable.other.object.js, meta.function-call.js, meta.object-literal.key.js, meta.tag.attributes.js, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.tsx#EEEEEE
entity.name.variable, entity.name.variable.local, meta.object-literal.key, variable.object.constant, variable.object.property, variable.other.alias, variable.other.constant, variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, support.variable#EEEEEE
keyword.other.base, keyword.other.this, variable.other.object.property, variable.language.base, variable.language.this#EEEEEE
support.variable.UnityEngine#EEEEEE
keyword, keyword.operator, keyword.operator.logical, keyword.operator.constructor#EE964B
storage.modifier.async.js, keyword.control.flow.js#EE964B
storage#49DCB1
storage.type#FF5FA7
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#00D0FF
variable.other.property, variable.other.block#00D0FF
entity.other.inherited-class#CCFF66
entity.name.function, support.function#CCFF66
variable.parameter#FF5FA7
entity.name.function-call#EEEEEE
function.support.builtin, function.support.core#CCFF66
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FF5FA7
entity.name.tag.class, entity.name.tag.id#FF5FA7
entity.other.attribute-name#CCFF66
support.constant#4D5BFC
support.type, support.variable#FF5FA7
support.dictionary.json#DB5461
source.json meta.structure.dictionary.json string.quoted.double.json punctuation.definition.string#FF5FA7
source.json string.quoted.double.json#EEEEEE
source.json meta.structure.dictionary.json support.type.property-name.json#49DCB1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCFF66
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCFF66
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 support.type.property-name.json#CCFF66
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 support.type.property-name.json#CCFF66
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 support.type.property-name.json#4D5BFC
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 support.type.property-name.json#CCFF66
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 support.type.property-name.json#00D0FF
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 support.type.property-name.json#FF5FA7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, punctuation.section.property-list.begin.bracket.curly.css#CCFF66
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, entity.name.tag.css#00D0FF
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#49DCB1
variable.css, variable.scss, variable.less, variable.sass, entity.name.tag.css#FF5FA7
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, support.constant.property-value.css#EE964B
unit.css, unit.scss, unit.less, unit.sass, keyword.other.unit.percentage.css, constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css#49DCB1
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#EE964B
support.type.property-name.css.color, meta.property-name.css support.type.property-name.css#EE964B
function.css, function.scss, function.less, function.sass#CCFF66
support.other.variable#00D0FF
invalid#F8F8F8
invalid.deprecated#F8F8F8
string.detected-link#00D0FF
meta.diff, meta.diff.header#00D0FF
markup.deleted#DB5461
markup.inserted#49DCB1
markup.changed#49DCB1
constant.numeric.line-number.find-in-files - match#00D0FF
entity.name.filename.find-in-files#49DCB1
markup.normal, markup.normal.markdown#49DCB1
punctuation.definition.normal.markdown#F9F9F960
fenced_code.block.language.markdown#FF5FA7
markup.underline.link.markdown#4D5BFC
markup.bold.markdownbold
punctuation.definition.bold.markdown#F9F9F960
keyword.control#FF5FA7
markup.heading.markdown, entity.name.section.markdown#CCFF66bold
punctuation.definition.heading.markdown#49DCB1
markup.quote.markdown#CCFF66
meta.separator.markdown#DB5461bold
markup.raw.inline.markdown, markup.raw.block.markdown, markup.inline.raw.string.markdown, string.other.link.title.markdown#00D0FF
punctuation.definition.list_item.markdown#F8F8F8bold
keyword.operator.assignment.python#EEEEEE
meta.function-call.generic.python, meta.function-call.python, meta.function-call.arguments.python, meta.function-call.python#CCFF66
keyword.operator.other.elixir#49DCB1
variable.other.constant.elixir#49DCB1
constant.other.symbol.elixir#00D0FF
parameter.variable.function.elixir#EE964B
source.elixir entity.name.function#49DCB1
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#00D0FF
variable.other.constant.elixir#49DCB1
source.elixir.punctuation.binary.elixir#00D0FF
keyword.control.svelte#4D5BFC
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#49DCB1
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#49DCB1
support.class.component.tsx, support.class.component.jsx#00D0FF
variable.other.php, variable.language.php#DB5461
meta.function-call.php, meta.function-call.object.php#CCFF66
variable.other.readwrite.instance.ruby#DB5461
constant.language.symbol.ruby#4D5BFC
support.function.go#CCFF66
meta.attribute.rust#4D5BFC