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.background#151514
  • activityBar.border#3D3D3B
  • activityBar.foreground#B89355
  • activityBar.inactiveForeground#4A463F
  • activityBarBadge.background#A33B39
  • activityBarBadge.foreground#F7F1E5
  • badge.background#A33B39
  • badge.foreground#F7F1E5
  • button.background#B89355
  • button.foreground#1C1C1B
  • editor.background#1C1C1B
  • editor.findMatchBackground#9D8A2988
  • editor.findMatchHighlightBackground#9D8A2933
  • editor.foreground#D1C7B7
  • editor.inactiveSelectionBackground#B8555522
  • editor.lineHighlightBackground#2D2D2A
  • editor.lineHighlightBorder#3D3D3B00
  • editor.selectionBackground#B8555544
  • editor.selectionHighlightBackground#B8935522
  • editorBracketHighlight.foreground1#C9A063
  • editorBracketHighlight.foreground2#6D95AD
  • editorBracketHighlight.foreground3#8DA37A
  • editorBracketHighlight.foreground4#A68656
  • editorBracketHighlight.foreground5#7A7469
  • editorBracketHighlight.foreground6#CF5A5A
  • editorBracketHighlight.unexpectedBracket.foreground#CF4232
  • editorCursor.foreground#B89355
  • editorGroup.border#3D3D3B
  • editorGroupHeader.tabsBackground#151514
  • editorHoverWidget.background#242423
  • editorIndentGuide.activeBackground1#4A463F
  • editorLineNumber.activeForeground#B89355
  • editorLineNumber.foreground#5C574F
  • editorLink.activeForeground#CF5A5A
  • editorSuggestWidget.background#242423
  • editorSuggestWidget.focusHighlightForeground#C9A063
  • editorSuggestWidget.highlightForeground#CF5A5A
  • editorSuggestWidget.selectedBackground#3D3D3B
  • editorWhitespace.foreground#3D3D3B
  • editorWidget.background#242423
  • editorWidget.border#B8935588
  • focusBorder#B89355
  • input.background#1C1C1B
  • input.border#3D3D3B
  • list.activeSelectionBackground#3D3D3B
  • list.activeSelectionForeground#F7F1E5
  • list.activeSelectionIconForeground#B89355
  • list.focusBackground#2D2D2A
  • list.focusForeground#CF5A5A
  • list.focusOutline#B89355
  • list.hoverBackground#2D2D2A
  • list.inactiveSelectionBackground#2D2D2A
  • list.inactiveSelectionForeground#D1C7B7
  • menu.background#242423
  • menu.border#3D3D3B
  • menu.foreground#D1C7B7
  • menu.selectionBackground#3D3D3B
  • menu.selectionForeground#B89355
  • pickerGroup.border#3D3D3B
  • pickerGroup.foreground#B89355
  • quickInput.background#242423
  • quickInput.foreground#D1C7B7
  • quickInputList.focusBackground#3D3D3B
  • quickInputTitle.background#151514
  • scrollbarSlider.activeBackground#B8935588
  • scrollbarSlider.background#B8935522
  • scrollbarSlider.hoverBackground#B8935544
  • sideBar.background#151514
  • sideBar.border#3D3D3B
  • sideBar.foreground#8E887D
  • statusBar.background#151514
  • statusBar.debuggingBackground#151514
  • statusBar.debuggingBorder#CF5A5A
  • statusBar.debuggingForeground#CF5A5A
  • statusBar.foreground#B5AFA2
  • statusBar.noFolderBackground#151514
  • statusBar.noFolderBorder#B89355
  • statusBar.noFolderForeground#B89355
  • tab.activeBackground#1C1C1B
  • tab.activeForeground#F7F1E5
  • tab.border#3D3D3B
  • tab.inactiveBackground#151514
  • tab.inactiveForeground#6E685E
  • textLink.activeForeground#CF5A5A
  • textLink.foreground#B89355
  • titleBar.activeBackground#151514
  • titleBar.activeForeground#D1C7B7
  • titleBar.border#3D3D3B
  • titleBar.inactiveBackground#151514

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused#7A7469italic
keyword, storage.type, storage.modifier, variable.language, constant.language#C9A063bold
string, punctuation.definition.string#8DA37A
constant.numeric, constant.character, constant.other#CF5A5A
entity.name.function, support.function, variable.function, meta.function-call#7194D6
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#A1B2BC
variable, variable.other, variable.parameter, support.variable, variable.other.property, variable.other.object.property#D1C7B7
punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.terminator, punctuation.separator#5C574F
entity.name.tag, meta.tag, punctuation.definition.tag, markup.heading#B3782C
gǔjí by zxu - VS Code Theme