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#161320
  • activityBar.foreground#ff9e64
  • activityBar.inactiveForeground#7d767d
  • activityBarBadge.background#ff9e64
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ff9e64
  • badge.foreground#1a1a1a
  • button.background#ff9e64
  • button.foreground#1a1a1a
  • button.hoverBackground#ffaa77
  • dropdown.background#161320
  • editor.background#1f1a2c
  • editor.findMatchBackground#ff9e6466
  • editor.findMatchHighlightBackground#ff9e6438
  • editor.foreground#f0e6e0
  • editor.lineHighlightBackground#2c2839
  • editor.selectionBackground#ff9e6442
  • editorBracketMatch.border#ff9e64
  • editorCursor.foreground#ff9e64
  • editorGroupHeader.tabsBackground#1c1728
  • editorIndentGuide.activeBackground1#f0e6e038
  • editorIndentGuide.background1#f0e6e014
  • editorLineNumber.activeForeground#ff9e64
  • editorLineNumber.foreground#7d767d
  • editorSuggestWidget.selectedBackground#ff9e6442
  • editorWhitespace.foreground#f0e6e01a
  • editorWidget.background#161320
  • focusBorder#ff9e64
  • input.background#161320
  • input.foreground#f0e6e0
  • input.placeholderForeground#7d767d
  • list.activeSelectionBackground#ff9e6442
  • list.activeSelectionForeground#f0e6e0
  • list.hoverBackground#2c2839
  • list.inactiveSelectionBackground#ff9e6424
  • panel.background#1b1626
  • panelTitle.activeForeground#ff9e64
  • scrollbarSlider.activeBackground#f0e6e05c
  • scrollbarSlider.background#f0e6e029
  • scrollbarSlider.hoverBackground#f0e6e042
  • selection.background#ff9e644d
  • sideBar.background#1b1626
  • sideBar.foreground#f0e6e0
  • sideBarSectionHeader.background#1f1a2c
  • sideBarTitle.foreground#ff9e64
  • statusBar.background#161320
  • statusBar.foreground#f0e6e0
  • statusBar.noFolderBackground#161320
  • tab.activeBackground#1f1a2c
  • tab.activeBorderTop#ff9e64
  • tab.activeForeground#ff9e64
  • tab.border#1c1728
  • tab.inactiveBackground#1c1728
  • tab.inactiveForeground#7d767d
  • terminal.background#1f1a2c
  • terminal.foreground#f0e6e0
  • titleBar.activeBackground#161320
  • titleBar.activeForeground#f0e6e0
  • titleBar.inactiveBackground#161320
  • titleBar.inactiveForeground#7d767d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a5f70italic
string, string.quoted, string.template#ffd479
constant.numeric, constant.language, constant.character#ff6b6b
keyword, keyword.control, storage, storage.type, storage.modifier#ff79c6
entity.name.function, support.function, meta.function-call.generic#ff9e64
variable, meta.definition.variable.name, variable.other.readwrite#f0e6e0
variable.parameter, parameter#cac1c0
entity.name.type, support.type, support.class, entity.name.namespace#ffb86c
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff7eb6
keyword.operator#ff79c6
entity.name.tag, punctuation.definition.tag#ff79c6
entity.other.attribute-name#ff9e64
constant.other.color, support.constant#ff6b6b
entity.name.type.class#ffb86cbold
markup.boldbold
markup.italicitalic
markup.heading#ff9e64bold
invalid#1f1a2c