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#00000000
  • activityBar.activeBorder#00000000
  • activityBar.background#040015
  • activityBar.border#00000000
  • activityBar.foreground#9c45ff
  • activityBar.inactiveForeground#ebd7ff66
  • activityBarBadge.background#FF00DD
  • activityBarBadge.foreground#010011
  • badge.background#2e2139
  • badge.foreground#ffdef9
  • breadcrumbPicker.background#232530
  • button.background#614D85
  • debugToolBar.background#463465
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#FF00DD35
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#0c0020
  • editor.findMatchBackground#00E5FF3D
  • editor.findMatchHighlightBackground#6F00FF45
  • editor.findRangeHighlightBackground#34294f1a
  • editor.foreground#dbd4fa
  • editor.hoverHighlightBackground#46356446
  • editor.lineHighlightBorder#7059AB66
  • editor.rangeHighlightBackground#49549539
  • editor.selectionBackground#ffffff2b
  • editor.selectionHighlightBackground#ffffff20
  • editor.wordHighlightBackground#34294f88
  • editor.wordHighlightStrongBackground#34294f88
  • editorBracketHighlight.foreground1#FF00CC73
  • editorBracketHighlight.foreground2#7520BFCE
  • editorBracketHighlight.foreground3#8269FC
  • editorBracketHighlight.foreground4#710082
  • editorBracketHighlight.foreground5#DD00FFDB
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#241b2f
  • editorCursor.foreground#FF00CC73
  • editorError.foreground#8269FC
  • editorGroup.border#6d2980
  • editorGroup.dropBackground#4954954a
  • editorGroup.emptyBackground#000019
  • editorGroupHeader.tabsBackground#08000f
  • editorGroupHeader.tabsBorder#B700FF45
  • editorGutter.addedBackground#FF00DD5F
  • editorGutter.deletedBackground#8269FC
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground1#A148AB80
  • editorIndentGuide.background1#dabdff25
  • editorLineNumber.activeForeground#FF00DD93
  • editorLineNumber.foreground#FF00DD3D
  • editorOverviewRuler.addedForeground#FF00DD
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#FF00DD99
  • editorOverviewRuler.errorForeground#FF00DDdd
  • editorOverviewRuler.findMatchForeground#00FFFFA2
  • editorOverviewRuler.modifiedForeground#b893ce99
  • editorOverviewRuler.warningForeground#FF00DD
  • editorRuler.foreground#A148AB80
  • editorSuggestWidget.highlightForeground#ff7b9c9f
  • editorSuggestWidget.selectedBackground#ff00005e
  • editorWarning.foreground#FF00DD
  • editorWidget.background#171520c3
  • editorWidget.border#ffffff22
  • editorWidget.foreground#DABDFF96
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#FF00DD
  • extensionButton.prominentBackground#ff7b9c9f
  • extensionButton.prominentHoverBackground#7A17E4
  • focusBorder#27186d
  • foreground#c89cff
  • gitDecoration.addedResourceForeground#00FFFFD2
  • gitDecoration.conflictingResourceForeground#FF00DD
  • gitDecoration.deletedResourceForeground#8300C095
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#AA00FF
  • gitDecoration.renamedResourceForeground#00FFFFD2
  • gitDecoration.stageDeletedResourceForeground#00BCBC8E
  • gitDecoration.stageModifiedResourceForeground#00FFFFD2
  • gitDecoration.untrackedResourceForeground#AA00FF
  • input.background#2a2139
  • inputOption.activeBorder#7A17E499
  • inputValidation.errorBackground#FF00DD80
  • inputValidation.errorBorder#00000000
  • list.activeSelectionBackground#340f5a
  • list.activeSelectionForeground#eaeaea
  • list.dropBackground#1f003f
  • list.errorForeground#BC008AD0
  • list.focusBackground#25064a
  • list.focusForeground#ffffffd7
  • list.highlightForeground#eeff005e
  • list.hoverBackground#180043
  • list.hoverForeground#d3d3d3
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cccccc
  • list.warningForeground#BC008AD0
  • menu.background#463465
  • minimapGutter.addedBackground#FF00DDD8
  • minimapGutter.deletedBackground#8269FC
  • minimapGutter.modifiedBackground#b893ce8f
  • panelTitle.activeBorder#FF00DD
  • panelTitle.activeForeground#00FFFFA2
  • peekView.border#495495
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#00FFFFA2
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#D1861655
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#FF00DD93
  • progressBar.background#b872f9
  • scmGraph.historyItemBaseRefColor#00FFFFA2
  • scmGraph.historyItemHoverAdditionsForeground#FF00DD
  • scmGraph.historyItemHoverDeletionsForeground#AA00FF
  • scmGraph.historyItemRefColor#FF00DD
  • scmGraph.historyItemRemoteRefColor#7520BFFE
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#9d8bca20
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#950063E0
  • sideBar.background#07071b
  • sideBar.border#6839d124
  • sideBar.foreground#8e85b0
  • sideBarSectionHeader.background#00000fe5
  • sideBarSectionHeader.border#502aa574
  • sideBarSectionHeader.foreground#9b7eeab7
  • sideBarTitle.foreground#918c9b
  • statusBar.background#00000f
  • statusBar.border#B700FF45
  • statusBar.debuggingBackground#00000f
  • statusBar.debuggingForeground#FF00DDD8
  • statusBar.foreground#aa8ef7
  • statusBar.noFolderBackground#00000f
  • statusBar.noFolderForeground#FF00DDD8
  • statusBarItem.hoverBackground#00000f
  • statusBarItem.hoverForeground#00FFFF
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • statusBarItem.remoteBackground#00000f
  • statusBarItem.remoteForeground#AA00FF
  • statusBarItem.remoteHoverForeground#FF00DD
  • tab.activeBackground#000019
  • tab.activeBorder#AA00FF
  • tab.activeBorderTop#00000000
  • tab.activeForeground#FF00DD
  • tab.border#003a40be
  • tab.hoverBackground#110021
  • tab.hoverBorder#FF00DDD8
  • tab.hoverForeground#AA00FF
  • tab.inactiveBackground#22004ba9
  • tab.inactiveForeground#dbdcffa4
  • terminal.ansiBlack#FF00DD
  • terminal.ansiBlue#AA00FF
  • terminal.ansiBrightBlack#FF00DD
  • terminal.ansiBrightBlue#AA00FF
  • terminal.ansiBrightCyan#FF00DD5F
  • terminal.ansiBrightGreen#FF00DD
  • terminal.ansiBrightMagenta#006e6e
  • terminal.ansiBrightRed#00CCCC
  • terminal.ansiBrightWhite#00FFFFA2
  • terminal.ansiBrightYellow#AA00FF
  • terminal.ansiCyan#FF00DD5F
  • terminal.ansiGreen#FF00DD
  • terminal.ansiMagenta#006e6e
  • terminal.ansiRed#00CCCC
  • terminal.ansiWhite#00FFFFA2
  • terminal.ansiYellow#AA00FF
  • terminal.foreground#FF00DDD8
  • terminal.selectionBackground#ffffff3d
  • terminalCursor.background#FF00CC73
  • terminalCursor.foreground#FF00CC73
  • textLink.activeForeground#e57eff
  • textLink.foreground#FF00DD93
  • titleBar.activeBackground#090015
  • titleBar.activeForeground#9c45ff
  • titleBar.border#0089983D
  • titleBar.inactiveBackground#15003499
  • titleBar.inactiveForeground#ffffff99
  • tree.indentGuidesStroke#5300a5d5
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator#B19AFF79
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#DABDFF96italic
string.quoted, string.template, punctuation.definition.string#bab0ffcc
string.template meta.embedded.line#b6b1b1
variable#AA00FFE2
entity.name.variable#68ff68
variable.language#FF8C00bold
variable.parameter#00FFFFA2italic
storage.modifier#710082
storage.type#AA00FFE2
storage.type.format.python#FF00DD93
constant#FF00DD93
string.regexp#eb8455
constant.numeric#DD00FFDB
constant.language#FF00DD93
constant.character.escape#FF00DDD8
entity.name#B19AFF79
entity.name.tag#b78aff
punctuation.definition.tag#8de4ff
entity.other.attribute-name#ff3bef
entity.other.attribute-name.html#77b7ffitalic
entity.name.type, meta.attribute.class.html#7A17E4
entity.other.inherited-class#FF00DD
entity.name.function, variable.function#FF00DDD8
keyword.control.export.js, keyword.control.import.js#ff3bef
constant.numeric.decimal.js#ff607b
keyword#7a53d4
keyword.control#710082
keyword.control, source.css#710082
keyword.operator#8269FC
entity.name.tag.template.html, source.vue#50bbe6
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#8269FC
keyword.other.unit#ff7b9c9f
support#00FFFFA2
support.function#00FFFFA2
support.variable#7A17E4
meta.object-literal.key, support.type.property-name#ff7ff6d3
punctuation.separator.key-value#FF00DD
punctuation.section.embedded#53d49e
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF00DD
support.type.property-name.css, support.type.property-name.json#01b7ffe6
switch-block.expr.js#FF00DD
variable.other.constant.property.js, variable.other.property.js#00FFFFA2
constant.other.color#ff7b9c9f
support.constant.font-name#ff7b9c9f
entity.other.attribute-name.id#53abd4
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#d45393
support.function.misc.css#d45353
markup.heading, entity.name.section#7A17E4
text.html, keyword.operator.assignment#DABDFF96
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#7A17E4
markup.underline.link#FF00DD
string.other.link.description#7520BFFE
meta.function-call.generic.python#FF00DDD8
variable.parameter.function-call.python#8269FC
storage.type.cs#FF00DD
entity.name.variable.local.cs#7A17E4
entity.name.variable.field.cs, entity.name.variable.property.cs#7A17E4
constant.other.placeholder.c#FF00DDitalic
keyword.control.directive.include.c, keyword.control.directive.define.c#FF00DD
storage.modifier.c#FF00DD
source.cpp keyword.operator#53d49e
constant.other.placeholder.cpp#FF00DDitalic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#FF00DD
storage.modifier.specifier.const.cpp#FF00DD
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#00FFFFA2
source.elixir entity.name.function#FF00DD
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#00FFFFA2
source.elixir punctuation.definition.string#FF00DD
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#FF00DD
source.elixir .punctuation.binary.elixir#7A17E4italic
entity.global.clojure#00FFFFA2bold
storage.control.clojure#00FFFFA2italic
meta.metadata.simple.clojure, meta.metadata.map.clojure#FF00DDitalic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#7A17E4
source.go#7A17E4
source.go meta.function-call.go#00FFFFA2
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#53d49e
source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go#FF00DD
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable#00FFFFA2
markup.underline.link.markdown, markup.inline.raw.string.markdown#FF00DDitalic
string.other.link.title.markdown#AA00FF
markup.heading.markdown, entity.name.section.markdown#7A17E4bold
markup.italic.markdown#00FFFFA2italic
markup.bold.markdown#00FFFFA2bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#FF00DD
source.dart, source.python, source.scala#B19AFF79
string.interpolated.single.dart#ff7b9c9f
variable.parameter.dart#FF00DD
constant.numeric.dart#00FFFFA2
variable.parameter.scala#00FFFFA2
meta.template.expression.scala#FF00DD