Skip to main content
Coding Theme

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.activeBackground#E9C7D5
  • activityBar.activeBorder#E9C7D5
  • activityBar.activeForeground#191919
  • activityBar.background#191919
  • activityBar.border#00000000
  • activityBar.foreground#E9C7D5
  • activityBar.inactiveForeground#E9C7D5
  • button.background#E9C7D5
  • button.border#E9C7D5
  • button.foreground#191919
  • button.hoverBackground#E9C7D5
  • contrastBorder#E9C7D533
  • dropdown.background#191919
  • dropdown.border#E9C7D5
  • dropdown.foreground#F5F0FB
  • editor.background#191919
  • editor.foreground#F5F0FB
  • editor.inactiveSelectionBackground#E9C7D533
  • editor.lineHighlightBackground#232323
  • editor.selectionBackground#E9C7D555
  • editorCursor.foreground#E9C7D5
  • editorIndentGuide.activeBackground1#E9C7D566
  • editorIndentGuide.background1#E9C7D522
  • editorLineNumber.activeForeground#E9C7D5
  • editorLineNumber.foreground#6F7780
  • focusBorder#E9C7D5
  • icon.foreground#E9C7D5
  • input.background#191919
  • input.border#E9C7D5
  • input.foreground#F5F0FB
  • list.activeSelectionBackground#E9C7D5
  • list.activeSelectionForeground#191919
  • list.focusBackground#E9C7D522
  • list.focusForeground#E9C7D5
  • list.focusOutline#E9C7D5
  • list.highlightForeground#E9C7D5
  • list.hoverBackground#E9C7D522
  • list.hoverForeground#191919
  • list.inactiveSelectionBackground#E9C7D5
  • list.inactiveSelectionForeground#191919
  • panel.background#191919
  • panel.border#2A2A2A
  • panelTitle.activeForeground#E9C7D5
  • panelTitle.inactiveForeground#E9C7D5
  • sideBar.background#191919
  • sideBar.border#00000000
  • sideBar.foreground#E9C7D5
  • statusBar.background#E9C7D5
  • statusBar.border#E9C7D5
  • statusBar.debuggingBackground#E9C7D5
  • statusBar.debuggingForeground#191919
  • statusBar.foreground#191919
  • statusBar.noFolderBackground#E9C7D5
  • statusBarItem.hoverBackground#E9C7D5
  • tab.activeBackground#232323
  • tab.activeBorder#E9C7D5
  • tab.activeForeground#E9C7D5
  • tab.border#2A2A2A
  • tab.hoverBackground#2D212A
  • tab.hoverForeground#E9C7D5
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#E9C7D5
  • terminal.background#191919
  • terminal.foreground#F5F0FB
  • terminalCursor.foreground#E9C7D5
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#E9C7D5
  • titleBar.border#2A2A2A
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#E9C7D5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#CBE7D6italic
keyword, storage.type, storage.modifier#E9C7D5bold
string, meta.embedded.assembly#BFCFBB—
constant.numeric, constant.language.boolean, constant.language.null#F5E7A1—
entity.name.function, support.function#D2E9D8—
variable, support.variable#D9E8DC—
entity.name.type, support.type, entity.name.class#CFE5D1—
meta.object-literal.key, support.type.property-name, variable.other.property#E9C7D5—
punctuation, meta.brace, meta.delimiter#F5E7A1—
entity.name.tag#BFCFBB—
entity.other.attribute-name#D2E9D8—
Strawberry Matcha - Dark Theme by tipandtale - VS Code Theme