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#A8B0C0
  • activityBar.background#151515
  • activityBar.foreground#A8B0C0
  • activityBarBadge.background#A8B0C0
  • activityBarBadge.foreground#0A0A0A
  • badge.background#A8B0C0
  • badge.foreground#0A0A0A
  • button.background#151515
  • button.foreground#FFFFFF
  • button.hoverBackground#5A9EA8
  • dropdown.background#151515
  • dropdown.border#555555
  • dropdown.foreground#E5E5E5
  • editor.background#0A0A0A
  • editor.findMatchBackground#5A9EA8A0
  • editor.findMatchHighlightBackground#5A9EA860
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#5A9EA820
  • editor.lineHighlightBorder#5A9EA840
  • editor.selectionBackground#5A9EA860
  • editor.selectionHighlightBackground#5A9EA840
  • editorBracketMatch.background#5A9EA833
  • editorBracketMatch.border#5A9EA8
  • editorCursor.foreground#A8B0C0
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#77777788
  • editorIndentGuide.background#77777744
  • editorLineNumber.activeForeground#A8B0C0
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#777777
  • focusBorder#A8B0C0
  • gitDecoration.conflictingResourceForeground#A8B0C0
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#5A9EA8
  • gitDecoration.untrackedResourceForeground#5A9EA8
  • input.background#151515
  • input.border#555555
  • input.foreground#E5E5E5
  • input.placeholderForeground#777777
  • inputOption.activeBorder#A8B0C0
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151515
  • list.highlightForeground#A8B0C0
  • list.hoverBackground#15151566
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#5A9EA866
  • minimapSlider.background#5A9EA822
  • minimapSlider.hoverBackground#5A9EA844
  • panel.background#0A0A0A
  • panel.border#151515
  • panelTitle.activeBorder#A8B0C0
  • panelTitle.activeForeground#A8B0C0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A8B0C088
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#151515
  • sideBar.foreground#E5E5E5
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.foreground#A8B0C0
  • sideBarTitle.foreground#A8B0C0
  • statusBar.background#151515
  • statusBar.debuggingBackground#5A9EA8
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#151515
  • statusBarItem.hoverBackground#5A9EA840
  • tab.activeBackground#151515
  • tab.activeBorder#A8B0C0
  • tab.activeForeground#E5E5E5
  • tab.border#0A0A0A
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5A9EA8
  • terminal.ansiBrightBlue#5A9EA8
  • terminal.ansiBrightCyan#5A9EA8
  • terminal.ansiBrightGreen#5A9EA8
  • terminal.ansiBrightMagenta#A8B0C0
  • terminal.ansiBrightRed#FF6F6F
  • terminal.ansiBrightYellow#A8B0C0
  • terminal.ansiCyan#5A9EA8
  • terminal.ansiGreen#5A9EA8
  • terminal.ansiMagenta#A8B0C0
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#A8B0C0
  • terminal.background#0A0A0A
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#A8B0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#7FD8D2—
keyword, storage.type, storage.modifier#C8C8D0bold
keyword.operator, punctuation.accessor#C8C8D0—
variable, variable.other#E5E5E5—
variable.parameter#777777italic
entity.name.function, support.function#7FD8D2—
meta.function-call#E5E5E5—
entity.name.class, entity.name.type.class, support.class#C8C8D0bold
entity.name.type, support.type#C8C8D0—
entity.name.type.interface#C8C8D0italic
constant.numeric#7FD8D2—
constant, constant.language, constant.character#7FD8D2—
constant.language.boolean#C8C8D0bold
variable.other.property, support.variable.property#E5E5E5—
meta.object-literal.key#C8C8D0—
entity.name.tag, punctuation.definition.tag#C8C8D0—
entity.other.attribute-name#7FD8D2italic
punctuation, meta.brace#C8C8D0—
string.regexp#7FD8D2—
constant.character.escape#7FD8D2—
meta.decorator, punctuation.decorator#7FD8D2—
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#C8C8D0bold
markup.bold#C8C8D0bold
markup.italic#7FD8D2italic
markup.underline.link#7FD8D2—
markup.inline.raw, markup.fenced_code#7FD8D2—
support.type.property-name.json#C8C8D0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C8C8D0—
support.type.property-name.css#7FD8D2—
support.constant.property-value.css#7FD8D2—