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#ff4b4b
  • activityBar.background#1a1a1a
  • activityBar.foreground#ff4b4b
  • activityBarBadge.background#ff4b4b
  • activityBarBadge.foreground#0b0b0b
  • badge.background#ff4b4b
  • badge.foreground#0b0b0b
  • button.background#ff4b4b
  • button.foreground#0b0b0b
  • button.hoverBackground#ff6666
  • dropdown.background#151515
  • dropdown.border#333333
  • dropdown.foreground#c7c7c7
  • editor.background#0b0b0b
  • editor.findMatchBackground#ff4b4b60
  • editor.findMatchHighlightBackground#ff4b4b30
  • editor.foreground#c7c7c7
  • editor.lineHighlightBackground#33333340
  • editor.lineHighlightBorder#ff4b4b80
  • editor.selectionBackground#ff4b4b40
  • editor.selectionHighlightBackground#ff4b4b30
  • editorBracketMatch.background#ff4b4b30
  • editorBracketMatch.border#ff4b4b
  • editorCursor.foreground#ff4b4b
  • editorGroupHeader.tabsBackground#0b0b0b
  • editorIndentGuide.activeBackground#ff4b4b
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#ff4b4b
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#ff4b4b
  • gitDecoration.conflictingResourceForeground#ffea00
  • gitDecoration.deletedResourceForeground#ff4b4b
  • gitDecoration.modifiedResourceForeground#ff4b4b
  • gitDecoration.untrackedResourceForeground#55ff55
  • input.background#151515
  • input.border#333333
  • input.foreground#c7c7c7
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff4b4b
  • list.activeSelectionBackground#ff4b4b40
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff4b4b30
  • list.highlightForeground#ff4b4b
  • list.hoverBackground#ff4b4b20
  • minimap.background#0b0b0b
  • minimapSlider.activeBackground#ff4b4b66
  • minimapSlider.background#55555522
  • minimapSlider.hoverBackground#55555544
  • panel.background#0b0b0b
  • panel.border#333333
  • panelTitle.activeBorder#ff4b4b
  • panelTitle.activeForeground#ff4b4b
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff4b4b88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#151515
  • sideBar.foreground#c7c7c7
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#ff4b4b
  • sideBarTitle.foreground#ff4b4b
  • statusBar.background#151515
  • statusBar.debuggingBackground#ff4b4b
  • statusBar.foreground#c7c7c7
  • statusBar.noFolderBackground#151515
  • statusBarItem.hoverBackground#33333380
  • tab.activeBackground#0b0b0b
  • tab.activeBorder#ff4b4b
  • tab.activeForeground#ff4b4b
  • tab.border#0b0b0b
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00d9ff
  • terminal.ansiBrightBlue#66eaff
  • terminal.ansiBrightCyan#66ffdd
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightYellow#ffff66
  • terminal.ansiCyan#00ffdd
  • terminal.ansiGreen#55ff55
  • terminal.ansiMagenta#ff66ff
  • terminal.ansiRed#ff4b4b
  • terminal.ansiYellow#ffea00
  • terminal.background#0b0b0b
  • terminal.foreground#c7c7c7
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#c7c7c7
  • titleBar.inactiveBackground#0b0b0b
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#55ff55
keyword, storage.type, storage.modifier#ff4b4bbold
keyword.operator, punctuation.accessor#ff4b4b
variable, variable.other#c7c7c7
variable.parameter#ff4b4bitalic
entity.name.function, support.function#00d9ff
meta.function-call#66eaff
entity.name.class, entity.name.type.class, support.class#ff4b4bbold
entity.name.type, support.type#66eaff
entity.name.type.interface#66ff66italic
constant.numeric#ff4b4b
constant, constant.language, constant.character#ff4b4b
constant.language.boolean#ff4b4bbold
variable.other.property, support.variable.property#00d9ff
meta.object-literal.key#66eaff
entity.name.tag, punctuation.definition.tag#ff4b4b
entity.other.attribute-name#ff4b4bitalic
punctuation, meta.brace#c7c7c7
string.regexp#ff4b4b
constant.character.escape#ff4b4b
meta.decorator, punctuation.decorator#ff4b4b
invalid, invalid.illegal#ff4b4bstrikethrough
markup.heading, entity.name.section#ff4b4bbold
markup.bold#ff4b4bbold
markup.italic#ff4b4bitalic
markup.underline.link#00d9ff
markup.inline.raw, markup.fenced_code#55ff55
support.type.property-name.json#ff4b4b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff4b4b
support.type.property-name.css#00d9ff
support.constant.property-value.css#ff4b4b