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#90caf9
  • activityBarBadge.background#81c784
  • activityBarBadge.foreground#ffffff
  • dialog.background#1a1a2e
  • dialog.border#2a2a2a
  • dialog.foreground#f8f8f2
  • dialog.shadow#000000
  • dropdown.background#1a1a2e
  • dropdown.border#2a2a2a
  • dropdown.foreground#f8f8f2
  • dropdown.listBackground#1a1a2e
  • editor.background#1a1a2e
  • editor.findMatchBackground#81c784
  • editor.findMatchHighlightBackground#a5d6a7
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#16213e
  • editor.selectionBackground#2d4a7a
  • editor.wordHighlightBackground#90caf9
  • editor.wordHighlightStrongBackground#64b5f6
  • 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#81c784
  • 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#a5d6a7
  • 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#2a2a2a
  • 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#a5d6a7
  • quickInputList.focusForeground#f8f8f2
  • quickInputList.focusHighlightBackground#90caf9
  • quickInputList.focusHighlightForeground#1a1a2e
  • quickInputList.focusIconForeground#81c784
  • 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#90caf9
  • 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
  • textInput.background#1a1a2e
  • textInput.border#2a2a2a
  • textInput.focusedBorder#e0e0e0
  • textInput.foreground#f8f8f2
  • textInput.placeholderForeground#a5d6a7
  • titleBar.activeBackground#1a1a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#90a4ae
string, string.quoted#e1bee7
keyword, storage.type, storage.modifier#64b5f6
entity.name.function, support.function#42a5f5
variable, variable.other#81c784
constant, constant.numeric, constant.language#ba68c8
entity.name.type, support.type#90caf9
entity.name.class#ffd54f
keyword.operator#ef9a9a
punctuation#90a4ae
punctuation.definition#64b5f6
entity.name.tag#42a5f5
support.type.property-name.css#81c784
support.constant.property-value.css#ba68c8
variable.other.object#ffd54f
support.type.property-name.json#64b5f6
Astraea Space Themes by Codetown - VS Code Theme