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#a762a740
  • activityBar.activeBorder#f08df080
  • activityBar.background#18173E
  • activityBar.border#a762a740
  • activityBar.dropBackground#f08df080
  • activityBar.foreground#f08df080
  • activityBar.inactiveForeground#a762a780
  • activityBarBadge.background#f08df080
  • activityBarBadge.foreground#ffffff
  • badge.background#E84B3C
  • badge.foreground#ffffff
  • breadcrumbPicker.background#232530
  • button.background#E84B3C
  • button.foreground#ffffff
  • checkbox.background#E84B3C
  • debugToolBar.background#18173E
  • diffEditor.insertedTextBackground#0beb9916
  • diffEditor.removedTextBackground#fa677116
  • editor.background#18173E
  • editor.findMatchBackground#f08df040
  • editor.findMatchHighlightBackground#E84B3C20
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#E84B3C20
  • editor.inactiveSelectionBackground#E84B3C50
  • editor.lineHighlightBackground#34294f66
  • editor.rangeHighlightBackground#f08df080
  • editor.selectionBackground#ffffff36
  • editor.selectionHighlightBackground#f08df020
  • editor.selectionHighlightBorder#f08df020
  • editor.wordHighlightBackground#E84B3C50
  • editor.wordHighlightStrongBackground#E84B3C50
  • editorBracketMatch.background#f08df080
  • editorBracketMatch.border#f08df080
  • editorCursor.foreground#E84B3C
  • editorError.foreground#fa6771
  • editorGroup.border#a762a740
  • editorGroup.dropBackground#f08df080
  • editorGroup.focusedEmptyBorder#f08df0
  • editorGroupHeader.tabsBackground#230a35
  • editorGroupHeader.tabsBorder#a762a740
  • editorGutter.addedBackground#26FF8F80
  • editorGutter.deletedBackground#fa6771
  • editorGutter.modifiedBackground#fa9818
  • editorIndentGuide.activeBackground#2a2139
  • editorIndentGuide.background#49549539
  • editorLineNumber.foreground#a762a780
  • editorLink.activeForeground#E84B3C
  • editorOverviewRuler.addedForeground#26FF8F
  • editorOverviewRuler.border#a762a740
  • editorOverviewRuler.bracketMatchForeground#f08df0
  • editorOverviewRuler.deletedForeground#fa677180
  • editorOverviewRuler.errorForeground#fa6771
  • editorOverviewRuler.findMatchForeground#34294f
  • editorOverviewRuler.infoForeground#00BBFF
  • editorOverviewRuler.modifiedForeground#fa981880
  • editorOverviewRuler.warningForeground#fa9818
  • editorPane.background#E84B3C
  • editorRuler.foreground#f08df040
  • editorSuggestWidget.highlightForeground#E84B3C
  • editorSuggestWidget.selectedBackground#ffffff36
  • editorWarning.foreground#26FF8Fcc
  • editorWidget.background#372d4b
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#fa6771
  • extensionButton.prominentBackground#E84B3C
  • extensionButton.prominentHoverBackground#f08df0
  • focusBorder#1f212b
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#26FF8Fcc
  • gitDecoration.deletedResourceForeground#fa6771
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#b893ceee
  • gitDecoration.untrackedResourceForeground#26FF8F
  • input.background#230a35
  • input.border#a762a780
  • list.activeSelectionBackground#f08df080
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#f08df080
  • list.errorForeground#fa6771
  • list.focusBackground#a762a780
  • list.focusForeground#ffffff
  • list.highlightForeground#7c5f7c
  • list.hoverBackground#f08df080
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#a762a780
  • list.inactiveSelectionBackground#a762a780
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FED243
  • menu.background#463465
  • minimap.findMatchHighlight#f08df080
  • minimap.selectionHighlight#f08df0
  • panelTitle.activeBorder#E84B3C
  • peekView.border#495495
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#34294f59
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#34294f59
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#E84B3Cea
  • progressBar.background#E84B3C
  • scrollbar.shadow#f08df080
  • scrollbarSlider.activeBackground#E84B3C
  • scrollbarSlider.background#230a35
  • scrollbarSlider.hoverBackground#a762a780
  • selection.background#ffffff36
  • sideBar.background#18173E
  • sideBar.border#a762a740
  • sideBar.dropBackground#f08df080
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#230a35
  • sideBarSectionHeader.border#a762a740
  • sideBarSectionHeader.foreground#ffffff80
  • sideBarTitle.foreground#FED24380
  • statusBar.background#f08df040
  • statusBar.debuggingBackground#E84B3C
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#18173E
  • statusBarItem.hoverBackground#2a2139
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • tab.activeBackground#292752
  • tab.activeBorder#f08df0
  • tab.activeBorderTop#f08df040
  • tab.activeForeground#ffffff
  • tab.border#a762a720
  • tab.hoverBackground#f08df040
  • tab.inactiveBackground#18173E
  • tab.unfocusedActiveBackground#f08df040
  • terminal.ansiBlue#03edf9
  • terminal.ansiBrightBlue#03edf9
  • terminal.ansiBrightCyan#03edf9
  • terminal.ansiBrightGreen#26FF8F
  • terminal.ansiBrightMagenta#f08df0
  • terminal.ansiBrightRed#fa6771
  • terminal.ansiBrightYellow#FED243
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#26FF8F
  • terminal.ansiMagenta#f08df0
  • terminal.ansiRed#fa6771
  • terminal.ansiYellow#E84B3C
  • terminal.foreground#ffffff
  • terminal.selectionBackground#34294f4d
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#f08df0
  • textLink.foreground#E84B3C
  • titleBar.activeBackground#18173E
  • titleBar.inactiveBackground#18173E
  • tree.indentGuidesStroke#FED24380
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#f08df080
  • window.activeBorder#000000
  • window.inactiveBorder#2c213f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#495495italic
