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#01051F
  • activityBar.dropBackground#0f1c5066
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#2c52e8
  • activityBarBadge.foreground#ffffff
  • badge.background#2CC8E8
  • badge.foreground#0E0D29
  • breadcrumbPicker.background#161A42
  • button.background#2CC8E8
  • button.foreground#0E0D29
  • charts.blue#2CC8E8
  • debugToolBar.background#01051F
  • diffEditor.insertedTextBackground#784DFF16
  • diffEditor.removedTextBackground#2CC8E816
  • dropdown.background#0f1c50
  • dropdown.listBackground#0f1c50
  • editor.background#010826
  • editor.findMatchBackground#0f1c5059
  • editor.findMatchHighlightBackground#0f1c5033
  • editor.findRangeHighlightBackground#0f1c501a
  • editor.hoverHighlightBackground#1614404d
  • editor.lineHighlightBackground#0f1c5066
  • editor.rangeHighlightBackground#3648A839
  • editor.selectionBackground#6221CF88
  • editor.selectionHighlightBackground#672BFF59
  • editor.wordHighlightBackground#672BFF88
  • editor.wordHighlightStrongBackground#672BFF88
  • editorBracketMatch.background#0f1c5066
  • editorBracketMatch.border#3648A8
  • editorCodeLens.foreground#ffffffcc
  • editorCursor.background#672BFF59
  • editorCursor.foreground#2CC8E8
  • editorError.foreground#FF3830
  • editorGroup.border#3648A8
  • editorGroup.dropBackground#0f1c504a
  • editorGroupHeader.tabsBackground#01051F
  • editorGutter.addedBackground#7D7156d6
  • editorGutter.deletedBackground#FFDC6Ea4
  • editorGutter.modifiedBackground#3648A8af
  • editorIndentGuide.activeBackground#2CC8E8
  • editorIndentGuide.background#0f1c50
  • editorLineNumber.activeForeground#ffffff73
  • editorLineNumber.foreground#ffffff10
  • editorOverviewRuler.addedForeground#FFD57099
  • editorOverviewRuler.border#0f1c50b3
  • editorOverviewRuler.deletedForeground#2CC8E899
  • editorOverviewRuler.errorForeground#FF383099
  • editorOverviewRuler.findMatchForeground#0f1c50
  • editorOverviewRuler.modifiedForeground#3648A899
  • editorOverviewRuler.warningForeground#FF3830cc
  • editorRuler.foreground#0f1c5033
  • editorSuggestWidget.highlightForeground#2c52e8
  • editorWarning.foreground#FF3830cc
  • editorWidget.background#161A42
  • editorWidget.border#161A42
  • errorForeground#FF3830
  • extensionButton.prominentBackground#2CC8E8
  • extensionButton.prominentHoverBackground#FFDC87
  • focusBorder#2CC8E8
  • foreground#ffffffd9
  • gitDecoration.addedResourceForeground#5eff84cc
  • gitDecoration.deletedResourceForeground#FF3830
  • gitDecoration.ignoredResourceForeground#ffffff40
  • gitDecoration.modifiedResourceForeground#FFEE94ee
  • gitDecoration.untrackedResourceForeground#FFD394
  • input.background#0f1c50
  • inputOption.activeBorder#FFDC8799
  • inputValidation.errorBackground#FF3830
  • inputValidation.errorBorder#FF383000
  • jp-widgets-color#ffffffd9
  • layout.splitter.backgroundColor#2CC8E8
  • list.activeSelectionBackground#0E0D2980
  • list.activeSelectionForeground#2CC8E8
  • list.dropBackground#0f1c5066
  • list.errorForeground#FF3830
  • list.focusBackground#0E0D2999
  • list.focusForeground#ffffff
  • list.highlightForeground#FFDC87
  • list.hoverBackground#13123799
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#0E0D2999
  • list.inactiveSelectionBackground#0f1c5066
  • list.inactiveSelectionForeground#2c52e8
  • list.warningForeground#FF3830bb
  • panelTitle.activeBorder#ffffff
  • peekView.border#3648A8
  • peekViewEditor.background#161A42
  • peekViewEditor.matchHighlightBackground#0f1c5059
  • peekViewResult.background#161A42
  • peekViewResult.matchHighlightBackground#0f1c5059
  • peekViewResult.selectionBackground#0E0D2980
  • peekViewTitle.background#161A42
  • pickerGroup.foreground#2CC8E8ea
  • progressBar.background#2CC8E8
  • scrollbar.shadow#2c52e8
  • scrollbarSlider.activeBackground#2CC8E888
  • scrollbarSlider.background#2CC8E81a
  • scrollbarSlider.hoverBackground#16144059
  • selection.background#0f1c5059
  • settings.sashBorder#2CC8E840
  • sideBar.background#01051F
  • sideBar.dropBackground#0f1c504c
  • sideBar.foreground#ffffffa7
  • sideBarSectionHeader.background#01051F
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#01051F
  • statusBar.debuggingBackground#2147FC
  • statusBar.debuggingForeground#121538
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#01051F
  • statusBarItem.hoverBackground#161440
  • statusBarItem.prominentBackground#0E0D29
  • statusBarItem.prominentHoverBackground#161440
  • tab.activeBorder#4F139C
  • tab.border#2E010800
  • tab.inactiveBackground#010826
  • terminal.ansiBlue#FCBA3D
  • terminal.ansiBrightBlue#FCBA3D
  • terminal.ansiBrightCyan#FCBA3D
  • terminal.ansiBrightGreen#2CC8E8
  • terminal.ansiBrightMagenta#FFDC87
  • terminal.ansiBrightRed#2CC8E8
  • terminal.ansiBrightYellow#FCE244
  • terminal.ansiCyan#FCBA3D
  • terminal.ansiGreen#2CC8E8
  • terminal.ansiMagenta#FFDC87
  • terminal.ansiRed#2CC8E8
  • terminal.ansiYellow#2CC8E8
  • terminal.foreground#ffffff
  • terminal.selectionBackground#0f1c504d
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#FCBA3D
  • textLink.activeForeground#FFDC87
  • textLink.foreground#2CC8E8
  • titleBar.activeBackground#01051F
  • titleBar.inactiveBackground#01051F
  • tree.inactiveIndentGuidesStroke#2c52e873
  • tree.indentGuidesStroke#2CC8E8
  • walkThrough.embeddedEditorBackground#161A42
  • widget.shadow#2c52e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#3648A8italic
