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.background#171520
  • activityBar.dropBackground#34294f66
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#8a2dc0
  • activityBarBadge.foreground#2a2139
  • badge.background#2a2139
  • badge.foreground#ffffff
  • breadcrumbPicker.background#232530
  • button.background#2a2139
  • debugToolBar.background#241b2f
  • diffEditor.insertedTextBackground#0beb9916
  • diffEditor.removedTextBackground#8a2dc016
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#262335
  • editor.findMatchBackground#34294f59
  • editor.findMatchHighlightBackground#34294f33
  • editor.findRangeHighlightBackground#34294f1a
  • editor.hoverHighlightBackground#34294f4d
  • editor.lineHighlightBackground#34294f66
  • editor.rangeHighlightBackground#49549539
  • editor.selectionBackground#46346588
  • editor.selectionHighlightBackground#34294f59
  • editor.wordHighlightBackground#34294f88
  • editor.wordHighlightStrongBackground#34294f88
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffffcc
  • editorCursor.background#241b2f
  • editorCursor.foreground#8a2dc0
  • editorError.foreground#8a2dc0
  • editorGroup.border#495495
  • editorGroup.dropBackground#34294f4a
  • editorGroupHeader.tabsBackground#241b2f
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#495495af
  • editorIndentGuide.activeBackground#2a2139
  • editorIndentGuide.background#49549539
  • editorLineNumber.activeForeground#ffffff73
  • editorLineNumber.foreground#ffffff10
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#8a2dc099
  • editorOverviewRuler.errorForeground#8a2dc0dd
  • editorOverviewRuler.findMatchForeground#34294f
  • editorOverviewRuler.modifiedForeground#49549599
  • editorOverviewRuler.warningForeground#8a2dc0cc
  • editorRuler.foreground#34294f33
  • editorSuggestWidget.highlightForeground#8a2dc0
  • editorWarning.foreground#8a2dc0cc
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#8a2dc0
  • extensionButton.prominentBackground#8a2dc0
  • extensionButton.prominentHoverBackground#61e2ff
  • focusBorder#1f212b
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#8a2dc0cc
  • gitDecoration.deletedResourceForeground#8a2dc0
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#b893ceee
  • gitDecoration.untrackedResourceForeground#8a2dc0
  • input.background#2a2139
  • inputOption.activeBorder#61e2ff99
  • inputValidation.errorBackground#8a2dc080
  • inputValidation.errorBorder#8a2dc000
  • list.activeSelectionBackground#2a213980
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#34294f66
  • list.errorForeground#8a2dc0E6
  • list.focusBackground#2a213999
  • list.focusForeground#ffffff
  • list.highlightForeground#8a2dc0
  • list.hoverBackground#2a213999
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2a213999
  • list.inactiveSelectionBackground#34294f66
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#8a2dc0bb
  • panelTitle.activeBorder#8a2dc0
  • peekView.border#495495
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#34294f59
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#34294f59
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#8a2dc0ea
  • progressBar.background#8a2dc0
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#34294f88
  • scrollbarSlider.background#34294f1a
  • scrollbarSlider.hoverBackground#34294f59
  • selection.background#34294f59
  • sideBar.background#241b2f
  • sideBar.dropBackground#34294f4c
  • sideBar.foreground#ffffff99
  • sideBarSectionHeader.background#241b2f
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#241b2f
  • statusBar.debuggingBackground#8a2dc0
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#241b2f
  • statusBarItem.hoverBackground#2a2139
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • tab.activeBorder#880088
  • tab.border#241b2f00
  • tab.inactiveBackground#262335
  • terminal.ansiBlue#03edf9
  • terminal.ansiBrightBlue#03edf9
  • terminal.ansiBrightCyan#03edf9
  • terminal.ansiBrightGreen#8a2dc0
  • terminal.ansiBrightMagenta#61e2ff
  • terminal.ansiBrightRed#8a2dc0
  • terminal.ansiBrightYellow#f92aad
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#8a2dc0
  • terminal.ansiMagenta#61e2ff
  • terminal.ansiRed#8a2dc0
  • terminal.ansiYellow#8a2dc0
  • terminal.foreground#ffffff
  • terminal.selectionBackground#34294f4d
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#61e2ff
  • textLink.foreground#8a2dc0
  • titleBar.activeBackground#241b2f
  • titleBar.inactiveBackground#241b2f
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#495495italic
string.quoted, string.template, punctuation.definition.string#8a2dc0
string.template meta.embedded.line#b6b1b1
variable, entity.name.variable#61e2ff
variable.language#8a2dc0bold
variable.parameteritalic
storage.type, storage.modifier#f92aad
constant#8a2dc0
string.regexp#8a2dc0
constant.numeric#8a2dc0
constant.language#8a2dc0
constant.character.escape#36f9f6
entity.name#8a2dc0
entity.name.tag#ffcc00
punctuation.definition.tag#36f9f6
entity.other.attribute-name#f92aad
entity.other.attribute-name.html#f92aaditalic
entity.name.type, meta.attribute.class.html#8a2dc0
entity.other.inherited-class#fc199a
entity.name.function, variable.function#36f9f6
keyword.control.export.js, keyword.control.import.js#8a2dc0
keyword#f92aad
keyword.control#f92aad
keyword.operator#f92aad
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#f92aad
keyword.other.unit#8a2dc0
support#8a2dc0
support.function#36f9f6
support.variable#61e2ff
meta.object-literal.key, support.type.property-name#61e2ff
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#f92aad
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8a2dc0
support.type.property-name.css, support.type.property-name.json#fc199a
switch-block.expr.js#8a2dc0
constant.other.color#8a2dc0
support.constant.font-name#8a2dc0
entity.other.attribute-name.id#36f9f6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#fc199a
support.function.misc.css#8a2dc0
markup.heading, entity.name.section#61e2ff
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#61e2ff
markup.underline.link#fc199a
string.other.link.description#8a2dc0
meta.function-call.generic.python#36f9f6
storage.type.cs#8a2dc0
entity.name.variable.local.cs#61e2ff
entity.name.variable.field.cs, entity.name.variable.property.cs#61e2ff
source.cpp keyword.operator#f92aad
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#36f9f6
source.elixir entity.name.function#8a2dc0
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#36f9f6
source.elixir punctuation.definition.string#8a2dc0
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#8a2dc0
source.elixir .punctuation.binary.elixir#61e2ffitalic
support.type.property-name.json.arm-template#f92aad
support.type.parameters.parameter-name.tle.arm-template, variable.language.variables.variable-name.tle.arm-template, entity.name.tag.usernamespace.tle.arm-template, entity.name.tag.userfunction.tle.arm-template#61e2ffffbold
variable.language.variables.tle.arm-template, support.type.parameters.tle.arm-template#36f9f6ff