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#232323
  • activityBar.background#191919
  • activityBar.foreground#f8dbe4
  • activityBar.inactiveForeground#c9aeb7
  • activityBarBadge.background#f8dbe4
  • activityBarBadge.foreground#191919
  • button.background#f8dbe4
  • button.border#b7cce0
  • button.foreground#191919
  • button.hoverBackground#fdeaf0
  • contrastBorder#d5e3ee33
  • dropdown.background#191919
  • dropdown.border#d5e3ee
  • dropdown.foreground#DBE9CA
  • editor.background#191919
  • editor.foreground#DBE9CA
  • editor.inactiveSelectionBackground#d5e3ee33
  • editor.lineHighlightBackground#232323
  • editor.selectionBackground#f8dbe455
  • editorCursor.foreground#f8dbe4
  • editorIndentGuide.activeBackground1#d5e3ee66
  • editorIndentGuide.background1#d5e3ee22
  • editorLineNumber.activeForeground#f4d4e0
  • editorLineNumber.foreground#6f7780
  • focusBorder#f8dbe4
  • input.background#191919
  • input.border#f8dbe4
  • input.foreground#DBE9CA
  • list.activeSelectionBackground#f8dbe4
  • list.activeSelectionForeground#191919
  • list.focusBackground#d5e3ee22
  • list.highlightForeground#f8dbe4
  • list.hoverBackground#d5e3ee22
  • list.inactiveSelectionBackground#d5e3ee33
  • list.inactiveSelectionForeground#f4d4e0
  • panel.background#191919
  • panel.border#2a2a2a
  • panelTitle.activeForeground#f8dbe4
  • panelTitle.inactiveForeground#DBE9CA
  • sideBar.background#191919
  • sideBar.border#2a2a2a
  • sideBar.foreground#f8dbe4
  • sideBarSectionHeader.background#f8dbe4
  • sideBarSectionHeader.foreground#191919
  • sideBarTitle.foreground#f8dbe4
  • statusBar.background#f8dbe4
  • statusBar.border#e2c2cc
  • statusBar.debuggingBackground#d5e3ee
  • statusBar.debuggingForeground#191919
  • statusBar.foreground#191919
  • statusBar.noFolderBackground#f4d4e0
  • statusBarItem.hoverBackground#edcbd6
  • tab.activeBackground#f8dbe4
  • tab.activeBorder#f8dbe4
  • tab.activeForeground#191919
  • tab.border#2a2a2a
  • tab.hoverBackground#232323
  • tab.hoverForeground#f4d4e0
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#c9aeb7
  • terminal.background#191919
  • terminal.foreground#DBE9CA
  • terminalCursor.foreground#f4d4e0
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#f8dbe4
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#f4d4e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7D8970italic
keyword, storage.type, storage.modifier#D5E3EEbold
string, meta.embedded.assembly#DBE9CA
constant.numeric, constant.language.boolean, constant.language.null#F5E7A1
entity.name.function, support.function#f4d4e0
variable, support.variable#D8C7F4
entity.name.type, support.type, entity.name.class#B7E4D4
meta.object-literal.key, support.type.property-name, variable.other.property#f4d4e0
punctuation, meta.brace, meta.delimiter#F5E7A1
entity.name.tag#DBE9CA
entity.other.attribute-name#f4d4e0
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Strawberry Matcha - Dark Theme by tipandtale - VS Code Theme