Skip to main content
Coding Theme

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#1a1a2e
  • activityBar.foreground#80cbc4
  • activityBarBadge.background#26a69a
  • activityBarBadge.foreground#ffffff
  • dialog.background#1a1a2e
  • dialog.border#ce93d8
  • dialog.foreground#f8f8f2
  • dialog.shadow#000000
  • dropdown.background#1a1a2e
  • dropdown.border#2a2a2a
  • dropdown.foreground#f8f8f2
  • dropdown.listBackground#1a1a2e
  • editor.background#1a1a2e
  • editor.findMatchBackground#4db6ac
  • editor.findMatchHighlightBackground#80cbc4
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#16213e
  • editor.selectionBackground#2d4a7a
  • editor.wordHighlightBackground#ce93d8
  • editor.wordHighlightStrongBackground#e1bee7
  • editorGroup.border#2a2a2a
  • editorGroupHeader.noTabsBackground#16213e
  • editorGroupHeader.tabsBackground#16213e
  • editorGroupHeader.tabsBorder#2a2a2a
  • editorHoverWidget.background#1a1a2e
  • editorHoverWidget.border#2a2a2a
  • editorHoverWidget.foreground#f8f8f2
  • editorLineNumber.activeForeground#6b6b6b
  • editorLineNumber.foreground#6b6b6b
  • editorSuggestWidget.background#1a1a2e
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.foreground#f8f8f2
  • editorSuggestWidget.highlightForeground#26a69a
  • editorSuggestWidget.selectedBackground#16213e
  • editorSuggestWidget.selectedForeground#f8f8f2
  • editorWidget.background#1a1a2e
  • editorWidget.border#2a2a2a
  • editorWidget.foreground#f8f8f2
  • input.background#1a1a2e
  • input.border#2a2a2a
  • input.focusedBackground#1a1a2e
  • input.focusedBorder#e0e0e0
  • input.foreground#f8f8f2
  • input.placeholderForeground#80cbc4
  • inputOption.activeBorder#e0e0e0
  • inputOption.hoverBackground#16213e
  • inputValidation.errorBackground#1a1a2e
  • inputValidation.errorBorder#ef9a9a
  • inputValidation.errorForeground#f8f8f2
  • inputValidation.infoBackground#1a1a2e
  • inputValidation.infoBorder#2a2a2a
  • inputValidation.infoForeground#f8f8f2
  • inputValidation.warningBackground#1a1a2e
  • inputValidation.warningBorder#ffb74d
  • inputValidation.warningForeground#f8f8f2
  • list.activeSelectionBackground#16213e
  • list.activeSelectionForeground#f8f8f2
  • list.focusBackground#16213e
  • list.focusForeground#f8f8f2
  • list.hoverBackground#16213e
  • list.hoverForeground#f8f8f2
  • list.inactiveSelectionBackground#16213e
  • list.inactiveSelectionForeground#f8f8f2
  • menu.background#1a1a2e
  • menu.border#2a2a2a
  • menu.foreground#f8f8f2
  • menu.selectionBackground#16213e
  • menu.selectionForeground#f8f8f2
  • notification.background#1a1a2e
  • notification.border#ce93d8
  • notification.errorBackground#1a1a2e
  • notification.errorForeground#f8f8f2
  • notification.foreground#f8f8f2
  • notification.infoBackground#1a1a2e
  • notification.infoForeground#f8f8f2
  • notification.warningBackground#1a1a2e
  • notification.warningForeground#f8f8f2
  • panel.background#1a1a2e
  • panel.border#2a2a2a
  • quickInput.background#1a1a2e
  • quickInput.foreground#f8f8f2
  • quickInputList.focusBackground#16213e
  • quickInputList.focusDescriptionForeground#e1bee7
  • quickInputList.focusForeground#f8f8f2
  • quickInputList.focusHighlightBackground#4db6ac
  • quickInputList.focusHighlightForeground#1a1a2e
  • quickInputList.focusIconForeground#26a69a
  • scrollbarSlider.activeBackground#6a6a6a
  • scrollbarSlider.background#4a4a4a
  • scrollbarSlider.hoverBackground#5a5a5a
  • searchEditor.textInputBackground#1a1a2e
  • searchEditor.textInputBorder#2a2a2a
  • searchEditor.textInputFocusedBorder#e0e0e0
  • sideBar.background#1a1a2e
  • sideBar.border#2a2a2a
  • sideBar.foreground#80cbc4
  • sideBarSectionHeader.background#16213e
  • statusBar.background#1a1a2e
  • statusBar.foreground#a0a0a0
  • tab.activeBackground#1a1a2e
  • tab.activeBorder#2a2a2a
  • tab.activeBorderTop#2a2a2a
  • tab.activeForeground#e0e0e0
  • tab.border#2a2a2a
  • tab.hoverBackground#1a1a2e
  • tab.hoverBorder#2a2a2a
  • tab.inactiveBackground#1a1a2e
  • tab.inactiveBorder#2a2a2a
  • tab.inactiveForeground#b0b0b0
  • tab.unfocusedActiveBackground#1a1a2e
  • tab.unfocusedActiveBorder#2a2a2a
  • tab.unfocusedActiveForeground#e0e0e0
  • tab.unfocusedHoverBackground#1a1a2e
  • tab.unfocusedHoverBorder#2a2a2a
  • tab.unfocusedInactiveBackground#1a1a2e
  • tab.unfocusedInactiveBorder#2a2a2a
  • tab.unfocusedInactiveForeground#b0b0b0
  • terminal.background#1a1a2e
  • terminal.border#2a2a2a
  • textInput.background#1a1a2e
  • textInput.border#2a2a2a
  • textInput.focusedBorder#e0e0e0
  • textInput.foreground#f8f8f2
  • textInput.placeholderForeground#80cbc4
  • titleBar.activeBackground#1a1a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#80cbc4
string, string.quoted#e1bee7
keyword, storage.type, storage.modifier#26a69a
entity.name.function, support.function#90caf9
variable, variable.other#ce93d8
constant, constant.numeric, constant.language#4db6ac
entity.name.type, support.type#64b5f6
entity.name.class#26a69a
keyword.operator#80cbc4
punctuation#90a4ae
punctuation.definition#ce93d8
entity.name.tag#26a69a
support.type.property-name.css#4db6ac
support.constant.property-value.css#e1bee7
variable.other.object#fff59d
support.type.property-name.json#ce93d8