string.quoted, string.template, punctuation.definition.string#fa9818
string.template meta.embedded.line#b6b1b1
variable, entity.name.variable#f08df0
variable.language#fa6771bold
variable.parameteritalic
storage.type, storage.modifier#FED243
constant#E84B3C
string.regexp#E84B3C
constant.numeric#E84B3C
constant.language#E84B3C
constant.character.escape#00BBFF
entity.name#fa6771
entity.name.tag#26FF8F
punctuation.definition.tag#00BBFF
entity.other.attribute-name#FED243
entity.other.attribute-name.html#FED243italic
entity.name.type, meta.attribute.class.html#fa6771
entity.other.inherited-class#D50
entity.name.function, variable.function#00BBFF
keyword.control.export.js, keyword.control.import.js#26FF8F
keyword#FED243
keyword.control#FED243
keyword.operator#FED243
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FED243
keyword.other.unit#E84B3C
support#fa6771
support.function#36f9f6
support.variable#f08df0
meta.object-literal.key, support.type.property-name#f08df0
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#FED243
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#26FF8F
support.type.property-name.css, support.type.property-name.json#26FF8F
switch-block.expr.js#26FF8F
variable.other.constant.property.js, variable.other.property.js#1DA0CF
constant.other.color#E84B3C
support.constant.font-name#E84B3C
entity.other.attribute-name.id#00BBFF
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D50
support.function.misc.css#fa6771
markup.heading, entity.name.section#f08df0
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#f08df0
markup.underline.link#D50
string.other.link.description#E84B3C
meta.function-call.generic.python#00BBFF
storage.type.cs#fa6771
entity.name.variable.local.cs#f08df0
entity.name.variable.field.cs, entity.name.variable.property.cs#f08df0
source.cpp keyword.operator#FED243
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#00BBFF
source.elixir entity.name.function#26FF8F
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#00BBFF
source.elixir punctuation.definition.string#26FF8F
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#26FF8F
source.elixir .punctuation.binary.elixir#f08df0italic