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#130b00
  • activityBar.foreground#ffb000
  • activityBar.inactiveForeground#815700
  • activityBarBadge.background#ffb000
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ffb000
  • badge.foreground#1a1a1a
  • button.background#ffb000
  • button.foreground#1a1a1a
  • button.hoverBackground#ffb91f
  • dropdown.background#130b00
  • editor.background#1a0f00
  • editor.findMatchBackground#ffb00066
  • editor.findMatchHighlightBackground#ffb00038
  • editor.foreground#ffb000
  • editor.lineHighlightBackground#281d0f
  • editor.selectionBackground#ffb00042
  • editorBracketMatch.border#ffb000
  • editorCursor.foreground#ffb000
  • editorGroupHeader.tabsBackground#170e00
  • editorIndentGuide.activeBackground1#ffb00038
  • editorIndentGuide.background1#ffb00014
  • editorLineNumber.activeForeground#ffb000
  • editorLineNumber.foreground#815700
  • editorSuggestWidget.selectedBackground#ffb00042
  • editorWhitespace.foreground#ffb0001a
  • editorWidget.background#130b00
  • focusBorder#ffb000
  • input.background#130b00
  • input.foreground#ffb000
  • input.placeholderForeground#815700
  • list.activeSelectionBackground#ffb00042
  • list.activeSelectionForeground#ffb000
  • list.hoverBackground#281d0f
  • list.inactiveSelectionBackground#ffb00024
  • panel.background#160d00
  • panelTitle.activeForeground#ffb000
  • scrollbarSlider.activeBackground#ffb0005c
  • scrollbarSlider.background#ffb00029
  • scrollbarSlider.hoverBackground#ffb00042
  • selection.background#ffb0004d
  • sideBar.background#160d00
  • sideBar.foreground#ffb000
  • sideBarSectionHeader.background#1a0f00
  • sideBarTitle.foreground#ffb000
  • statusBar.background#130b00
  • statusBar.foreground#ffb000
  • statusBar.noFolderBackground#130b00
  • tab.activeBackground#1a0f00
  • tab.activeBorderTop#ffb000
  • tab.activeForeground#ffb000
  • tab.border#170e00
  • tab.inactiveBackground#170e00
  • tab.inactiveForeground#815700
  • terminal.background#1a0f00
  • terminal.foreground#ffb000
  • titleBar.activeBackground#130b00
  • titleBar.activeForeground#ffb000
  • titleBar.inactiveBackground#130b00
  • titleBar.inactiveForeground#815700

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a5a1aitalic
string, string.quoted, string.template#ffd966
constant.numeric, constant.language, constant.character#ff8800
keyword, keyword.control, storage, storage.type, storage.modifier#ffcc33
entity.name.function, support.function, meta.function-call.generic#ffaa00
variable, meta.definition.variable.name, variable.other.readwrite#ffb000
variable.parameter, parameter#d69300
entity.name.type, support.type, support.class, entity.name.namespace#ffdd99
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ffe0b3
keyword.operator#ffcc33
entity.name.tag, punctuation.definition.tag#ffcc33
entity.other.attribute-name#ffaa00
constant.other.color, support.constant#ff8800
entity.name.type.class#ffdd99bold
markup.boldbold
markup.italicitalic
markup.heading#ffb000bold
invalid#1a0f00
ThemePaint by Toqir Ahmad - VS Code Theme