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#FF5500
  • activityBar.background#111111
  • activityBar.foreground#FF5500
  • activityBarBadge.background#FF5500
  • activityBarBadge.foreground#0B0B0B
  • badge.background#FF5500
  • badge.foreground#0B0B0B
  • button.background#151515
  • button.foreground#E2E2E2
  • button.hoverBackground#2A2A2A
  • dropdown.background#111111
  • dropdown.border#151515
  • dropdown.foreground#E2E2E2
  • editor.background#0B0B0B
  • editor.findMatchBackground#C41E3A44
  • editor.findMatchHighlightBackground#C41E3222
  • editor.foreground#E2E2E2
  • editor.lineHighlightBackground#1A1A1A40
  • editor.lineHighlightBorder#FF550080
  • editor.selectionBackground#FF550033
  • editor.selectionHighlightBackground#FF550022
  • editorBracketMatch.background#FF550033
  • editorBracketMatch.border#FF5500
  • editorCursor.foreground#FF5500
  • editorGroupHeader.tabsBackground#0B0B0B
  • editorIndentGuide.activeBackground#FF550088
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#FF5500
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#FF5500
  • gitDecoration.conflictingResourceForeground#FFAA00
  • gitDecoration.deletedResourceForeground#FF4444
  • gitDecoration.modifiedResourceForeground#FF5500
  • gitDecoration.untrackedResourceForeground#66FF99
  • input.background#111111
  • input.border#151515
  • input.foreground#E2E2E2
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF5500
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#FF5500
  • list.focusBackground#151515
  • list.highlightForeground#FF5500
  • list.hoverBackground#15151566
  • minimap.background#0B0B0B
  • minimapSlider.activeBackground#FF550066
  • minimapSlider.background#FF550022
  • minimapSlider.hoverBackground#FF550044
  • panel.background#0B0B0B
  • panel.border#151515
  • panelTitle.activeBorder#FF5500
  • panelTitle.activeForeground#FF5500
  • panelTitle.inactiveForeground#C41E3A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF550088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111111
  • sideBar.foreground#C41E3A
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FF5500
  • sideBarTitle.foreground#FF5500
  • statusBar.background#151515
  • statusBar.debuggingBackground#C41E3A
  • statusBar.foreground#E2E2E2
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#151515
  • tab.activeBorder#FF5500
  • tab.activeForeground#FF5500
  • tab.border#0B0B0B
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#C41E3A
  • terminal.ansiBlue#6699FF
  • terminal.ansiBrightBlue#AABFFF
  • terminal.ansiBrightCyan#AAFFFF
  • terminal.ansiBrightGreen#AAFFCC
  • terminal.ansiBrightMagenta#FFCCFF
  • terminal.ansiBrightRed#FF8866
  • terminal.ansiBrightYellow#FFDD55
  • terminal.ansiCyan#66FFFF
  • terminal.ansiGreen#66FF99
  • terminal.ansiMagenta#CC66FF
  • terminal.ansiRed#FF5500
  • terminal.ansiYellow#FFAA00
  • terminal.background#0B0B0B
  • terminal.foreground#E2E2E2
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#0B0B0B
  • titleBar.inactiveForeground#C41E3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
string, string.quoted, string.template#66FFCC
keyword, storage.type, storage.modifier#FF5500bold
keyword.operator, punctuation.accessor#C41E3A
variable, variable.other#E2E2E2
variable.parameter#FF8866italic
entity.name.function, support.function#FFAA66
meta.function-call#FFBB88
entity.name.class, entity.name.type.class, support.class#FFCC99bold
entity.name.type, support.type#FFCC99
entity.name.type.interface#FFAA66italic
constant.numeric#FF8866
constant, constant.language, constant.character#FFBB88
constant.language.boolean#FF8866bold
variable.other.property, support.variable.property#FFBB88
meta.object-literal.key#FFAA66
entity.name.tag, punctuation.definition.tag#FF5500
entity.other.attribute-name#FFAA66italic
punctuation, meta.brace#FF8866
string.regexp#FF8866
constant.character.escape#FFAA66
meta.decorator, punctuation.decorator#FFCC00
invalid, invalid.illegal#FF4444strikethrough
markup.heading, entity.name.section#FF5500bold
markup.bold#FF8866bold
markup.italic#FFAA66italic
markup.underline.link#FF8866
markup.inline.raw, markup.fenced_code#66FF99
support.type.property-name.json#FFAA66
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCC00
support.type.property-name.css#FFAA66
support.constant.property-value.css#FF8866