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.activeBackground#575AFD20
  • activityBar.activeBorder#575AFD
  • activityBar.background#151821
  • activityBar.foreground#E1E2E4
  • activityBar.inactiveForeground#71757D
  • activityBarBadge.background#575AFD
  • activityBarBadge.foreground#FFFFFF
  • badge.background#575AFD
  • badge.foreground#FFFFFF
  • button.background#575AFD
  • button.foreground#FFFFFF
  • button.hoverBackground#6C6EFD
  • button.secondaryBackground#1E2233
  • button.secondaryForeground#E1E2E4
  • button.secondaryHoverBackground#2A2F42
  • dropdown.background#151821
  • dropdown.border#1E2233
  • dropdown.listBackground#151821
  • editor.background#151821
  • editor.findMatchBackground#575AFD40
  • editor.findMatchHighlightBackground#575AFD20
  • editor.foreground#E1E2E4
  • editor.lineHighlightBackground#1E223320
  • editor.lineHighlightBorder#1E223330
  • editor.selectionBackground#575AFD40
  • editor.selectionHighlightBackground#575AFD20
  • editorBracketMatch.background#575AFD20
  • editorBracketMatch.border#575AFD
  • editorCursor.foreground#575AFD
  • editorGroup.border#1E2233
  • editorGroup.dropBackground#575AFD20
  • editorGroupHeader.border#1E2233
  • editorGroupHeader.noTabsBackground#151821
  • editorGroupHeader.tabsBackground#0D0F16
  • editorLineNumber.activeForeground#A0A3A8
  • editorLineNumber.foreground#71757D
  • editorSuggestWidget.background#151821
  • editorSuggestWidget.border#1E2233
  • editorSuggestWidget.highlightForeground#575AFD
  • editorSuggestWidget.selectedBackground#575AFD40
  • editorWidget.background#0D0F16
  • editorWidget.border#1E2233
  • extensionButton.prominentBackground#575AFD
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#6C6EFD
  • focusBorder#575AFD
  • foreground#E1E2E4
  • input.background#151821
  • input.border#1E2233
  • input.foreground#E1E2E4
  • input.placeholderForeground#71757D
  • inputOption.activeBackground#575AFD30
  • inputOption.activeBorder#575AFD
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#575AFD40
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#575AFD
  • list.hoverBackground#575AFD20
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#575AFD30
  • list.inactiveSelectionForeground#FFFFFF
  • menu.background#151821
  • menu.foreground#E1E2E4
  • menu.selectionBackground#575AFD40
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#1E2233
  • notificationLink.foreground#575AFD
  • notifications.background#151821
  • notifications.border#1E2233
  • panel.background#0D0F16
  • panel.border#1E2233
  • panelTitle.activeBorder#575AFD
  • panelTitle.activeForeground#E1E2E4
  • panelTitle.inactiveForeground#71757D
  • peekView.border#575AFD
  • peekViewEditor.background#0D0F16
  • peekViewResult.background#0D0F16
  • peekViewResult.selectionBackground#575AFD40
  • peekViewTitle.background#0D0F16
  • progressBar.background#575AFD
  • selection.background#575AFD40
  • sideBar.background#0D0F16
  • sideBar.border#1E2233
  • sideBar.foreground#E1E2E4
  • sideBarSectionHeader.background#0D0F16
  • sideBarSectionHeader.border#1E2233
  • sideBarSectionHeader.foreground#E1E2E4
  • sideBarTitle.foreground#E1E2E4
  • statusBar.background#0D0F16
  • statusBar.border#1E2233
  • statusBar.debuggingBackground#575AFD
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E1E2E4
  • statusBar.noFolderBackground#0D0F16
  • tab.activeBackground#151821
  • tab.activeBorder#575AFD
  • tab.activeForeground#E1E2E4
  • tab.activeModifiedBorder#575AFD
  • tab.hoverBackground#151821
  • tab.hoverBorder#575AFD80
  • tab.inactiveBackground#0D0F16
  • tab.inactiveForeground#71757D
  • titleBar.activeBackground#0D0F16
  • titleBar.activeForeground#E1E2E4
  • titleBar.border#1E2233
  • titleBar.inactiveBackground#0D0F16
  • titleBar.inactiveForeground#71757D
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#71757Ditalic
string, string.quoted, string.template#86EFAC—
string.regexp#FDBA74—
constant.numeric, constant.language, constant.character, constant.other#F5D0FE—
constant.language.boolean#D8B4FEbold
keyword, storage.type, storage.modifier#A5B4FCbold
keyword.operator, keyword.operator.new#FCA5A5—
keyword.control.flow, keyword.control.return, keyword.control.conditional#D8B4FEbold
entity.name.function, support.function, meta.function-call#93C5FDbold
variable, variable.other#E1E2E4—
variable.language, variable.parameter#FDBA74italic
entity.name.type, support.type#D8B4FE—
entity.name.class, support.class#93C5FDbold
entity.name.namespace, entity.name.module#D8B4FEbold
punctuation.definition, punctuation.separator, punctuation.terminator#94A3B8—
punctuation.bracket, meta.bracket#CBD5E1—
entity.name.tag, punctuation.definition.tag#A5B4FC—
entity.other.attribute-name#FDBA74—
markup.heading#93C5FDbold
markup.inline.raw, markup.fenced_code#86EFAC—
markup.bold#E1E2E4bold
markup.italic#E1E2E4italic
markup.list#FDBA74—
markup.link#A5B4FC—
support.constant.property-value#86EFAC—
meta.object-literal.key, variable.object.property#FCA5A5—
meta.decorator, meta.decorator variable.function#F5D0FEitalic