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#140e0c
  • activityBar.foreground#b07a4f
  • activityBar.inactiveForeground#73675c
  • activityBarBadge.background#b07a4f
  • activityBarBadge.foreground#ffffff
  • badge.background#b07a4f
  • badge.foreground#ffffff
  • button.background#b07a4f
  • button.foreground#ffffff
  • button.hoverBackground#b98a64
  • dropdown.background#140e0c
  • editor.background#1c1411
  • editor.findMatchBackground#b07a4f66
  • editor.findMatchHighlightBackground#b07a4f38
  • editor.foreground#ddccb8
  • editor.lineHighlightBackground#2a221f
  • editor.selectionBackground#b07a4f42
  • editorBracketMatch.border#b07a4f
  • editorCursor.foreground#b07a4f
  • editorGroupHeader.tabsBackground#19120f
  • editorIndentGuide.activeBackground1#ddccb838
  • editorIndentGuide.background1#ddccb814
  • editorLineNumber.activeForeground#b07a4f
  • editorLineNumber.foreground#73675c
  • editorSuggestWidget.selectedBackground#b07a4f42
  • editorWhitespace.foreground#ddccb81a
  • editorWidget.background#140e0c
  • focusBorder#b07a4f
  • input.background#140e0c
  • input.foreground#ddccb8
  • input.placeholderForeground#73675c
  • list.activeSelectionBackground#b07a4f42
  • list.activeSelectionForeground#ddccb8
  • list.hoverBackground#2a221f
  • list.inactiveSelectionBackground#b07a4f24
  • panel.background#18110f
  • panelTitle.activeForeground#b07a4f
  • scrollbarSlider.activeBackground#ddccb85c
  • scrollbarSlider.background#ddccb829
  • scrollbarSlider.hoverBackground#ddccb842
  • selection.background#b07a4f4d
  • sideBar.background#18110f
  • sideBar.foreground#ddccb8
  • sideBarSectionHeader.background#1c1411
  • sideBarTitle.foreground#b07a4f
  • statusBar.background#140e0c
  • statusBar.foreground#ddccb8
  • statusBar.noFolderBackground#140e0c
  • tab.activeBackground#1c1411
  • tab.activeBorderTop#b07a4f
  • tab.activeForeground#b07a4f
  • tab.border#19120f
  • tab.inactiveBackground#19120f
  • tab.inactiveForeground#73675c
  • terminal.background#1c1411
  • terminal.foreground#ddccb8
  • titleBar.activeBackground#140e0c
  • titleBar.activeForeground#ddccb8
  • titleBar.inactiveBackground#140e0c
  • titleBar.inactiveForeground#73675c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6e5c4aitalic
string, string.quoted, string.template#9aa85e
constant.numeric, constant.language, constant.character#c08552
keyword, keyword.control, storage, storage.type, storage.modifier#cc8a5e
entity.name.function, support.function, meta.function-call.generic#d4a45c
variable, meta.definition.variable.name, variable.other.readwrite#ddccb8
variable.parameter, parameter#baab9a
entity.name.type, support.type, support.class, entity.name.namespace#caa05c
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#c56a4a
keyword.operator#b07a4f
entity.name.tag, punctuation.definition.tag#cc8a5e
entity.other.attribute-name#d4a45c
constant.other.color, support.constant#c08552
entity.name.type.class#caa05cbold
markup.boldbold
markup.italicitalic
markup.heading#b07a4fbold
invalid#1c1411
ThemePaint by Toqir Ahmad - VS Code Theme