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#d4af37
  • activityBar.background#202020
  • activityBar.foreground#c8c8c8
  • activityBarBadge.background#c1272d
  • activityBarBadge.foreground#ffffff
  • badge.background#c1272d
  • badge.foreground#ffffff
  • button.background#c1272d
  • button.foreground#ffffff
  • button.hoverBackground#d33c46
  • dropdown.background#1e1e1e
  • dropdown.border#333333
  • dropdown.foreground#e0e0e0
  • editor.background#111112
  • editor.findMatchBackground#c1272d70
  • editor.findMatchHighlightBackground#c1272d40
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2a2a2a80
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#3a3a3a80
  • editor.selectionHighlightBackground#4b4b4b60
  • editorBracketMatch.background#3d3d3d
  • editorBracketMatch.border#d4af37
  • editorCursor.foreground#d4af37
  • editorGroupHeader.tabsBackground#141414
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#c4c4c4
  • editorLineNumber.foreground#6a6a6a
  • editorWhitespace.foreground#555555
  • focusBorder#d4af37
  • gitDecoration.conflictingResourceForeground#d4af37
  • gitDecoration.deletedResourceForeground#c1272d
  • gitDecoration.modifiedResourceForeground#569cd6
  • gitDecoration.untrackedResourceForeground#4ec9b0
  • input.background#1e1e1e
  • input.border#333333
  • input.foreground#e0e0e0
  • input.placeholderForeground#6a6a6a
  • inputOption.activeBorder#d4af37
  • list.activeSelectionBackground#2c2c2c
  • list.activeSelectionForeground#e0e0e0
  • list.focusBackground#3a3a3a
  • list.highlightForeground#d4af37
  • list.hoverBackground#2a2a2a
  • minimap.background#111112
  • minimapSlider.activeBackground#66666680
  • minimapSlider.background#44444480
  • minimapSlider.hoverBackground#55555580
  • panel.background#141414
  • panel.border#2a2a2a
  • panelTitle.activeBorder#d4af37
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#8a8a8a
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#55555580
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#44444480
  • sideBar.background#191919
  • sideBar.foreground#c8c8c8
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#d4af37
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#c1272d
  • statusBar.foreground#d4af37
  • statusBar.noFolderBackground#17202a
  • statusBarItem.hoverBackground#2c2c2c80
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#d4af37
  • tab.activeForeground#e0e0e0
  • tab.border#2a2a2a
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlue#569cd6
  • terminal.ansiBrightBlue#9cdcfe
  • terminal.ansiBrightCyan#b5f4ea
  • terminal.ansiBrightGreen#d7ffaf
  • terminal.ansiBrightMagenta#ff9ac1
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightYellow#fffac2
  • terminal.ansiCyan#4ec9b0
  • terminal.ansiGreen#b5cea8
  • terminal.ansiMagenta#c586c0
  • terminal.ansiRed#c1272d
  • terminal.ansiYellow#d7ba7d
  • terminal.background#111112
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#1b1b1b
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#8a8a8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8f7bitalic
string, string.quoted, string.template#d4af37
keyword, storage.type, storage.modifier#c0405dbold
keyword.operator, punctuation.accessor#c8c8c8
variable, variable.other#61afef
variable.parameter#9cdcfeitalic
entity.name.function, support.function#e5b567
meta.function-call#e5b567
entity.name.class, entity.name.type.class, support.class#d7ba7dbold
entity.name.type, support.type#c586c0
entity.name.type.interface#9cdcfeitalic
constant.numeric#4ec9b0
constant, constant.language, constant.character#c586c0
constant.language.boolean#c0405dbold
variable.other.property, support.variable.property#d7ba7d
meta.object-literal.key#9cdcfe
entity.name.tag, punctuation.definition.tag#c1272d
entity.other.attribute-name#d4af37italic
punctuation, meta.brace#c8c8c8
string.regexp#b5cea8
constant.character.escape#569cd6
meta.decorator, punctuation.decorator#c586c0
invalid, invalid.illegal#ff6e6estrikethrough
markup.heading, entity.name.section#d4af37bold
markup.bold#c0405dbold
markup.italic#9cdcfeitalic
markup.underline.link#61afef
markup.inline.raw, markup.fenced_code#b5cea8
support.type.property-name.json#9cdcfe
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c586c0
support.type.property-name.css#d4af37
support.constant.property-value.css#4ec9b0