Skip to main content
Coding Theme

SynthWave '84 Blues

Publisher: sabrsorensenThemes in package: 1

A blue twist on robb0wen's SynthWave '84, a Synthwave-inspired colour theme to satisfy your neon dreams

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#001520
  • activityBar.dropBorder#00294f66
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#4ce9d9
  • activityBarBadge.foreground#002139
  • badge.background#2a2139
  • badge.foreground#ffffff
  • breadcrumbPicker.background#232530
  • button.background#004D85
  • debugToolBar.background#003465
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#d64a5335
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#002335
  • editor.findMatchBackground#D18616bb
  • editor.findMatchHighlightBackground#D1861655
  • editor.findRangeHighlightBackground#34294f1a
  • editor.hoverHighlightBackground#003564
  • editor.lineHighlightBorder#0059AB66
  • editor.rangeHighlightBackground#00549539
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#ffffff20
  • editor.wordHighlightBackground#34294f88
  • editor.wordHighlightStrongBackground#34294f88
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#001b2f
  • editorCursor.foreground#4ce9d9
  • editorError.foreground#d64a53
  • editorGroup.border#495495
  • editorGroup.dropBackground#4954954a
  • editorGroupHeader.tabsBackground#001b2f
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground#0048AB80
  • editorIndentGuide.background#444251
  • editorLineNumber.activeForeground#ffffffcc
  • editorLineNumber.foreground#ffffff73
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#d64a5399
  • editorOverviewRuler.errorForeground#d64a53dd
  • editorOverviewRuler.findMatchForeground#D1861699
  • editorOverviewRuler.modifiedForeground#b893ce99
  • editorOverviewRuler.warningForeground#72f1b8cc
  • editorRuler.foreground#0048AB80
  • editorSuggestWidget.highlightForeground#f97e72
  • editorSuggestWidget.selectedBackground#ffffff36
  • editorWarning.foreground#72f1b8cc
  • editorWidget.background#171520DC
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#d64a53
  • extensionButton.prominentBackground#4ce9d9
  • extensionButton.prominentHoverBackground#7ed0ff
  • focusBorder#1f212b
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#72f1b8cc
  • gitDecoration.deletedResourceForeground#d64a53
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#0093ceee
  • gitDecoration.untrackedResourceForeground#72f1b8
  • input.background#002139
  • inputOption.activeBorder#7ed0ff99
  • inputValidation.errorBackground#d64a5380
  • inputValidation.errorBorder#d64a5300
  • list.activeSelectionBackground#ffffff20
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#34294f66
  • list.errorForeground#d64a53E6
  • list.focusBackground#ffffff20
  • list.focusForeground#ffffff
  • list.highlightForeground#f97e72
  • list.hoverBackground#00294d99
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2a213999
  • list.inactiveSelectionBackground#ffffff20
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#72f1b8bb
  • menu.background#003465
  • minimapGutter.addedBackground#09f7a099
  • minimapGutter.deletedBackground#d64a53
  • minimapGutter.modifiedBackground#0093ce
  • 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#4ce9d9ea
  • progressBar.background#4ce9d9
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#9d8bca20
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#ffffff20
  • sideBar.background#001b2f
  • sideBar.dropBackground#00294f4c
  • sideBar.foreground#ffffff99
  • sideBarSectionHeader.background#001b2f
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#001b2f
  • statusBar.debuggingBackground#f97e72
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#001b2f
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#00294f
  • tab.activeBorder#000088
  • tab.border#001b2f00
  • tab.inactiveBackground#002335
  • terminal.ansiBlue#3688f6
  • terminal.ansiBrightBlue#03edf9
  • terminal.ansiBrightCyan#03edf9
  • terminal.ansiBrightGreen#72f1b8
  • terminal.ansiBrightMagenta#7ed0ff
  • terminal.ansiBrightRed#d64a53
  • terminal.ansiBrightYellow#fede5d
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#72f1b8
  • terminal.ansiMagenta#7ed0ff
  • terminal.ansiRed#d64a53
  • terminal.ansiYellow#f97e72
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#7ed0ff
  • textLink.foreground#4ce9d9
  • titleBar.activeBackground#001b2f
  • titleBar.inactiveBackground#001b2f
  • 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#848bbditalic
string.quoted, string.template, punctuation.definition.string#ff8b39
string.template meta.embedded.line#b6b1b1
variable, entity.name.variable#7ed0ff
variable.language#d64a53bold
variable.parameteritalic
storage.type, storage.modifier#fede5d
constant#f97e72
string.regexp#f97e72
constant.numeric#f97e72
constant.language#f97e72
constant.character.escape#36f9f6
entity.name#d64a53
entity.name.tag#72f1b8
punctuation.definition.tag#36f9f6
entity.other.attribute-name#ffd940
entity.other.attribute-name.html#ffe375italic
entity.name.type, meta.attribute.class.html#d64a53
entity.other.inherited-class#D50
entity.name.function, variable.function#36f9f6
keyword.control.export.js, keyword.control.import.js#72f1b8
constant.numeric.decimal.js#2EE2FA
keyword#fede5d
keyword.control#fede5d
keyword.operator#fede5d
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#fede5d
keyword.other.unit#f97e72
support#d64a53
support.function#36f9f6
support.variable#7ed0ff
meta.object-literal.key, support.type.property-name#7ed0ff
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#fede5d
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#72f1b8
support.type.property-name.css, support.type.property-name.json#72f1b8
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#36f9f6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D50
support.function.misc.css#d64a53
markup.heading, entity.name.section#7ed0ff
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#7ed0ff
markup.underline.link#D50
string.other.link.description#f97e72
meta.function-call.generic.python#36f9f6
variable.parameter.function-call.python#72f1b8
storage.type.cs#d64a53
entity.name.variable.local.cs#7ed0ff
entity.name.variable.field.cs, entity.name.variable.property.cs#7ed0ff
constant.other.placeholder.c#72f1b8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72f1b8
storage.modifier.c#d64a53
source.cpp keyword.operator#fede5d
constant.other.placeholder.cpp#72f1b8italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#72f1b8
storage.modifier.specifier.const.cpp#d64a53
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#7ed0ffitalic
entity.global.clojure#36f9f6bold
storage.control.clojure#36f9f6italic
meta.metadata.simple.clojure, meta.metadata.map.clojure#d64a53italic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#7ed0ffff
source.go#7ed0ffff
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#fede5d
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#fede5d
markup.heading.markdown, entity.name.section.markdown#7ed0ffbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72f1b8
source.dart, source.python, source.scala#7ed0ffff
string.interpolated.single.dart#f97e72
variable.parameter.dart#72f1b8
constant.numeric.dart#2EE2FA
variable.parameter.scala#2EE2FA
meta.template.expression.scala#72f1b8

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

SynthWave '84 Blues - Coding Theme