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#ff3737
  • activityBar.background#0a0a0a
  • activityBar.foreground#ff3737
  • activityBarBadge.background#ff3737
  • activityBarBadge.foreground#0b0c0d
  • badge.background#ff3737
  • badge.foreground#0b0c0d
  • button.background#111214
  • button.foreground#cfd2d6
  • button.hoverBackground#1a1a1a
  • dropdown.background#0c0c0c
  • dropdown.border#ff373733
  • dropdown.foreground#cfd2d6
  • editor.background#0b0c0d
  • editor.findMatchBackground#ff373744
  • editor.findMatchHighlightBackground#ff373722
  • editor.foreground#cfd2d6
  • editor.lineHighlightBackground#141618
  • editor.lineHighlightBorder#ff373733
  • editor.selectionBackground#2a2d2f
  • editor.selectionHighlightBackground#2a2d2f88
  • editorBracketMatch.background#ff373733
  • editorBracketMatch.border#ff3737
  • editorCursor.foreground#ff3737
  • editorGroupHeader.tabsBackground#0b0c0d
  • editorIndentGuide.activeBackground#ff373744
  • editorIndentGuide.background#3f424544
  • editorLineNumber.activeForeground#ff3737
  • editorLineNumber.foreground#5a5a5a
  • editorWhitespace.foreground#3f4245
  • focusBorder#ff3737
  • gitDecoration.conflictingResourceForeground#ffb400
  • gitDecoration.deletedResourceForeground#ff3737
  • gitDecoration.modifiedResourceForeground#ff6ec7
  • gitDecoration.untrackedResourceForeground#39ff14
  • input.background#0c0c0c
  • input.border#ff373733
  • input.foreground#cfd2d6
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBorder#ff3737
  • list.activeSelectionBackground#2a2d2f
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2a2d2f
  • list.highlightForeground#ff3737
  • list.hoverBackground#141618
  • minimap.background#0b0c0d
  • minimapSlider.activeBackground#ff373766
  • minimapSlider.background#ff373722
  • minimapSlider.hoverBackground#ff373744
  • panel.background#0b0c0d
  • panel.border#ff373733
  • panelTitle.activeBorder#ff3737
  • panelTitle.activeForeground#ff3737
  • panelTitle.inactiveForeground#7a7a7a
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff373788
  • scrollbarSlider.background#5a5a5a44
  • scrollbarSlider.hoverBackground#5a5a5a88
  • sideBar.background#0c0c0c
  • sideBar.foreground#b0b4b8
  • sideBarSectionHeader.background#0b0c0d
  • sideBarSectionHeader.foreground#ff3737
  • sideBarTitle.foreground#ff3737
  • statusBar.background#111214
  • statusBar.debuggingBackground#ff3737
  • statusBar.foreground#cfd2d6
  • statusBar.noFolderBackground#0b0c0d
  • statusBarItem.hoverBackground#1a1a1a
  • tab.activeBackground#111214
  • tab.activeBorder#ff3737
  • tab.activeForeground#ffffff
  • tab.border#0b0c0d
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#3b8aff
  • terminal.ansiBrightBlue#5c9eff
  • terminal.ansiBrightCyan#33f0ff
  • terminal.ansiBrightGreen#5fff5f
  • terminal.ansiBrightMagenta#ff94d3
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#39ff14
  • terminal.ansiMagenta#ff6ec7
  • terminal.ansiRed#ff3737
  • terminal.ansiYellow#ffb400
  • terminal.background#0b0c0d
  • terminal.foreground#cfd2d6
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#cfd2d6
  • titleBar.inactiveBackground#0b0c0d
  • titleBar.inactiveForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a5aitalic
string, string.quoted, string.template#39ff14
keyword, storage.type, storage.modifier#ff6ec7bold
keyword.operator, punctuation.accessor#cfd2d6
variable, variable.other#3b8aff
variable.parameter#ff6ec7italic
entity.name.function, support.function#00e5ff
meta.function-call#00e5ff
entity.name.class, entity.name.type.class, support.class#ff6ec7bold
entity.name.type, support.type#3b8aff
entity.name.type.interface#00e5ffitalic
constant.numeric#ffb400
constant, constant.language, constant.character#ffb400
constant.language.boolean#ffb400bold
variable.other.property, support.variable.property#cfd2d6
meta.object-literal.key#00e5ff
entity.name.tag, punctuation.definition.tag#ff6ec7
entity.other.attribute-name#39ff14italic
punctuation, meta.brace#cfd2d6
string.regexp#ffb400
constant.character.escape#39ff14
meta.decorator, punctuation.decorator#ff6ec7
invalid, invalid.illegal#ff3737strikethrough
markup.heading, entity.name.section#ff3737bold
markup.bold#ff6ec7bold
markup.italic#39ff14italic
markup.underline.link#00e5ff
markup.inline.raw, markup.fenced_code#3b8aff
support.type.property-name.json#3b8aff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff6ec7
support.type.property-name.css#00e5ff
support.constant.property-value.css#39ff14