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#2E2D38
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#cccccc60
  • activityBarBadge.background#d4b5d4
  • activityBarBadge.foreground#2E2D38
  • badge.background#d4b5d4
  • badge.foreground#2E2D38
  • diffEditor.insertedLineBackground#1b834f45
  • diffEditor.insertedTextBackground#03af0f30
  • diffEditor.insertedTextBorder#417e3596
  • diffEditor.removedLineBackground#96224545
  • diffEditor.removedTextBackground#e9001f30
  • diffEditor.removedTextBorder#94707996
  • editor.background#292831
  • editor.foreground#cccccc
  • editor.selectionBackground#d6d6d650
  • editorGroupHeader.tabsBackground#2E2D38
  • editorWidget.background#2E2D38
  • focusBorder#d4b5d4
  • foreground#cccccc
  • input.background#292831
  • list.activeSelectionBackground#292831
  • list.activeSelectionForeground#d4b5d4
  • list.focusBackground#292831
  • list.focusForeground#d4b5d4
  • list.highlightForeground#d4b5d4
  • list.hoverBackground#292831
  • list.hoverForeground#d4b5d4
  • list.inactiveSelectionBackground#292831
  • list.inactiveSelectionForeground#d4b5d4
  • menu.background#292831
  • menu.foreground#cccccc
  • menu.selectionBackground#2E2D38
  • menu.selectionForeground#d4b5d4
  • menubar.selectionBackground#292831
  • menubar.selectionForeground#d4b5d4
  • panel.background#2E2D38
  • pickerGroup.foreground#d4b5d4
  • sideBar.background#2E2D38
  • sideBar.border#000000
  • sideBarSectionHeader.background#2E2D38
  • sideBarSectionHeader.border#d4b5d4
  • sideBarSectionHeader.foreground#d4b5d4
  • sideBarTitle.foreground#d4b5d4
  • statusBar.background#2E2D38
  • statusBar.debuggingBackground#d4b5d4
  • statusBar.debuggingForeground#292831
  • statusBar.foreground#ccccccef
  • statusBar.noFolderBackground#292831
  • tab.activeForeground#d4b5d4
  • tab.border#000000
  • tab.inactiveBackground#2E2D38
  • tab.inactiveForeground#ccccccef
  • titleBar.activeBackground#2E2D38
  • titleBar.activeForeground#ccccccef
  • titleBar.inactiveBackground#2E2D38
  • titleBar.inactiveForeground#ccccccaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, entity.other.attribute-name.class, keyword, storage#eaeab1
entity.name.tag support, entity.name.tag, meta.block keyword, meta.block storage, punctuation.definition.tag, source.json punctuation, source.json support.type.property-name, support.function#f4b3b4
entity.other.inherited-class, meta.tag entity.other.attribute-name, variable.language.this#f4b3b4italic
meta.object-literal.key entity.name.function, meta.object-literal.key, meta.object.member variable.other.readwrite, support.type.property-name, support.variable.property, variable.other.object.property, variable.other.property#ccccccitalic
meta.template.expression variable#cccccc
constant, punctuation.definition.template-expression, string, support.constant#a0d9ae
comment, punctuation.definition.comment#5c6773
punctuation.definition.string#F4B3B4
constant.language.json#9dceaa
string.quoted#fefefe
support.type.property-name.json#f4b3b4
meta.structure.dictionary.value support.type.property-name.json#fef2c1
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#9dceaa
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#fef2c1

Shiki preview

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

Loading...