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#1b1813
  • activityBar.foreground#cba65f
  • activityBar.inactiveForeground#78705e
  • activityBarBadge.background#cba65f
  • activityBarBadge.foreground#1a1a1a
  • badge.background#cba65f
  • badge.foreground#1a1a1a
  • button.background#cba65f
  • button.foreground#1a1a1a
  • button.hoverBackground#d1b172
  • dropdown.background#1b1813
  • editor.background#26211a
  • editor.findMatchBackground#cba65f66
  • editor.findMatchHighlightBackground#cba65f38
  • editor.foreground#ddd0b0
  • editor.lineHighlightBackground#332e28
  • editor.selectionBackground#cba65f42
  • editorBracketMatch.border#cba65f
  • editorCursor.foreground#cba65f
  • editorGroupHeader.tabsBackground#221e17
  • editorIndentGuide.activeBackground1#ddd0b038
  • editorIndentGuide.background1#ddd0b014
  • editorLineNumber.activeForeground#cba65f
  • editorLineNumber.foreground#78705e
  • editorSuggestWidget.selectedBackground#cba65f42
  • editorWhitespace.foreground#ddd0b01a
  • editorWidget.background#1b1813
  • focusBorder#cba65f
  • input.background#1b1813
  • input.foreground#ddd0b0
  • input.placeholderForeground#78705e
  • list.activeSelectionBackground#cba65f42
  • list.activeSelectionForeground#ddd0b0
  • list.hoverBackground#332e28
  • list.inactiveSelectionBackground#cba65f24
  • panel.background#211c16
  • panelTitle.activeForeground#cba65f
  • scrollbarSlider.activeBackground#ddd0b05c
  • scrollbarSlider.background#ddd0b029
  • scrollbarSlider.hoverBackground#ddd0b042
  • selection.background#cba65f4d
  • sideBar.background#211c16
  • sideBar.foreground#ddd0b0
  • sideBarSectionHeader.background#26211a
  • sideBarTitle.foreground#cba65f
  • statusBar.background#1b1813
  • statusBar.foreground#ddd0b0
  • statusBar.noFolderBackground#1b1813
  • tab.activeBackground#26211a
  • tab.activeBorderTop#cba65f
  • tab.activeForeground#cba65f
  • tab.border#221e17
  • tab.inactiveBackground#221e17
  • tab.inactiveForeground#78705e
  • terminal.background#26211a
  • terminal.foreground#ddd0b0
  • titleBar.activeBackground#1b1813
  • titleBar.activeForeground#ddd0b0
  • titleBar.inactiveBackground#1b1813
  • titleBar.inactiveForeground#78705e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#857650italic
string, string.quoted, string.template#9aa05a
constant.numeric, constant.language, constant.character#b07a4a
keyword, keyword.control, storage, storage.type, storage.modifier#c96f4e
entity.name.function, support.function, meta.function-call.generic#c9a45c
variable, meta.definition.variable.name, variable.other.readwrite#ddd0b0
variable.parameter, parameter#bcb195
entity.name.type, support.type, support.class, entity.name.namespace#c9a05c
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#9a8a5a
keyword.operator#7f9a78
entity.name.tag, punctuation.definition.tag#c96f4e
entity.other.attribute-name#c9a45c
constant.other.color, support.constant#b07a4a
entity.name.type.class#c9a05cbold
markup.boldbold
markup.italicitalic
markup.heading#cba65fbold
invalid#26211a
ThemePaint by Toqir Ahmad - VS Code Theme