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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A3A8italic
string, string.quoted, string.template#16A34A—
string.regexp#EA580C—
constant.numeric, constant.language, constant.character, constant.other#D946EF—
constant.language.boolean#9333EAbold
keyword, storage.type, storage.modifier#575AFDbold
keyword.operator, keyword.operator.new#DC2626—
keyword.control.flow, keyword.control.return, keyword.control.conditional#9333EAbold
entity.name.function, support.function, meta.function-call#2563EBbold
variable, variable.other#2F3137—
variable.language, variable.parameter#EA580Citalic
entity.name.type, support.type#9333EA—
entity.name.class, support.class#2563EBbold
entity.name.namespace, entity.name.module#9333EAbold
punctuation.definition, punctuation.separator, punctuation.terminator#64748B—
punctuation.bracket, meta.bracket#475569—
entity.name.tag, punctuation.definition.tag#575AFD—
entity.other.attribute-name#EA580C—
markup.heading#2563EBbold
markup.inline.raw, markup.fenced_code#16A34A—
markup.bold#2F3137bold
markup.italic#2F3137italic
markup.list#EA580C—
markup.link#575AFD—
support.constant.property-value#16A34A—
meta.object-literal.key, variable.object.property#DC2626—
meta.decorator, meta.decorator variable.function#D946EFitalic