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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...