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#1F2023
  • 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#2F3137
  • button.secondaryForeground#E1E2E4
  • button.secondaryHoverBackground#3F4147
  • dropdown.background#1F2023
  • dropdown.border#2F3137
  • dropdown.listBackground#1F2023
  • editor.background#1F2023
  • editor.findMatchBackground#575AFD40
  • editor.findMatchHighlightBackground#575AFD20
  • editor.foreground#E1E2E4
  • editor.lineHighlightBackground#2F313720
  • editor.lineHighlightBorder#2F313730
  • editor.selectionBackground#575AFD40
  • editor.selectionHighlightBackground#575AFD20
  • editorBracketMatch.background#575AFD20
  • editorBracketMatch.border#575AFD
  • editorCursor.foreground#575AFD
  • editorGroup.border#2F3137
  • editorGroup.dropBackground#575AFD20
  • editorGroupHeader.border#2F3137
  • editorGroupHeader.noTabsBackground#1F2023
  • editorGroupHeader.tabsBackground#17181B
  • editorLineNumber.activeForeground#A0A3A8
  • editorLineNumber.foreground#71757D
  • editorSuggestWidget.background#1F2023
  • editorSuggestWidget.border#2F3137
  • editorSuggestWidget.highlightForeground#575AFD
  • editorSuggestWidget.selectedBackground#575AFD40
  • editorWidget.background#17181B
  • editorWidget.border#2F3137
  • extensionButton.prominentBackground#575AFD
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#6C6EFD
  • focusBorder#575AFD
  • foreground#E1E2E4
  • input.background#1F2023
  • input.border#2F3137
  • 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#1F2023
  • menu.foreground#E1E2E4
  • menu.selectionBackground#575AFD40
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2F3137
  • notificationLink.foreground#575AFD
  • notifications.background#1F2023
  • notifications.border#2F3137
  • panel.background#17181B
  • panel.border#2F3137
  • panelTitle.activeBorder#575AFD
  • panelTitle.activeForeground#E1E2E4
  • panelTitle.inactiveForeground#71757D
  • peekView.border#575AFD
  • peekViewEditor.background#17181B
  • peekViewResult.background#17181B
  • peekViewResult.selectionBackground#575AFD40
  • peekViewTitle.background#17181B
  • progressBar.background#575AFD
  • selection.background#575AFD40
  • sideBar.background#17181B
  • sideBar.border#2F3137
  • sideBar.foreground#E1E2E4
  • sideBarSectionHeader.background#17181B
  • sideBarSectionHeader.border#2F3137
  • sideBarSectionHeader.foreground#E1E2E4
  • sideBarTitle.foreground#E1E2E4
  • statusBar.background#17181B
  • statusBar.border#2F3137
  • statusBar.debuggingBackground#575AFD
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E1E2E4
  • statusBar.noFolderBackground#17181B
  • tab.activeBackground#1F2023
  • tab.activeBorder#575AFD
  • tab.activeForeground#E1E2E4
  • tab.activeModifiedBorder#575AFD
  • tab.hoverBackground#1F2023
  • tab.hoverBorder#575AFD80
  • tab.inactiveBackground#17181B
  • tab.inactiveForeground#71757D
  • titleBar.activeBackground#17181B
  • titleBar.activeForeground#E1E2E4
  • titleBar.border#2F3137
  • titleBar.inactiveBackground#17181B
  • titleBar.inactiveForeground#71757D
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#71757Ditalic
string, string.quoted, string.template#4ADE80—
string.regexp#FB923C—
constant.numeric, constant.language, constant.character, constant.other#F0ABFC—
constant.language.boolean#C084FCbold
keyword, storage.type, storage.modifier#818CF8bold
keyword.operator, keyword.operator.new#FCA5A5—
keyword.control.flow, keyword.control.return, keyword.control.conditional#C084FCbold
entity.name.function, support.function, meta.function-call#60A5FAbold
variable, variable.other#E1E2E4—
variable.language, variable.parameter#FB923Citalic
entity.name.type, support.type#C084FC—
entity.name.class, support.class#60A5FAbold
entity.name.namespace, entity.name.module#C084FCbold
punctuation.definition, punctuation.separator, punctuation.terminator#94A3B8—
punctuation.bracket, meta.bracket#CBD5E1—
entity.name.tag, punctuation.definition.tag#818CF8—
entity.other.attribute-name#FB923C—
markup.heading#60A5FAbold
markup.inline.raw, markup.fenced_code#4ADE80—
markup.bold#E1E2E4bold
markup.italic#E1E2E4italic
markup.list#FB923C—
markup.link#818CF8—
support.constant.property-value#4ADE80—
meta.object-literal.key, variable.object.property#FCA5A5—
meta.decorator, meta.decorator variable.function#F0ABFCitalic