Skip to main content
CodingTheme

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#24242e
  • activityBar.foreground#bebeef
  • badge.background#7272a1
  • button.background#3F3F4F
  • button.foreground#24242e
  • commandCenter.activeBackground#2B2B36
  • commandCenter.background#2B2B36
  • dropdown.background#2B2B36
  • dropdown.border#24242e
  • dropdown.listBackground#2B2B36
  • editor.background#24242e
  • editor.foreground#bebeef
  • editor.lineHighlightBackground#2B2B36
  • editor.lineHighlightBorder#2B2B36
  • editorGroupHeader.tabsBackground#2B2B36
  • foreground#bebeef
  • input.background#24242e
  • list.activeSelectionBackground#24242e
  • list.hoverBackground#24242e
  • list.inactiveSelectionBackground#24242e
  • menu.background#24242e
  • menubar.selectionBackground#24242e
  • panel.background#2B2B36
  • panel.border#24242e
  • quickInput.background#2B2B36
  • sideBar.background#2B2B36
  • sideBar.foreground#bebeef
  • statusBar.background#24242e
  • statusBar.foreground#bebeef
  • statusBarItem.errorBackground#AE81FF
  • statusBarItem.hoverBackground#2B2B36
  • statusBarItem.prominentHoverBackground#2B2B36
  • statusBarItem.remoteBackground#7272a1
  • tab.activeBackground#24242e
  • tab.activeForeground#bebeef
  • tab.inactiveBackground#2B2B36
  • tab.inactiveForeground#bebeef
  • titleBar.activeBackground#24242e
  • titleBar.activeForeground#bebeef
  • titleBar.border#24242e
  • titleBar.inactiveBackground#2B2B36
  • titleBar.inactiveForeground#bebeef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#49495a italic
meta.parameters comment.block#644c40 italic
string#fe7734
constant.numeric#fe7734
constant.language#fe7734
constant.character, constant.other, variable.other.constant#fe7734
variable, support.other.variable#8686cb
keyword#b06845
storage#b06845
storage.type#fe7734italic
entity.name.class#bebeefunderline
entity.name.type, support.type#bebeef
entity.other.inherited-class#bebeefitalic underline
entity.name.function#bebeef
variable.parameter#7272a1italic
entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.id#bebeef
entity.other.attribute-name#8686cb
support.function#bebeef
support.constant#fe7734
support.class#8686cb
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.brace, punctuation#49495a
comment.block.c#644c40 italic
meta.property-name, support.type.property-name#7272a1
meta.property-value#49495a
meta.object-literal.key#fe7734
variable.other.readwrite.alias#fe7734
variable.language.this, support.variable.object, support.variable.dom#7272a1
sidebar

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

DuoTone by briandgls92 - VS Code Theme