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.activeBorder#7C3AED
  • activityBar.background#F4F4F5
  • activityBar.foreground#18181B
  • activityBar.inactiveForeground#52525B99
  • activityBarBadge.background#7C3AED
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7C3AED
  • badge.foreground#FFFFFF
  • button.background#7C3AED
  • button.foreground#FFFFFF
  • button.hoverBackground#8257E5
  • dropdown.background#FAFAFA
  • dropdown.foreground#18181B
  • editor.background#FFFFFF
  • editor.findMatchBackground#7C3AED55
  • editor.findMatchHighlightBackground#7C3AED2A
  • editor.foreground#18181B
  • editor.lineHighlightBackground#FAFAFA
  • editor.selectionBackground#8257E526
  • editor.selectionHighlightBackground#8257E526
  • editor.wordHighlightBackground#7C3AED22
  • editorBracketHighlight.foreground1#8257E5
  • editorBracketHighlight.foreground2#059669
  • editorBracketHighlight.foreground3#2563EB
  • editorBracketHighlight.foreground4#C026D3
  • editorBracketHighlight.foreground5#D97706
  • editorBracketHighlight.foreground6#0891B2
  • editorBracketHighlight.unexpectedBracket.foreground#EF4444
  • editorBracketMatch.background#7C3AED33
  • editorBracketMatch.border#7C3AED00
  • editorCursor.foreground#7C3AED
  • editorError.foreground#EF4444
  • editorGroupHeader.tabsBackground#F4F4F5
  • editorGutter.background#FFFFFF
  • editorHint.foreground#7C3AED
  • editorHoverWidget.background#F4F4F5
  • editorHoverWidget.border#E4E4E7
  • editorIndentGuide.activeBackground1#7C3AED66
  • editorIndentGuide.background1#E4E4E7
  • editorInfo.foreground#2563EB
  • editorLineNumber.activeForeground#7C3AED
  • editorLineNumber.foreground#52525B66
  • editorSuggestWidget.background#F4F4F5
  • editorSuggestWidget.highlightForeground#8257E5
  • editorSuggestWidget.selectedBackground#7C3AED26
  • editorWarning.foreground#F59E0B
  • editorWhitespace.foreground#E4E4E7
  • editorWidget.background#F4F4F5
  • editorWidget.border#E4E4E7
  • focusBorder#7C3AED88
  • foreground#18181B
  • gitDecoration.addedResourceForeground#059669
  • gitDecoration.deletedResourceForeground#EF4444
  • gitDecoration.modifiedResourceForeground#D97706
  • gitDecoration.untrackedResourceForeground#0891B2
  • input.background#FAFAFA
  • input.border#E4E4E7
  • input.foreground#18181B
  • inputOption.activeBorder#7C3AED
  • list.activeSelectionBackground#7C3AED26
  • list.activeSelectionForeground#18181B
  • list.highlightForeground#8257E5
  • list.hoverBackground#FAFAFA
  • list.inactiveSelectionBackground#FAFAFA
  • minimap.selectionHighlight#7C3AED
  • notificationCenterHeader.background#F4F4F5
  • notifications.background#F4F4F5
  • panel.background#F4F4F5
  • panel.border#E4E4E7
  • panelTitle.activeBorder#7C3AED
  • panelTitle.activeForeground#18181B
  • peekViewEditor.background#FAFAFA
  • progressBar.background#7C3AED
  • scrollbarSlider.activeBackground#7C3AED66
  • scrollbarSlider.background#52525B22
  • scrollbarSlider.hoverBackground#52525B44
  • selection.background#8257E526
  • sideBar.background#F4F4F5
  • sideBar.foreground#52525B
  • sideBarSectionHeader.background#F4F4F5
  • sideBarSectionHeader.foreground#18181B
  • sideBarTitle.foreground#18181B
  • statusBar.background#F4F4F5
  • statusBar.debuggingBackground#7C3AED
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#52525B
  • statusBar.noFolderBackground#F4F4F5
  • statusBarItem.remoteBackground#7C3AED
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#7C3AED00
  • tab.activeBorderTop#7C3AED
  • tab.activeForeground#18181B
  • tab.border#F4F4F5
  • tab.inactiveBackground#F4F4F5
  • tab.inactiveForeground#52525B
  • terminal.ansiBlue#2563EB
  • terminal.ansiBrightBlue#2563EB
  • terminal.ansiBrightGreen#059669
  • terminal.ansiBrightMagenta#C026D3
  • terminal.ansiCyan#0891B2
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#C026D3
  • terminal.ansiRed#EF4444
  • terminal.ansiYellow#D97706
  • terminal.background#F4F4F5
  • terminal.foreground#18181B
  • terminalCursor.foreground#7C3AED
  • textLink.activeForeground#7C3AED
  • textLink.foreground#8257E5
  • titleBar.activeBackground#F4F4F5
  • titleBar.activeForeground#18181B
  • titleBar.inactiveBackground#F4F4F5
  • titleBar.inactiveForeground#52525B
  • tree.indentGuidesStroke#E4E4E7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94A3B8italic
string#059669—
string.quoted.docstring, string.quoted.multi.python#94A3B8italic
constant.numeric, constant.numeric.python#C026D3—
constant.language, constant.language.python#C026D3—
constant.character, constant.other#C026D3—
keyword, keyword.control, keyword.control.flow.python, keyword.control.import.python#7C3AEDbold
keyword.operator, keyword.operator.logical.python, keyword.operator.python#7C3AED—
storage, storage.type, storage.type.function.python, storage.type.class.python, storage.modifier#7C3AEDitalic
entity.name.function, meta.function-call.python, support.function, support.function.builtin.python#2563EB—
entity.name.class, entity.name.type, entity.name.type.class.python, support.type, support.class#0891B2bold
support.type.python, meta.function.parameters.python support.type#0891B2—
variable, variable.other, meta.variable.python#18181B—
variable.parameter, variable.parameter.function-call.python#5B21B6italic
variable.language.special.self.python, variable.language.special.cls.python, variable.language#D97706italic
meta.decorator, entity.name.function.decorator.python, punctuation.definition.decorator.python#D97706—
meta.import, keyword.control.import#7C3AED—
entity.name.namespace, support.module#0891B2—
punctuation, punctuation.separator, punctuation.definition#52525B—
meta.string.regexp, string.regexp#D97706—
meta.fstring.python, string.interpolated.python#059669—
constant.character.format.placeholder, meta.interpolation.python#8257E5bold
meta.typehint.python, meta.function.return-type.python#0891B2italic
markup.heading, entity.name.section#8257E5bold
markup.bold#18181Bbold
markup.italic#18181Bitalic
markup.inline.raw, markup.fenced_code#059669—
support.type.property-name.json#2563EB—
invalid, invalid.illegal#EF4444—