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