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#120F20
  • activityBar.border#2B2444
  • activityBar.foreground#8bec79
  • activityBar.inactiveForeground#6F688F
  • activityBarBadge.background#8bec79
  • activityBarBadge.foreground#10151A
  • button.background#635CF8
  • button.foreground#FFFFFF
  • button.hoverBackground#7A72FF
  • dropdown.background#1B1730
  • dropdown.border#2B2444
  • dropdown.foreground#F2EEFF
  • editor.background#151224
  • editor.findMatchBackground#C7FF00AA
  • editor.findMatchHighlightBackground#C7FF0044
  • editor.foreground#F2EEFF
  • editor.inactiveSelectionBackground#3A3459
  • editor.lineHighlightBackground#211C35
  • editor.selectionBackground#635CF866
  • editor.wordHighlightBackground#635CF833
  • editor.wordHighlightStrongBackground#9151B855
  • editorBracketHighlight.foreground1#90ffb1
  • editorBracketHighlight.foreground2#3C93FA
  • editorBracketHighlight.foreground3#9151B8
  • editorBracketHighlight.foreground4#FF6B93
  • editorBracketHighlight.foreground5#C7FF00
  • editorBracketHighlight.foreground6#00AFA0
  • editorBracketHighlight.unexpectedBracket.foreground#F24F4F
  • editorCursor.foreground#8bec79
  • editorError.foreground#F24F4F
  • editorGroup.border#2B2444
  • editorGroup.dropBackground#635CF833
  • editorGroupHeader.noTabsBackground#120F20
  • editorGroupHeader.tabsBackground#120F20
  • editorGroupHeader.tabsBorder#120F20
  • editorGutter.background#120F20
  • editorIndentGuide.activeBackground1#8bec79
  • editorIndentGuide.background1#2D2940
  • editorInfo.foreground#3C93FA
  • editorLineNumber.activeForeground#8bec79
  • editorLineNumber.foreground#6F688F
  • editorOverviewRuler.background#151224
  • editorStickyScroll.background#151224
  • editorStickyScroll.shadow#0E0B18
  • editorWarning.foreground#C7FF00
  • errorForeground#FF6B93
  • gitDecoration.addedResourceForeground#90ffb1
  • gitDecoration.deletedResourceForeground#F24F4F
  • gitDecoration.modifiedResourceForeground#3C93FA
  • input.background#1B1730
  • input.border#2B2444
  • input.foreground#F2EEFF
  • list.activeSelectionBackground#635CF866
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#211C35
  • list.inactiveSelectionBackground#2D2940
  • minimapSlider.activeBackground#8bec79AA
  • minimapSlider.background#635CF855
  • minimapSlider.hoverBackground#8F82E888
  • panel.background#120F20
  • panel.border#2B2444
  • panelTitle.activeBorder#90ffb1
  • panelTitle.activeForeground#90ffb1
  • panelTitle.inactiveForeground#81789E
  • sash.hoverBorder#8bec79
  • scrollbar.background#120F20
  • scrollbarSlider.activeBackground#8bec79AA
  • scrollbarSlider.background#635CF866
  • scrollbarSlider.hoverBackground#8F82E899
  • sideBar.background#120F20
  • sideBar.border#2B2444
  • sideBar.foreground#C9C0F5
  • statusBar.background#635CF8
  • statusBar.debuggingBackground#F24F4F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#9151B8
  • tab.activeBackground#151224
  • tab.activeBorderTop#8bec79
  • tab.activeForeground#90ffb1
  • tab.border#120F20
  • tab.inactiveBackground#120F20
  • tab.inactiveForeground#8C85A8
  • tab.unfocusedActiveBackground#1B1730
  • tab.unfocusedActiveBorderTop#635CF8
  • tab.unfocusedActiveForeground#9D96BA
  • tab.unfocusedInactiveBackground#120F20
  • tab.unfocusedInactiveForeground#6F688F
  • terminal.ansiBlack#0E0B18
  • terminal.ansiBlue#3C93FA
  • terminal.ansiBrightBlack#736B91
  • terminal.ansiBrightBlue#63A8FF
  • terminal.ansiBrightCyan#30FFD0
  • terminal.ansiBrightGreen#90ffb1
  • terminal.ansiBrightMagenta#B877E0
  • terminal.ansiBrightRed#FF6B93
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C7FF00
  • terminal.ansiCyan#00AFA0
  • terminal.ansiGreen#00A361
  • terminal.ansiMagenta#9151B8
  • terminal.ansiRed#F24F4F
  • terminal.ansiWhite#F2EEFF
  • terminal.ansiYellow#C7FF00
  • terminal.background#120F20
  • terminal.border#2B2444
  • terminal.foreground#F2EEFF
  • terminal.selectionBackground#635CF866
  • terminal.selectionForeground#FFFFFF
  • terminal.tab.activeBorder#8bec79
  • terminalCommandDecoration.defaultBackground#635CF8
  • terminalCommandDecoration.errorBackground#F24F4F
  • terminalCommandDecoration.successBackground#00A361
  • terminalCursor.background#0E0B18
  • terminalCursor.foreground#8bec79
  • titleBar.activeBackground#120F20
  • titleBar.activeForeground#F2EEFF
  • titleBar.inactiveBackground#0E0B18
  • titleBar.inactiveForeground#8C85A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.block.begin, punctuation.section.block.end, punctuation.definition.block, punctuation.definition.block.begin, punctuation.definition.block.end, punctuation.brace.curly#90ffb1—
punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.brace.round#3C93FA—
punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.brace.square#9151B8—
comment, punctuation.definition.comment#d2c68ditalic
string, string.quoted, string.quoted.single, string.quoted.double#90ffb1—
string.template, string.quoted.template, punctuation.definition.template-expression#00AFA0—
constant.character, constant.character.escape#FF6B93—
keyword, keyword.control, keyword.operator.expression#B877E0
storage.type, storage.modifier, keyword.declaration#9A95FF
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator, punctuation.accessor#C9C0F5—
punctuation, punctuation.terminator, punctuation.definition.block, punctuation.section.block, punctuation.section.group, punctuation.section.parens, punctuation.section.brackets#A9A0C8—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#FF6B93—
constant.language.boolean, constant.language.true, constant.language.false, constant.language.null, constant.language.undefined, constant.language.nullptr#FF6B93
storage.type.primitive, support.type.primitive, source.cpp storage.type, source.c storage.type, source.cs storage.type, source.java storage.type#ff8bc9
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.class, entity.name.struct, support.class, support.type#63A8FF
entity.name.namespace, entity.name.scope-resolution, support.other.namespace, entity.name.package#B877E0—
entity.name.function, meta.function entity.name.function#9A95FF
support.function, meta.function-call, variable.function#63A8FF—
entity.name.function.member, support.function.member, variable.function.member#63A8FF—
variable, variable.other, identifier#F2EEFF—
variable.parameter, meta.function.parameters variable#C9C0F5italic
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.property-name#9A95FF—
variable.other.constant, constant.other, entity.name.constant#C7FF00
keyword.control.directive, keyword.control.import, meta.preprocessor, entity.name.function.preprocessor, punctuation.definition.directive#90ffb1
keyword.control.import, keyword.control.from, keyword.control.include, meta.import, meta.include#90ffb1—
entity.name.tag, support.class.component#9A95FF
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#B877E0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#9A95FF—
support.type.property-name.css, support.type.vendored.property-name.css#63A8FF—
support.constant.property-value.css, constant.other.color.rgb-value.css, keyword.other.unit#90ffb1—
variable.language.this, variable.language.self, variable.language.super, variable.language.base, variable.language.special.self#FF6B93italic
support.type.property-name.json, support.type.property-name.json.comments, meta.structure.dictionary.key.json, meta.structure.dictionary.json string.quoted.double.json, source.json meta.structure.dictionary string.quoted.double, source.json.comments meta.structure.dictionary string.quoted.double#9A95FF—
meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.value string.quoted.double, source.json.comments meta.structure.dictionary.value string.quoted.double#90ffb1—
constant.language.boolean.json, constant.language.boolean.json.comments#FF6B93italic
constant.language.null.json, constant.language.null.json.comments#B877E0italic
constant.numeric.json, constant.numeric.json.comments#FF6B93—
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#A9A0C8—