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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#333333
comment#AAAAAA
string#6EB800
constant.numeric#FE0066bold
constant.language#6EB800
constant.character, constant.other#6EB800
variable#000
keyword#0051E8italic
storage#0051E8italic
storage.type#0051E8italic
entity.name.class#000bold
entity.other.inherited-class#0059FFbold
entity.name.function#333333bold
variable.parameter#0059FF
entity.name.tag#FE0066bold
meta.tag#000
entity.other.attribute-name#555555
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...

Myriatek-Scheme by Aditya Purwa - VS Code Theme