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#f3f0fc
  • activityBar.border#B9AFFF
  • activityBar.foreground#635CF8
  • activityBar.inactiveForeground#7A7298
  • activityBarBadge.background#8bec79
  • activityBarBadge.foreground#F7FFF9
  • button.background#635CF8
  • button.foreground#FFFFFF
  • button.hoverBackground#554DE2
  • dropdown.background#FCFAFF
  • dropdown.border#CFC5EA
  • dropdown.foreground#25223A
  • editor.background#fcf6ff
  • editor.findMatchBackground#C7FF00
  • editor.findMatchHighlightBackground#DFFFA8
  • editor.foreground#25223A
  • editor.inactiveSelectionBackground#e7e7ff
  • editor.lineHighlightBackground#EDE8FF
  • editor.selectionBackground#DFFFA8
  • editor.wordHighlightBackground#DCCBFF
  • editor.wordHighlightStrongBackground#C6B2F0
  • editorBracketHighlight.foreground1#635CF8
  • editorBracketHighlight.foreground2#3C93FA
  • editorBracketHighlight.foreground3#00A361
  • editorBracketHighlight.foreground4#9151B8
  • editorBracketHighlight.foreground5#F24F4F
  • editorBracketHighlight.foreground6#A6CC00
  • editorBracketHighlight.unexpectedBracket.foreground#F24F4F
  • editorCursor.foreground#8bec79
  • editorError.foreground#F24F4F
  • editorGroup.border#B9AFFF
  • editorGroup.dropBackground#635CF833
  • editorGroupHeader.noTabsBackground#DCD5F4
  • editorGroupHeader.tabsBackground#f3f0fc
  • editorGroupHeader.tabsBorder#f3f0fc
  • editorGutter.background#f3f0fc
  • editorIndentGuide.activeBackground1#8bec79
  • editorIndentGuide.background1#D5CFF0
  • editorInfo.foreground#3C93FA
  • editorLineNumber.activeForeground#5148f7
  • editorLineNumber.foreground#a5a1b7
  • editorOverviewRuler.background#fcf6ff
  • editorStickyScroll.background#fcf6ff
  • editorStickyScroll.shadow#f3f0fc
  • editorWarning.foreground#9A7800
  • errorForeground#C93C3C
  • gitDecoration.addedResourceForeground#00A361
  • gitDecoration.deletedResourceForeground#F24F4F
  • gitDecoration.modifiedResourceForeground#3C93FA
  • input.background#FCFAFF
  • input.border#CFC5EA
  • input.foreground#25223A
  • list.activeSelectionBackground#D7D0FF
  • list.activeSelectionForeground#25223A
  • list.hoverBackground#ECE7FA
  • list.inactiveSelectionBackground#E5DFF7
  • minimapSlider.activeBackground#635CF8AA
  • minimapSlider.background#B9AFFF55
  • minimapSlider.hoverBackground#8F82E888
  • panel.background#f3f0fc
  • panel.border#f3f0fc
  • panelTitle.activeBorder#635CF8
  • panelTitle.activeForeground#635CF8
  • panelTitle.inactiveForeground#81789E
  • sash.hoverBorder#00A361
  • scrollbar.background#f3f0fc
  • scrollbarSlider.activeBackground#635CF8AA
  • scrollbarSlider.background#B9AFFF66
  • scrollbarSlider.hoverBackground#8F82E899
  • sideBar.background#f3f0fc
  • sideBar.border#8bec79
  • sideBar.foreground#6d60ae
  • statusBar.background#635CF8
  • statusBar.debuggingBackground#F24F4F
  • statusBar.foreground#F8FAFC
  • statusBar.noFolderBackground#9151B8
  • tab.activeBackground#f3f0fc
  • tab.activeBorderTop#635CF8
  • tab.activeForeground#635CF8
  • tab.border#f3f0fc
  • tab.inactiveBackground#f2edff
  • tab.inactiveForeground#9188af
  • tab.unfocusedActiveBackground#E9E4F8
  • tab.unfocusedActiveBorderTop#B9AFFF
  • tab.unfocusedActiveForeground#7B739A
  • tab.unfocusedInactiveBackground#E9E4F8
  • tab.unfocusedInactiveForeground#b8b1cf
  • terminal.ansiBlack#2D2940
  • terminal.ansiBlue#236FD1
  • terminal.ansiBrightBlack#736B91
  • terminal.ansiBrightBlue#3C93FA
  • terminal.ansiBrightCyan#00AFA0
  • terminal.ansiBrightGreen#00A361
  • terminal.ansiBrightMagenta#9151B8
  • terminal.ansiBrightRed#F24F4F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#A6CC00
  • terminal.ansiCyan#008C83
  • terminal.ansiGreen#007A4D
  • terminal.ansiMagenta#7A3FA3
  • terminal.ansiRed#C93C3C
  • terminal.ansiWhite#F8F6FF
  • terminal.ansiYellow#8A7600
  • terminal.background#F3F0FC
  • terminal.border#C7BFF0
  • terminal.foreground#1F1B33
  • terminal.selectionBackground#D8D0FF
  • terminal.selectionForeground#1F1B33
  • terminal.tab.activeBorder#00A361
  • terminalCommandDecoration.defaultBackground#635CF8
  • terminalCommandDecoration.errorBackground#F24F4F
  • terminalCommandDecoration.successBackground#00A361
  • terminalCursor.background#D9D2F3
  • terminalCursor.foreground#8bec79
  • titleBar.activeBackground#f3f0fc
  • titleBar.activeForeground#635CF8
  • titleBar.inactiveBackground#f3f0fc
  • 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#635CF8
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#00A361
comment, punctuation.definition.comment#c98e5eitalic
string, string.quoted, string.quoted.single, string.quoted.double#008A57
string.template, string.quoted.template, punctuation.definition.template-expression#007A68
constant.character, constant.character.escape#ff6b93
keyword, keyword.control, keyword.operator.expression#b75eee
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#6F688F
punctuation, punctuation.terminator, punctuation.definition.block, punctuation.section.block, punctuation.section.group, punctuation.section.parens, punctuation.section.brackets#9A92B4
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#007F78
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#236FD1
entity.name.namespace, entity.name.scope-resolution, support.other.namespace, entity.name.package#7A3FA3
entity.name.function, meta.function entity.name.function#3C93FA
support.function, meta.function-call, variable.function#2D7FEA
entity.name.function.member, support.function.member, variable.function.member#2D7FEA
variable, variable.other, identifier#2D2940
variable.parameter, meta.function.parameters variable#514A68italic
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.property-name#635CF8
variable.other.constant, constant.other, entity.name.constant#0086ff
keyword.control.directive, keyword.control.import, meta.preprocessor, entity.name.function.preprocessor, punctuation.definition.directive#66bf56
keyword.control.import, keyword.control.from, keyword.control.include, meta.import, meta.include#66bf56
entity.name.tag, support.class.component#635CF8
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#7A3FA3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#635CF8
support.type.property-name.css, support.type.vendored.property-name.css#236FD1
support.constant.property-value.css, constant.other.color.rgb-value.css, keyword.other.unit#008A57
variable.language.this, variable.language.self, variable.language.super, variable.language.base, variable.language.special.self#ff6483italic
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#635CF8
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#008A57
constant.language.boolean.json, constant.language.boolean.json.comments#F24F4Fitalic
constant.language.null.json, constant.language.null.json.comments#9151B8italic
constant.numeric.json, constant.numeric.json.comments#F24F4F
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#8C85A8