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#151515
  • activityBar.border#000000
  • activityBar.dropBackground#f9267230
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ebebeb
  • activityBarBadge.background#f92672
  • activityBarBadge.foreground#FFFFFF
  • badge.background#f92672
  • badge.foreground#FFFFFF
  • button.background#f92672
  • button.foreground#FFFFFF
  • button.hoverBackground#f9267230
  • contrastBorder#000000
  • descriptionForeground#ebebeb
  • dropdown.background#151515
  • dropdown.border#000000
  • dropdown.foreground#ebebeb
  • dropdown.listBackground#151515
  • editor.background#202020
  • editor.foreground#ffffff
  • editorGroup.border#000000
  • editorGroup.dropBackground#f9267230
  • editorGroup.emptyBackground#151515
  • editorGroup.focusedEmptyBorder#000000
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#000000
  • errorForeground#ebebeb
  • focusBorder#888888
  • foreground#ebebeb
  • input.background#202020
  • input.border#000000
  • input.foreground#ffffff
  • input.placeholderForeground#ebebeb
  • inputOption.activeBorder#888888
  • inputValidation.errorBackground#FF5370
  • inputValidation.errorBorder#888888
  • inputValidation.errorForeground#ebebeb
  • inputValidation.infoBackground#151515
  • inputValidation.infoBorder#888888
  • inputValidation.infoForeground#ebebeb
  • inputValidation.warningBackground#FFCB6B
  • inputValidation.warningBorder#888888
  • inputValidation.warningForeground#ebebeb
  • list.activeSelectionBackground#f9267280
  • list.activeSelectionForeground#ebebeb
  • list.dropBackground#f9267250
  • list.errorForeground#FF5370
  • list.focusBackground#f9267230
  • list.focusForeground#ebebeb
  • list.highlightForeground#ffffff
  • list.hoverBackground#f9267230
  • list.inactiveFocusBackground#ebebeb50
  • list.inactiveSelectionBackground#ebebeb30
  • list.inactiveSelectionForeground#ebebeb
  • list.invalidItemForeground#FF5370
  • list.warningForeground#FFCB6B
  • listFilterWidget.background#151515
  • listFilterWidget.noMatchesOutline#FFCB6B
  • listFilterWidget.outline#000000
  • panel.background#151515
  • panel.border#000000
  • panel.dropBackground#f9267230
  • progressBar.background#151515
  • scrollbar.shadow#15151550
  • scrollbarSlider.activeBackground#f9267280
  • scrollbarSlider.background#f9267220
  • scrollbarSlider.hoverBackground#f9267250
  • selection.background#ebebeb70
  • sideBar.background#151515
  • sideBar.border#000000
  • sideBar.dropBackground#f9267230
  • sideBar.foreground#ebebeb
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#151515
  • statusBar.border#000000
  • statusBar.foreground#ebebeb
  • statusBar.noFolderBackground#151515
  • statusBar.noFolderBorder#000000
  • statusBar.noFolderForeround#ebebeb
  • tab.activeBackground#202020
  • tab.activeBorder#f92672
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#151515
  • tab.unfocusedActiveBackground#202020
  • tab.unfocusedActiveBorder#f92672
  • widget.shadow#15151550

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#f92672italic
string, constant.other.symbol.ruby, constant.numeric, constant.language#a6e22e
punctuation#66d9ef
entity, support#fd971f
constant#ae81ff
comment, string.quoted.docstring#a6e22e90
ThemeDatabase All Themes by enes ozturk - VS Code Theme