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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#CBE7D6italic
keyword, storage.type, storage.modifier#C7D9E9bold
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#C7D9E9
punctuation, meta.brace, meta.delimiter#F5E7A1
entity.name.tag#BFCFBB
entity.other.attribute-name#D2E9D8
Sea Salt Matcha by tipandtale - VS Code Theme