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#B32D2D
  • activityBar.background#E6EBF0
  • activityBar.foreground#B32D2D
  • activityBarBadge.background#B32D2D
  • activityBarBadge.foreground#F0F4F9
  • badge.background#B32D2D
  • badge.foreground#F0F4F9
  • button.background#B32D2D
  • button.foreground#F0F4F9
  • button.hoverBackground#c64545
  • dropdown.background#E6EBF0
  • dropdown.border#C4C9CE
  • dropdown.foreground#21252B
  • editor.background#F0F4F9
  • editor.findMatchBackground#D4B76A55
  • editor.findMatchHighlightBackground#D4B76A33
  • editor.foreground#21252B
  • editor.lineHighlightBackground#D0D5DA
  • editor.lineHighlightBorder#C0C5CA
  • editor.selectionBackground#B32D2D33
  • editor.selectionHighlightBackground#B32D2D33
  • editorBracketMatch.background#D4B76A33
  • editorBracketMatch.border#D4B76A
  • editorCursor.foreground#B32D2D
  • editorGroupHeader.tabsBackground#F0F4F9
  • editorIndentGuide.activeBackground#B32D2D
  • editorIndentGuide.background#C4C9CE
  • editorLineNumber.activeForeground#B32D2D
  • editorLineNumber.foreground#8A919C
  • editorWhitespace.foreground#8A919C
  • focusBorder#B32D2D
  • gitDecoration.conflictingResourceForeground#D4B76A
  • gitDecoration.deletedResourceForeground#e66a6a
  • gitDecoration.modifiedResourceForeground#B32D2D
  • gitDecoration.untrackedResourceForeground#6FBD71
  • input.background#E6EBF0
  • input.border#C4C9CE
  • input.foreground#21252B
  • input.placeholderForeground#8A919C
  • inputOption.activeBorder#B32D2D
  • list.activeSelectionBackground#D0D5DA
  • list.activeSelectionForeground#21252B
  • list.focusBackground#D0D5DA
  • list.highlightForeground#B32D2D
  • list.hoverBackground#D0D5DA
  • minimap.background#F0F4F9
  • minimapSlider.activeBackground#8C9196
  • minimapSlider.background#C4C9CE
  • minimapSlider.hoverBackground#A8ADB2
  • panel.background#F0F4F9
  • panel.border#D0D5DA
  • panelTitle.activeBorder#B32D2D
  • panelTitle.activeForeground#21252B
  • panelTitle.inactiveForeground#8A919C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#8C9196
  • scrollbarSlider.background#C4C9CE
  • scrollbarSlider.hoverBackground#A8ADB2
  • sideBar.background#E6EBF0
  • sideBar.foreground#21252B
  • sideBarSectionHeader.background#DCE2E8
  • sideBarSectionHeader.foreground#B32D2D
  • sideBarTitle.foreground#B32D2D
  • statusBar.background#D4B76A
  • statusBar.debuggingBackground#B32D2D
  • statusBar.foreground#21252B
  • statusBar.noFolderBackground#DCE2E8
  • statusBarItem.hoverBackground#B32D2D66
  • tab.activeBackground#F0F4F9
  • tab.activeBorder#B32D2D
  • tab.activeForeground#21252B
  • tab.border#C4C9CE
  • tab.inactiveBackground#E6EBF0
  • tab.inactiveForeground#8A919C
  • terminal.ansiBlue#2a3b66
  • terminal.ansiBrightBlue#4a5d9e
  • terminal.ansiBrightCyan#49b89d
  • terminal.ansiBrightGreen#8cdca3
  • terminal.ansiBrightMagenta#b795c8
  • terminal.ansiBrightRed#e66a6a
  • terminal.ansiBrightYellow#e8c66a
  • terminal.ansiCyan#3A9E8C
  • terminal.ansiGreen#6FBD71
  • terminal.ansiMagenta#8A6FA1
  • terminal.ansiRed#B32D2D
  • terminal.ansiYellow#D4B76A
  • terminal.background#F0F4F9
  • terminal.foreground#21252B
  • titleBar.activeBackground#DCE2E8
  • titleBar.activeForeground#21252B
  • titleBar.inactiveBackground#E6EBF0
  • titleBar.inactiveForeground#8A919C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A919Citalic
string, string.quoted, string.template#3A9E8C
keyword, storage.type, storage.modifier#B32D2Dbold
keyword.operator, punctuation.accessor#D4B76A
variable, variable.other#21252B
variable.parameter#D4B76Aitalic
entity.name.function, support.function#B32D2D
meta.function-call#D4B76A
entity.name.class, entity.name.type.class, support.class#B32D2Dbold
entity.name.type, support.type#D4B76A
entity.name.type.interface#3A9E8Citalic
constant.numeric#D4B76A
constant, constant.language, constant.character#B32D2D
constant.language.boolean#B32D2Dbold
variable.other.property, support.variable.property#3A9E8C
meta.object-literal.key#B32D2D
entity.name.tag, punctuation.definition.tag#B32D2D
entity.other.attribute-name#D4B76Aitalic
punctuation, meta.brace#8A919C
string.regexp#D4B76A
constant.character.escape#B32D2D
meta.decorator, punctuation.decorator#D4B76A
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#B32D2Dbold
markup.bold#D4B76Abold
markup.italic#8A919Citalic
markup.underline.link#B32D2D
markup.inline.raw, markup.fenced_code#3A9E8C
support.type.property-name.json#B32D2D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B32D2D
support.type.property-name.css#3A9E8C
support.constant.property-value.css#D4B76A