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#130e0c
  • activityBar.foreground#ff7043
  • activityBar.inactiveForeground#7a6d63
  • activityBarBadge.background#ff7043
  • activityBarBadge.foreground#ffffff
  • badge.background#ff7043
  • badge.foreground#ffffff
  • button.background#ff7043
  • button.foreground#ffffff
  • button.hoverBackground#ff815a
  • dropdown.background#130e0c
  • editor.background#1a1310
  • editor.findMatchBackground#ff704366
  • editor.findMatchHighlightBackground#ff704338
  • editor.foreground#f0dcc8
  • editor.lineHighlightBackground#28211e
  • editor.selectionBackground#ff704342
  • editorBracketMatch.border#ff7043
  • editorCursor.foreground#ff7043
  • editorGroupHeader.tabsBackground#17110e
  • editorIndentGuide.activeBackground1#f0dcc838
  • editorIndentGuide.background1#f0dcc814
  • editorLineNumber.activeForeground#ff7043
  • editorLineNumber.foreground#7a6d63
  • editorSuggestWidget.selectedBackground#ff704342
  • editorWhitespace.foreground#f0dcc81a
  • editorWidget.background#130e0c
  • focusBorder#ff7043
  • input.background#130e0c
  • input.foreground#f0dcc8
  • input.placeholderForeground#7a6d63
  • list.activeSelectionBackground#ff704342
  • list.activeSelectionForeground#f0dcc8
  • list.hoverBackground#28211e
  • list.inactiveSelectionBackground#ff704324
  • panel.background#16100e
  • panelTitle.activeForeground#ff7043
  • scrollbarSlider.activeBackground#f0dcc85c
  • scrollbarSlider.background#f0dcc829
  • scrollbarSlider.hoverBackground#f0dcc842
  • selection.background#ff70434d
  • sideBar.background#16100e
  • sideBar.foreground#f0dcc8
  • sideBarSectionHeader.background#1a1310
  • sideBarTitle.foreground#ff7043
  • statusBar.background#130e0c
  • statusBar.foreground#f0dcc8
  • statusBar.noFolderBackground#130e0c
  • tab.activeBackground#1a1310
  • tab.activeBorderTop#ff7043
  • tab.activeForeground#ff7043
  • tab.border#17110e
  • tab.inactiveBackground#17110e
  • tab.inactiveForeground#7a6d63
  • terminal.background#1a1310
  • terminal.foreground#f0dcc8
  • titleBar.activeBackground#130e0c
  • titleBar.activeForeground#f0dcc8
  • titleBar.inactiveBackground#130e0c
  • titleBar.inactiveForeground#7a6d63

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6f5e4fitalic
string, string.quoted, string.template#ffb74d
constant.numeric, constant.language, constant.character#ffa726
keyword, keyword.control, storage, storage.type, storage.modifier#ff5252
entity.name.function, support.function, meta.function-call.generic#ff7043
variable, meta.definition.variable.name, variable.other.readwrite#f0dcc8
variable.parameter, parameter#c9b8a7
entity.name.type, support.type, support.class, entity.name.namespace#ffcc80
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff8a65
keyword.operator#ff7043
entity.name.tag, punctuation.definition.tag#ff5252
entity.other.attribute-name#ff7043
constant.other.color, support.constant#ffa726
entity.name.type.class#ffcc80bold
markup.boldbold
markup.italicitalic
markup.heading#ff7043bold
invalid#1a1310
ThemePaint by Toqir Ahmad - VS Code Theme