string.quoted, string.template, punctuation.definition.string#2CC8E8
string.template meta.embedded.line#C2AEC2
variable, entity.name.variable#FFDC87
variable.language#2CC8E8bold
variable.parameteritalic
storage.type, storage.modifier#FCE244
constant#2CC8E8
string.regexp#2CC8E8
constant.numeric#2CC8E8
constant.language#2CC8E8
constant.character.escape#FCA612
entity.name#2CC8E8
entity.name.tag#FFCC00
punctuation.definition.tag#FCA612
entity.other.attribute-name#FCE244
entity.other.attribute-name.html#FCE244italic
entity.name.type, meta.attribute.class.html#2CC8E8
entity.other.inherited-class#FFE119
entity.name.function, variable.function#FCA612
keyword.control.export.js, keyword.control.import.js#ffffff
keyword#FCE244
keyword.control#FCE244
keyword.operator#FCE244
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FCE244
keyword.other.unit#2CC8E8
support#2CC8E8
support.function#FCA612
support.variable#FFDC87
meta.object-literal.key, support.type.property-name#FFDC87
punctuation.separator.key-value#C2AEC2
punctuation.section.embedded#FCE244
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#2CC8E8
support.type.property-name.css, support.type.property-name.json#FFE119
switch-block.expr.js#2CC8E8
constant.other.color#2CC8E8
support.constant.font-name#2CC8E8
entity.other.attribute-name.id#FCA612
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FFE119
support.function.misc.css#2CC8E8
markup.heading, entity.name.section#FFDC87
text.html, keyword.operator.assignment#ffffffee
markup.quote#C2AEC2ccitalic
beginning.punctuation.definition.list#FFDC87
markup.underline.link#FFE119
string.other.link.description#2CC8E8
meta.function-call.generic.python#FCA612
storage.type.cs#2CC8E8
entity.name.variable.local.cs#FFDC87
entity.name.variable.field.cs, entity.name.variable.property.cs#FFDC87
source.cpp keyword.operator#FCE244
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#FCA612
source.elixir entity.name.function#2CC8E8
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#FCA612
source.elixir punctuation.definition.string#2CC8E8
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#2CC8E8
source.elixir .punctuation.binary.elixir#FFDC87italic
support.type.property-name.json.arm-template#FCE244
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#FFDC87ffbold
variable.language.variables.tle.arm-template, support.type.parameters.tle.arm-template#FCA612ff
ThemeDatabase All Themes by enes ozturk - VS Code Theme