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#090000
  • activityBar.foreground#ff1e1e
  • activityBar.inactiveForeground#7a3030
  • activityBarBadge.background#ff1e1e
  • activityBarBadge.foreground#ffffff
  • badge.background#ff1e1e
  • badge.foreground#ffffff
  • button.background#ff1e1e
  • button.foreground#ffffff
  • button.hoverBackground#ff3939
  • dropdown.background#090000
  • editor.background#0d0000
  • editor.findMatchBackground#ff1e1e66
  • editor.findMatchHighlightBackground#ff1e1e38
  • editor.foreground#ff6b6b
  • editor.lineHighlightBackground#1c0f0f
  • editor.selectionBackground#ff1e1e42
  • editorBracketMatch.border#ff1e1e
  • editorCursor.foreground#ff1e1e
  • editorGroupHeader.tabsBackground#0c0000
  • editorIndentGuide.activeBackground1#ff6b6b38
  • editorIndentGuide.background1#ff6b6b14
  • editorLineNumber.activeForeground#ff1e1e
  • editorLineNumber.foreground#7a3030
  • editorSuggestWidget.selectedBackground#ff1e1e42
  • editorWhitespace.foreground#ff6b6b1a
  • editorWidget.background#090000
  • focusBorder#ff1e1e
  • input.background#090000
  • input.foreground#ff6b6b
  • input.placeholderForeground#7a3030
  • list.activeSelectionBackground#ff1e1e42
  • list.activeSelectionForeground#ff6b6b
  • list.hoverBackground#1c0f0f
  • list.inactiveSelectionBackground#ff1e1e24
  • panel.background#0b0000
  • panelTitle.activeForeground#ff1e1e
  • scrollbarSlider.activeBackground#ff6b6b5c
  • scrollbarSlider.background#ff6b6b29
  • scrollbarSlider.hoverBackground#ff6b6b42
  • selection.background#ff1e1e4d
  • sideBar.background#0b0000
  • sideBar.foreground#ff6b6b
  • sideBarSectionHeader.background#0d0000
  • sideBarTitle.foreground#ff1e1e
  • statusBar.background#090000
  • statusBar.foreground#ff6b6b
  • statusBar.noFolderBackground#090000
  • tab.activeBackground#0d0000
  • tab.activeBorderTop#ff1e1e
  • tab.activeForeground#ff1e1e
  • tab.border#0c0000
  • tab.inactiveBackground#0c0000
  • tab.inactiveForeground#7a3030
  • terminal.background#0d0000
  • terminal.foreground#ff6b6b
  • titleBar.activeBackground#090000
  • titleBar.activeForeground#ff6b6b
  • titleBar.inactiveBackground#090000
  • titleBar.inactiveForeground#7a3030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a2a2aitalic
string, string.quoted, string.template#ff8e8e
constant.numeric, constant.language, constant.character#ffab40
keyword, keyword.control, storage, storage.type, storage.modifier#ff1e1e
entity.name.function, support.function, meta.function-call.generic#ff5252
variable, meta.definition.variable.name, variable.other.readwrite#ff6b6b
variable.parameter, parameter#d35858
entity.name.type, support.type, support.class, entity.name.namespace#ff7961
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ffcdd2
keyword.operator#ff5252
entity.name.tag, punctuation.definition.tag#ff1e1e
entity.other.attribute-name#ff5252
constant.other.color, support.constant#ffab40
entity.name.type.class#ff7961bold
markup.boldbold
markup.italicitalic
markup.heading#ff1e1ebold
invalid#0d0000