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.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
Synthwave x Fluoromachine Blue Edition by m-marqx - VS Code Theme