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#181f23
  • activityBar.foreground#6a9fb5
  • activityBar.inactiveForeground#5e666e
  • activityBarBadge.background#6a9fb5
  • activityBarBadge.foreground#ffffff
  • badge.background#6a9fb5
  • badge.foreground#ffffff
  • button.background#6a9fb5
  • button.foreground#ffffff
  • button.hoverBackground#7cabbe
  • dropdown.background#181f23
  • editor.background#222b30
  • editor.findMatchBackground#6a9fb566
  • editor.findMatchHighlightBackground#6a9fb538
  • editor.foreground#a7adba
  • editor.lineHighlightBackground#2f383c
  • editor.selectionBackground#6a9fb542
  • editorBracketMatch.border#6a9fb5
  • editorCursor.foreground#6a9fb5
  • editorGroupHeader.tabsBackground#1f272b
  • editorIndentGuide.activeBackground1#a7adba38
  • editorIndentGuide.background1#a7adba14
  • editorLineNumber.activeForeground#6a9fb5
  • editorLineNumber.foreground#5e666e
  • editorSuggestWidget.selectedBackground#6a9fb542
  • editorWhitespace.foreground#a7adba1a
  • editorWidget.background#181f23
  • focusBorder#6a9fb5
  • input.background#181f23
  • input.foreground#a7adba
  • input.placeholderForeground#5e666e
  • list.activeSelectionBackground#6a9fb542
  • list.activeSelectionForeground#a7adba
  • list.hoverBackground#2f383c
  • list.inactiveSelectionBackground#6a9fb524
  • panel.background#1d2529
  • panelTitle.activeForeground#6a9fb5
  • scrollbarSlider.activeBackground#a7adba5c
  • scrollbarSlider.background#a7adba29
  • scrollbarSlider.hoverBackground#a7adba42
  • selection.background#6a9fb54d
  • sideBar.background#1d2529
  • sideBar.foreground#a7adba
  • sideBarSectionHeader.background#222b30
  • sideBarTitle.foreground#6a9fb5
  • statusBar.background#181f23
  • statusBar.foreground#a7adba
  • statusBar.noFolderBackground#181f23
  • tab.activeBackground#222b30
  • tab.activeBorderTop#6a9fb5
  • tab.activeForeground#6a9fb5
  • tab.border#1f272b
  • tab.inactiveBackground#1f272b
  • tab.inactiveForeground#5e666e
  • terminal.background#222b30
  • terminal.foreground#a7adba
  • titleBar.activeBackground#181f23
  • titleBar.activeForeground#a7adba
  • titleBar.inactiveBackground#181f23
  • titleBar.inactiveForeground#5e666e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5a6671italic
string, string.quoted, string.template#90a959
constant.numeric, constant.language, constant.character#d28445
keyword, keyword.control, storage, storage.type, storage.modifier#ba8baf
entity.name.function, support.function, meta.function-call.generic#6a9fb5
variable, meta.definition.variable.name, variable.other.readwrite#a7adba
variable.parameter, parameter#8f96a1
entity.name.type, support.type, support.class, entity.name.namespace#f4bf75
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ac4142
keyword.operator#75b5aa
entity.name.tag, punctuation.definition.tag#ba8baf
entity.other.attribute-name#6a9fb5
constant.other.color, support.constant#d28445
entity.name.type.class#f4bf75bold
markup.boldbold
markup.italicitalic
markup.heading#6a9fb5bold
invalid#222b30