Skip to main content
CodingTheme

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#0059FF
  • activityBar.dropBackground#0059FF
  • activityBar.foreground#fff
  • activityBarBadge.background#333A
  • activityBarBadge.foreground#FFF
  • badge.background#222222
  • badge.foreground#fff
  • button.background#FE0066
  • button.foreground#fff
  • button.hoverBackground#BE004C
  • dropdown.background#222
  • dropdown.foreground#fff
  • editor.background#111
  • editor.foreground#fff
  • editor.hoverHighlightBackground#111
  • editor.inactiveSelectionBackground#222
  • editor.lineHighlightBackground#111
  • editor.lineHighlightBorder#111
  • editor.selectionBackground#000
  • editor.selectionForeground#fff
  • editor.selectionHighlightBackground#000
  • editor.wordHighlightBackground#111
  • editor.wordHighlightStrongBackground#111
  • editorGroupHeader.tabsBackground#222
  • editorGutter.modifiedBackground#6EB800
  • editorHoverWidget.background#222
  • editorHoverWidget.border#EEEEEE
  • editorInfo.foreground#fff
  • editorLink.activeForeground#0051E8
  • editorOverviewRuler.modifiedForeground#6EB800
  • editorSuggestWidget.foreground#fff
  • editorSuggestWidget.selectedBackground#222
  • editorWidget.background#111
  • foreground#BBB
  • gitDecoration.modifiedResourceForeground#6EB800
  • input.background#111
  • input.border#222
  • input.foreground#fff
  • input.placeholderForeground#AAAAAA
  • list.activeSelectionBackground#000
  • list.activeSelectionForeground#fff
  • list.focusBackground#000
  • list.focusForeground#fff
  • list.highlightForeground#fff
  • list.hoverBackground#000
  • list.hoverForeground#fff
  • list.inactiveFocusBackground#000
  • list.inactiveFocusForeground#fff
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#fff
  • panel.background#111
  • panel.dropBackground#111
  • panelTitle.activeBorder#0059FF
  • panelTitle.activeForeground#0059FF
  • panelTitle.inactiveForeground#BBB
  • scrollbar.shadow#000
  • selection.background#000
  • sideBar.background#111
  • sideBar.border#222
  • sideBar.dropBackground#EEEEEE
  • sideBar.foreground#BBB
  • sideBarSectionHeader.background#111
  • sideBarSectionHeader.foreground#BBB
  • sideBarTitle.foreground#fff
  • statusBar.background#0051E8
  • statusBar.foreground#FFF
  • tab.activeBackground#111
  • tab.activeForeground#fff
  • tab.border#222
  • tab.inactiveBackground#222
  • tab.inactiveForeground#fff8
  • terminal.background#111
  • terminal.foreground#BBB
  • terminal.selectionBackground#111
  • terminalCursor.foreground#EEEEEE
  • textLink.foreground#0051E8
  • titleBar.activeBackground#111
  • titleBar.inactiveBackground#222
  • welcomePage.buttonBackground#222222
  • welcomePage.buttonHoverBackground#333
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fff
comment#777
string#6EB800
constant.numeric#FE0066bold
constant.language#6EB800
constant.character, constant.other#6EB800
variable#fff
keyword#0051E8italic
storage#0051E8italic
storage.type#0051E8italic
entity.name.class#fffbold
entity.other.inherited-class#0059FFbold
entity.name.function#fffbold
variable.parameter#0059FF
entity.name.tag#FE0066bold
meta.tag#fff
meta.block#FFF
entity.other.attribute-name#bbb
support.function#FE0066
support.constant#FE0066
support.type, support.class#0051E8bold
support.other.variable
invalid#888888
invalid.deprecated#888888
entity.namebold
entity.name.type#0059FFbold
entity.name.function#FE0066bold
entity.name.method#FE0066
keyword.operator#FE0066bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...