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#1e1616
  • activityBar.foreground#ffb454
  • activityBar.inactiveForeground#8a7971
  • activityBarBadge.background#ffb454
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ffb454
  • badge.foreground#1a1a1a
  • button.background#ffb454
  • button.foreground#1a1a1a
  • button.hoverBackground#ffbd69
  • dropdown.background#1e1616
  • editor.background#2a1e1e
  • editor.findMatchBackground#ffb45466
  • editor.findMatchHighlightBackground#ffb45438
  • editor.foreground#ffe8d6
  • editor.lineHighlightBackground#372c2c
  • editor.selectionBackground#ffb45442
  • editorBracketMatch.border#ffb454
  • editorCursor.foreground#ffb454
  • editorGroupHeader.tabsBackground#261b1b
  • editorIndentGuide.activeBackground1#ffe8d638
  • editorIndentGuide.background1#ffe8d614
  • editorLineNumber.activeForeground#ffb454
  • editorLineNumber.foreground#8a7971
  • editorSuggestWidget.selectedBackground#ffb45442
  • editorWhitespace.foreground#ffe8d61a
  • editorWidget.background#1e1616
  • focusBorder#ffb454
  • input.background#1e1616
  • input.foreground#ffe8d6
  • input.placeholderForeground#8a7971
  • list.activeSelectionBackground#ffb45442
  • list.activeSelectionForeground#ffe8d6
  • list.hoverBackground#372c2c
  • list.inactiveSelectionBackground#ffb45424
  • panel.background#241a1a
  • panelTitle.activeForeground#ffb454
  • scrollbarSlider.activeBackground#ffe8d65c
  • scrollbarSlider.background#ffe8d629
  • scrollbarSlider.hoverBackground#ffe8d642
  • selection.background#ffb4544d
  • sideBar.background#241a1a
  • sideBar.foreground#ffe8d6
  • sideBarSectionHeader.background#2a1e1e
  • sideBarTitle.foreground#ffb454
  • statusBar.background#1e1616
  • statusBar.foreground#ffe8d6
  • statusBar.noFolderBackground#1e1616
  • tab.activeBackground#2a1e1e
  • tab.activeBorderTop#ffb454
  • tab.activeForeground#ffb454
  • tab.border#261b1b
  • tab.inactiveBackground#261b1b
  • tab.inactiveForeground#8a7971
  • terminal.background#2a1e1e
  • terminal.foreground#ffe8d6
  • titleBar.activeBackground#1e1616
  • titleBar.activeForeground#ffe8d6
  • titleBar.inactiveBackground#1e1616
  • titleBar.inactiveForeground#8a7971

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7d6a5fitalic
string, string.quoted, string.template#ffd479
constant.numeric, constant.language, constant.character#ff7a59
keyword, keyword.control, storage, storage.type, storage.modifier#ff8f6b
entity.name.function, support.function, meta.function-call.generic#ffb454
variable, meta.definition.variable.name, variable.other.readwrite#ffe8d6
variable.parameter, parameter#d9c4b5
entity.name.type, support.type, support.class, entity.name.namespace#ffc98a
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff9e7a
keyword.operator#ffb454
entity.name.tag, punctuation.definition.tag#ff8f6b
entity.other.attribute-name#ffb454
constant.other.color, support.constant#ff7a59
entity.name.type.class#ffc98abold
markup.boldbold
markup.italicitalic
markup.heading#ffb454bold
invalid#2a1e1e
ThemePaint by Toqir Ahmad - VS Code Theme