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#6EDFF6
  • activityBar.background#0A0A12
  • activityBar.foreground#A78DFF
  • activityBarBadge.background#6EDFF6
  • activityBarBadge.foreground#0B0C1D
  • badge.background#6EDFF6
  • badge.foreground#0B0C1D
  • button.background#151629
  • button.foreground#E5E5E9
  • button.hoverBackground#1F1F2A
  • dropdown.background#0A0A14
  • dropdown.border#151629
  • dropdown.foreground#E5E5E9
  • editor.background#0B0C1D
  • editor.findMatchBackground#A78DFF44
  • editor.findMatchHighlightBackground#A78DFF22
  • editor.foreground#E5E5E9
  • editor.lineHighlightBackground#15162980
  • editor.lineHighlightBorder#151629C0
  • editor.selectionBackground#6EDFF622
  • editor.selectionHighlightBackground#6EDFF611
  • editorBracketMatch.background#A78DFF33
  • editorBracketMatch.border#6EDFF6
  • editorCursor.foreground#6EDFF6
  • editorGroupHeader.tabsBackground#0B0C1D
  • editorIndentGuide.activeBackground#2F3045C0
  • editorIndentGuide.background#2F304580
  • editorLineNumber.activeForeground#6EDFF6
  • editorLineNumber.foreground#3A3B55
  • editorWhitespace.foreground#2F3045
  • focusBorder#6EDFF6
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#6EDFF6
  • gitDecoration.untrackedResourceForeground#B5E57F
  • input.background#0A0A14
  • input.border#151629
  • input.foreground#E5E5E9
  • input.placeholderForeground#5A5C71
  • inputOption.activeBorder#6EDFF6
  • list.activeSelectionBackground#151629
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151629
  • list.highlightForeground#6EDFF6
  • list.hoverBackground#15162966
  • minimap.background#0B0C1D
  • minimapSlider.activeBackground#6EDFF666
  • minimapSlider.background#6EDFF622
  • minimapSlider.hoverBackground#6EDFF644
  • panel.background#0B0C1D
  • panel.border#151629
  • panelTitle.activeBorder#6EDFF6
  • panelTitle.activeForeground#6EDFF6
  • panelTitle.inactiveForeground#B0B2C5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6EDFF688
  • scrollbarSlider.background#3A3B5588
  • scrollbarSlider.hoverBackground#3A3B55CC
  • sideBar.background#0A0A14
  • sideBar.foreground#B0B2C5
  • sideBarSectionHeader.background#0A0A12
  • sideBarSectionHeader.foreground#6EDFF6
  • sideBarTitle.foreground#A78DFF
  • statusBar.background#151629
  • statusBar.debuggingBackground#A78DFF
  • statusBar.foreground#E5E5E9
  • statusBar.noFolderBackground#0A0A12
  • statusBarItem.hoverBackground#1F1F2A
  • tab.activeBackground#151629
  • tab.activeBorder#6EDFF6
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C1D
  • tab.inactiveBackground#0A0A14
  • tab.inactiveForeground#B0B2C5
  • terminal.ansiBlue#6EDFF6
  • terminal.ansiBrightBlue#8EF6FF
  • terminal.ansiBrightCyan#66E6FF
  • terminal.ansiBrightGreen#C9F5A1
  • terminal.ansiBrightMagenta#CBA6FF
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFC96A
  • terminal.ansiCyan#44E0FF
  • terminal.ansiGreen#B5E57F
  • terminal.ansiMagenta#A78DFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFB86C
  • terminal.background#0B0C1D
  • terminal.foreground#E5E5E9
  • titleBar.activeBackground#0A0A12
  • titleBar.activeForeground#E5E5E9
  • titleBar.inactiveBackground#0B0C1D
  • titleBar.inactiveForeground#B0B2C5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5C71italic
string, string.quoted, string.template#FFB86C—
keyword, storage.type, storage.modifier#6EDFF6bold
keyword.operator, punctuation.accessor#44E0FF—
variable, variable.other#C5C6D0—
variable.parameter#FFB86Citalic
entity.name.function, support.function#B5E57F—
meta.function-call#C5C6D0—
entity.name.class, entity.name.type.class, support.class#A78DFFbold
entity.name.type, support.type#CBA6FF—
entity.name.type.interface#6EDFF6italic
constant.numeric#FFB86C—
constant, constant.language, constant.character#FFB86C—
constant.language.boolean#FFB86Cbold
variable.other.property, support.variable.property#C5C6D0—
meta.object-literal.key#6EDFF6—
entity.name.tag, punctuation.definition.tag#6EDFF6—
entity.other.attribute-name#A78DFFitalic
punctuation, meta.brace#B0B2C5—
string.regexp#FFB86C—
constant.character.escape#A78DFF—
meta.decorator, punctuation.decorator#FFB86C—
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#6EDFF6bold
markup.bold#FFB86Cbold
markup.italic#A78DFFitalic
markup.underline.link#6EDFF6—
markup.inline.raw, markup.fenced_code#B5E57F—
support.type.property-name.json#6EDFF6—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB86C—
support.type.property-name.css#6EDFF6—
support.constant.property-value.css#B5E57F—