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#2c2826
  • activityBar.foreground#ffdac2
  • badge.background#98755d
  • button.background#4D4642
  • button.foreground#2c2826
  • commandCenter.activeBackground#35302D
  • commandCenter.background#35302D
  • dropdown.background#35302D
  • dropdown.border#2c2826
  • dropdown.listBackground#35302D
  • editor.background#2c2826
  • editor.foreground#ffdac2
  • editor.lineHighlightBackground#35302D
  • editor.lineHighlightBorder#35302D
  • editorGroupHeader.tabsBackground#35302D
  • foreground#ffdac2
  • input.background#2c2826
  • list.activeSelectionBackground#2c2826
  • list.hoverBackground#2c2826
  • list.inactiveSelectionBackground#2c2826
  • menu.background#2c2826
  • menubar.selectionBackground#2c2826
  • panel.background#35302D
  • panel.border#2c2826
  • quickInput.background#35302D
  • sideBar.background#35302D
  • sideBar.foreground#ffdac2
  • statusBar.background#2c2826
  • statusBar.foreground#ffdac2
  • statusBarItem.errorBackground#AE81FF
  • statusBarItem.hoverBackground#35302D
  • statusBarItem.prominentHoverBackground#35302D
  • statusBarItem.remoteBackground#98755d
  • tab.activeBackground#2c2826
  • tab.activeForeground#ffdac2
  • tab.inactiveBackground#35302D
  • tab.inactiveForeground#ffdac2
  • titleBar.activeBackground#2c2826
  • titleBar.activeForeground#ffdac2
  • titleBar.border#2c2826
  • titleBar.inactiveBackground#35302D
  • titleBar.inactiveForeground#ffdac2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#564b43 italic
meta.parameters comment.block#726546 italic
string#fecb52
constant.numeric#fecb52
constant.language#fecb52
constant.character, constant.other, variable.other.constant#fecb52
variable, support.other.variable#bd987f
keyword#b09045
storage#b09045
storage.type#fecb52italic
entity.name.class#ffdac2underline
entity.name.type, support.type#ffdac2
entity.other.inherited-class#ffdac2italic underline
entity.name.function#ffdac2
variable.parameter#98755ditalic
entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.id#ffdac2
entity.other.attribute-name#bd987f
support.function#ffdac2
support.constant#fecb52
support.class#bd987f
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.brace, punctuation#564b43
comment.block.c#726546 italic
meta.property-name, support.type.property-name#98755d
meta.property-value#564b43
meta.object-literal.key#fecb52
variable.other.readwrite.alias#fecb52
variable.language.this, support.variable.object, support.variable.dom#98755d
sidebar

Shiki preview

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

Loading...