Skip to main content
Coding Theme

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#DABDFF96
  • 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#2C0042
  • terminal.ansiBlue#FF00DD
  • terminal.ansiBrightBlack#2C0042
  • terminal.ansiBrightBlue#FF00DD
  • terminal.ansiBrightCyan#FF00DD5F
  • terminal.ansiBrightGreen#FF00DD
  • terminal.ansiBrightMagenta#00CCCC
  • terminal.ansiBrightRed#AA00FF
  • terminal.ansiBrightWhite#AA00FF
  • terminal.ansiBrightYellow#FF00DD
  • terminal.ansiCyan#FF00DD5F
  • terminal.ansiGreen#FF00DD
  • terminal.ansiMagenta#00CCCC
  • terminal.ansiRed#AA00FF
  • terminal.ansiWhite#AA00FF
  • terminal.ansiYellow#FF00DD
  • terminal.foreground#D800BB
  • 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
Fifty Shades of Grape by Chen Yefet - VS Code Theme