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#1f1a17
  • activityBar.foreground#e0a458
  • activityBar.inactiveForeground#807564
  • activityBarBadge.background#e0a458
  • activityBarBadge.foreground#1a1a1a
  • badge.background#e0a458
  • badge.foreground#1a1a1a
  • button.background#e0a458
  • button.foreground#1a1a1a
  • button.hoverBackground#e4af6c
  • dropdown.background#1f1a17
  • editor.background#2b2420
  • editor.findMatchBackground#e0a45866
  • editor.findMatchHighlightBackground#e0a45838
  • editor.foreground#e8d8b8
  • editor.lineHighlightBackground#38312d
  • editor.selectionBackground#e0a45842
  • editorBracketMatch.border#e0a458
  • editorCursor.foreground#e0a458
  • editorGroupHeader.tabsBackground#27201d
  • editorIndentGuide.activeBackground1#e8d8b838
  • editorIndentGuide.background1#e8d8b814
  • editorLineNumber.activeForeground#e0a458
  • editorLineNumber.foreground#807564
  • editorSuggestWidget.selectedBackground#e0a45842
  • editorWhitespace.foreground#e8d8b81a
  • editorWidget.background#1f1a17
  • focusBorder#e0a458
  • input.background#1f1a17
  • input.foreground#e8d8b8
  • input.placeholderForeground#807564
  • list.activeSelectionBackground#e0a45842
  • list.activeSelectionForeground#e8d8b8
  • list.hoverBackground#38312d
  • list.inactiveSelectionBackground#e0a45824
  • panel.background#251f1c
  • panelTitle.activeForeground#e0a458
  • scrollbarSlider.activeBackground#e8d8b85c
  • scrollbarSlider.background#e8d8b829
  • scrollbarSlider.hoverBackground#e8d8b842
  • selection.background#e0a4584d
  • sideBar.background#251f1c
  • sideBar.foreground#e8d8b8
  • sideBarSectionHeader.background#2b2420
  • sideBarTitle.foreground#e0a458
  • statusBar.background#1f1a17
  • statusBar.foreground#e8d8b8
  • statusBar.noFolderBackground#1f1a17
  • tab.activeBackground#2b2420
  • tab.activeBorderTop#e0a458
  • tab.activeForeground#e0a458
  • tab.border#27201d
  • tab.inactiveBackground#27201d
  • tab.inactiveForeground#807564
  • terminal.background#2b2420
  • terminal.foreground#e8d8b8
  • titleBar.activeBackground#1f1a17
  • titleBar.activeForeground#e8d8b8
  • titleBar.inactiveBackground#1f1a17
  • titleBar.inactiveForeground#807564

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8a7a5citalic
string, string.quoted, string.template#a3a35c
constant.numeric, constant.language, constant.character#cf8a5c
keyword, keyword.control, storage, storage.type, storage.modifier#e07a5f
entity.name.function, support.function, meta.function-call.generic#d4a55c
variable, meta.definition.variable.name, variable.other.readwrite#e8d8b8
variable.parameter, parameter#c6b89d
entity.name.type, support.type, support.class, entity.name.namespace#e0b15c
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#7fa0a0
keyword.operator#88a05c
entity.name.tag, punctuation.definition.tag#e07a5f
entity.other.attribute-name#d4a55c
constant.other.color, support.constant#cf8a5c
entity.name.type.class#e0b15cbold
markup.boldbold
markup.italicitalic
markup.heading#e0a458bold
invalid#2b2420
ThemePaint by Toqir Ahmad - VS Code Theme