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#100049
  • activityBar.background#040015
  • activityBar.border#9700ff00
  • activityBar.foreground#9c45ff
  • activityBar.inactiveForeground#ebd7ff66
  • activityBarBadge.background#24cdc5
  • activityBarBadge.foreground#010011
  • badge.background#2e2139
  • badge.foreground#ffdef9
  • breadcrumbPicker.background#232530
  • button.background#614D85
  • debugToolBar.background#463465
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#fe445035
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#0c0020
  • editor.findMatchBackground#D18616bb
  • editor.findMatchHighlightBackground#D1861655
  • editor.findRangeHighlightBackground#34294f1a
  • editor.foreground#dbd4fa
  • editor.hoverHighlightBackground#46356446
  • editor.lineHighlightBorder#7059AB66
  • editor.rangeHighlightBackground#49549539
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#ffffff20
  • editor.wordHighlightBackground#34294f88
  • editor.wordHighlightStrongBackground#34294f88
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#241b2f
  • editorCursor.foreground#f97e72
  • editorError.foreground#fe4450
  • editorGroup.border#6d2980
  • editorGroup.dropBackground#4954954a
  • editorGroup.emptyBackground#000019
  • editorGroupHeader.tabsBackground#08000f
  • editorGroupHeader.tabsBorder#363b00
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground1#A148AB80
  • editorIndentGuide.background1#444251
  • editorLineNumber.activeForeground#ffffffcc
  • editorLineNumber.foreground#ffffff73
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#fe445099
  • editorOverviewRuler.errorForeground#fe4450dd
  • editorOverviewRuler.findMatchForeground#D1861699
  • editorOverviewRuler.modifiedForeground#b893ce99
  • editorOverviewRuler.warningForeground#72f1b8cc
  • editorRuler.foreground#A148AB80
  • editorSuggestWidget.highlightForeground#f97e72
  • editorSuggestWidget.selectedBackground#ff00005e
  • editorWarning.foreground#72f1b8cc
  • editorWidget.background#171520DC
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#fe4450
  • extensionButton.prominentBackground#f97e72
  • extensionButton.prominentHoverBackground#ff7edb
  • focusBorder#27186d
  • foreground#c89cff
  • gitDecoration.addedResourceForeground#72f1b8cc
  • gitDecoration.deletedResourceForeground#fe4450
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#b893ceee
  • gitDecoration.untrackedResourceForeground#72f1b8
  • input.background#2a2139
  • inputOption.activeBorder#ff7edb99
  • inputValidation.errorBackground#fe445080
  • inputValidation.errorBorder#fe445000
  • list.activeSelectionBackground#340f5a
  • list.activeSelectionForeground#eaeaea
  • list.dropBackground#1f003f
  • list.focusBackground#25064a
  • list.focusForeground#ffffffd7
  • list.highlightForeground#eeff005e
  • list.hoverBackground#180043
  • list.hoverForeground#d3d3d3
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cccccc
  • list.warningForeground#72f1b8bb
  • menu.background#463465
  • minimapGutter.addedBackground#09f7a099
  • minimapGutter.deletedBackground#fe4450
  • minimapGutter.modifiedBackground#b893ce
  • panelTitle.activeBorder#f97e72
  • peekView.border#495495
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#D18616bb
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#D1861655
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#f97e72ea
  • progressBar.background#b872f9
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#9d8bca20
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#9950cb
  • 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#490780
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#aa8ef7
  • statusBar.noFolderBackground#561316
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#6839d1
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • statusBarItem.remoteBackground#35ffec
  • statusBarItem.remoteForeground#010004
  • tab.activeBackground#000019
  • tab.activeBorder#d1474700
  • tab.activeBorderTop#f7a91900
  • tab.activeForeground#ffffff
  • tab.border#71006a
  • tab.hoverBackground#110021
  • tab.hoverBorder#9f3dc2
  • tab.hoverForeground#f2f2f2
  • tab.inactiveBackground#22004ba9
  • tab.inactiveForeground#dbdcffa4
  • terminal.ansiBlue#2544ce
  • terminal.ansiBrightBlue#039ff9
  • terminal.ansiBrightCyan#66f7ff
  • terminal.ansiBrightGreen#72f1b8d8
  • terminal.ansiBrightMagenta#ff7edb
  • terminal.ansiBrightRed#fe4450
  • terminal.ansiBrightYellow#53d49e
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#72f1b8
  • terminal.ansiMagenta#ff7edb
  • terminal.ansiRed#fd2836d5
  • terminal.ansiYellow#f9f072
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff3d
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#e57eff
  • textLink.foreground#f97e72
  • titleBar.activeBackground#090015
  • titleBar.activeForeground#b8a7cd
  • titleBar.border#541ec8
  • 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
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#ffece3d0
string.template meta.embedded.line#b6b1b1
variable#c368ff
entity.name.variable#68ff68
variable.language#FF8C00bold
variable.parameteritalic
storage.type, storage.modifier#e5d2ff
constant#f97e72
string.regexp#eb8455
constant.numeric#ff7164
constant.language#ff7164
constant.character.escape#36f9f6
entity.name#4870df
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#fe4450
entity.other.inherited-class#D50
entity.name.function, variable.function#57dae4
keyword.control.export.js, keyword.control.import.js#ff3bef
constant.numeric.decimal.js#ff607b
keyword#7a53d4
keyword.control#ff57f7
keyword.control, source.css#ff57f7
keyword.operator#53d5d4
entity.name.tag.template.html, source.vue#50bbe6
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#48ffb3
keyword.other.unit#f97e72
support#d4a753
support.function#36f9f6
support.variable#ff7edb
meta.object-literal.key, support.type.property-name#7ab1f8
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#53d49e
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#72f1b8
support.type.property-name.css, support.type.property-name.json#8ba6ff
switch-block.expr.js#72f1b8
variable.other.constant.property.js, variable.other.property.js#2ee2fa
constant.other.color#f97e72
support.constant.font-name#f97e72
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#ff7edb
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#ff7edb
markup.underline.link#D50
string.other.link.description#f97e72
meta.function-call.generic.python#36f9f6
variable.parameter.function-call.python#72f1b8
storage.type.cs#fe4450
entity.name.variable.local.cs#ff7edb
entity.name.variable.field.cs, entity.name.variable.property.cs#ff7edb
constant.other.placeholder.c#72f1b8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72f1b8
storage.modifier.c#fe4450
source.cpp keyword.operator#53d49e
constant.other.placeholder.cpp#72f1b8italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#72f1b8
storage.modifier.specifier.const.cpp#fe4450
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#36f9f6
source.elixir entity.name.function#72f1b8
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#36f9f6
source.elixir punctuation.definition.string#72f1b8
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#72f1b8
source.elixir .punctuation.binary.elixir#ff7edbitalic
entity.global.clojure#36f9f6bold
storage.control.clojure#36f9f6italic
meta.metadata.simple.clojure, meta.metadata.map.clojure#fe4450italic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#ff7edbff
source.go#ff7edbff
source.go meta.function-call.go#36f9f6
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#72f1b8
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable#2EE2FA
markup.underline.link.markdown, markup.inline.raw.string.markdown#72f1b8italic
string.other.link.title.markdown#53d49e
markup.heading.markdown, entity.name.section.markdown#ff7edbbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72f1b8
source.dart, source.python, source.scala#ff7edbff
string.interpolated.single.dart#f97e72
variable.parameter.dart#72f1b8
constant.numeric.dart#2EE2FA
variable.parameter.scala#2EE2FA
meta.template.expression.scala#72f1b8