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#FF6AC115
  • activityBar.activeBorder#FF6AC1
  • activityBar.background#0F0E17
  • activityBar.foreground#FF6AC1
  • activityBar.inactiveForeground#676E95
  • activityBarBadge.background#FF6AC1
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6AC1
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF6AC1
  • breadcrumb.background#0F0E17
  • breadcrumb.focusForeground#E4F0FB
  • breadcrumb.foreground#676E95
  • breadcrumbPicker.background#1A1826
  • button.background#FF6AC1
  • button.foreground#FFFFFF
  • button.hoverBackground#FF9AC1
  • button.secondaryBackground#1A1826
  • button.secondaryForeground#E4F0FB
  • button.secondaryHoverBackground#2D2B3D
  • diffEditor.insertedLineBackground#A6E3A115
  • diffEditor.insertedTextBackground#A6E3A120
  • diffEditor.removedLineBackground#FF537015
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#1A1826
  • dropdown.border#2D2B3D
  • dropdown.foreground#E4F0FB
  • editor.background#0F0E17
  • editor.findMatchBackground#FFCB6B50
  • editor.findMatchHighlightBackground#FFCB6B30
  • editor.findRangeHighlightBackground#FF6AC120
  • editor.foldBackground#1A182650
  • editor.foreground#E4F0FB
  • editor.hoverHighlightBackground#FF6AC120
  • editor.lineHighlightBackground#1A182650
  • editor.lineHighlightBorder#1A182600
  • editor.rangeHighlightBackground#FF6AC115
  • editor.selectionBackground#FF6AC140
  • editor.selectionHighlightBackground#FF6AC125
  • editor.wordHighlightBackground#C792EA30
  • editor.wordHighlightStrongBackground#C792EA50
  • editorBracketHighlight.foreground1#FF6AC1
  • editorBracketHighlight.foreground2#82AAFF
  • editorBracketHighlight.foreground3#FFCB6B
  • editorBracketHighlight.foreground4#72F1B8
  • editorBracketHighlight.foreground5#C792EA
  • editorBracketHighlight.foreground6#89DDFF
  • editorBracketHighlight.unexpectedBracket.foreground#FF5370
  • editorCursor.foreground#FF6AC1
  • editorError.foreground#FF5370
  • editorGroup.border#2D2B3D
  • editorGroup.dropBackground#FF6AC130
  • editorGroupHeader.tabsBackground#0A0912
  • editorGutter.addedBackground#A6E3A1
  • editorGutter.deletedBackground#FF5370
  • editorGutter.modifiedBackground#82AAFF
  • editorHoverWidget.background#1A1826
  • editorHoverWidget.border#2D2B3D
  • editorInfo.foreground#82AAFF
  • editorLineNumber.activeForeground#FF6AC1
  • editorLineNumber.foreground#2D2B3D
  • editorLink.activeForeground#82AAFF
  • editorOverviewRuler.addedForeground#A6E3A180
  • editorOverviewRuler.border#0F0E17
  • editorOverviewRuler.deletedForeground#FF537080
  • editorOverviewRuler.errorForeground#FF5370
  • editorOverviewRuler.infoForeground#82AAFF
  • editorOverviewRuler.modifiedForeground#82AAFF80
  • editorOverviewRuler.selectionHighlightForeground#FF6AC180
  • editorOverviewRuler.warningForeground#FAB387
  • editorOverviewRuler.wordHighlightForeground#C792EA80
  • editorOverviewRuler.wordHighlightStrongForeground#C792EAA0
  • editorSuggestWidget.background#1A1826
  • editorSuggestWidget.foreground#E4F0FB
  • editorSuggestWidget.highlightForeground#FF6AC1
  • editorSuggestWidget.selectedBackground#FF6AC140
  • editorWarning.foreground#FAB387
  • editorWhitespace.foreground#2D2B3D80
  • editorWidget.background#1A1826
  • editorWidget.border#2D2B3D
  • errorForeground#FF5370
  • focusBorder#FF6AC180
  • foreground#E4F0FB
  • gitDecoration.conflictingResourceForeground#FAB387
  • gitDecoration.deletedResourceForeground#FF5370
  • gitDecoration.ignoredResourceForeground#2D2B3D
  • gitDecoration.modifiedResourceForeground#82AAFF
  • gitDecoration.stageModifiedResourceForeground#C792EA
  • gitDecoration.untrackedResourceForeground#A6E3A1
  • input.background#1A1826
  • input.border#2D2B3D
  • input.foreground#E4F0FB
  • input.placeholderForeground#676E95
  • inputOption.activeBorder#FF6AC1
  • inputValidation.errorBorder#FF5370
  • inputValidation.infoBorder#82AAFF
  • inputValidation.warningBorder#FAB387
  • list.activeSelectionBackground#FF6AC150
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#FF6AC130
  • list.errorForeground#FF5370
  • list.focusBackground#FF6AC140
  • list.highlightForeground#FF9AC1
  • list.hoverBackground#1A182680
  • list.inactiveSelectionBackground#2D2B3D50
  • list.warningForeground#FAB387
  • minimap.errorHighlight#FF537080
  • minimap.findMatchHighlight#FFCB6B80
  • minimap.selectionHighlight#FF6AC180
  • minimap.warningHighlight#FAB38780
  • notificationCenter.border#2D2B3D
  • notificationCenterHeader.background#1A1826
  • notificationCenterHeader.foreground#E4F0FB
  • notificationLink.foreground#82AAFF
  • notifications.background#1A1826
  • notifications.border#2D2B3D
  • notifications.foreground#E4F0FB
  • panel.background#0A0912
  • panel.border#2D2B3D
  • panelTitle.activeBorder#FF6AC1
  • panelTitle.activeForeground#E4F0FB
  • panelTitle.inactiveForeground#676E95
  • peekView.border#FF6AC1
  • peekViewEditor.background#0F0E17
  • peekViewEditor.matchHighlightBackground#FFCB6B50
  • peekViewResult.background#0A0912
  • peekViewResult.fileForeground#E4F0FB
  • peekViewResult.lineForeground#A6ACCD
  • peekViewResult.matchHighlightBackground#FFCB6B50
  • peekViewResult.selectionBackground#FF6AC140
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A1826
  • peekViewTitleDescription.foreground#676E95
  • peekViewTitleLabel.foreground#E4F0FB
  • progressBar.background#FF6AC1
  • quickInput.background#1A1826
  • quickInput.foreground#E4F0FB
  • quickInputList.focusBackground#FF6AC140
  • quickInputTitle.background#0F0E17
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#FF6AC180
  • scrollbarSlider.background#2D2B3D50
  • scrollbarSlider.hoverBackground#2D2B3D80
  • selection.background#FF6AC140
  • settings.checkboxBackground#1A1826
  • settings.checkboxBorder#2D2B3D
  • settings.checkboxForeground#E4F0FB
  • settings.dropdownBackground#1A1826
  • settings.dropdownBorder#2D2B3D
  • settings.dropdownForeground#E4F0FB
  • settings.headerForeground#E4F0FB
  • settings.modifiedItemIndicator#FF6AC1
  • settings.numberInputBackground#1A1826
  • settings.numberInputBorder#2D2B3D
  • settings.numberInputForeground#E4F0FB
  • settings.textInputBackground#1A1826
  • settings.textInputBorder#2D2B3D
  • settings.textInputForeground#E4F0FB
  • sideBar.background#0A0912
  • sideBar.foreground#A6ACCD
  • sideBarSectionHeader.background#1A1826
  • sideBarSectionHeader.border#2D2B3D
  • sideBarTitle.foreground#E4F0FB
  • statusBar.background#0A0912
  • statusBar.debuggingBackground#FF6AC1
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#A6ACCD
  • statusBar.noFolderBackground#1A1826
  • statusBar.noFolderForeground#A6ACCD
  • statusBarItem.hoverBackground#2D2B3D
  • statusBarItem.prominentBackground#FF6AC1
  • statusBarItem.prominentHoverBackground#FF9AC1
  • statusBarItem.remoteBackground#FF6AC1
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#0F0E17
  • tab.activeBorderTop#FF6AC1
  • tab.activeForeground#E4F0FB
  • tab.border#0A0912
  • tab.hoverBackground#1A1826
  • tab.inactiveBackground#0A0912
  • tab.inactiveForeground#676E95
  • terminal.ansiBlack#1A1826
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#2D2B3D
  • terminal.ansiBrightBlue#9AC1FF
  • terminal.ansiBrightCyan#9AE5FF
  • terminal.ansiBrightGreen#72F1B8
  • terminal.ansiBrightMagenta#D4A0EA
  • terminal.ansiBrightRed#FF6AC1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#A6E3A1
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#E4F0FB
  • terminal.ansiYellow#FAB387
  • terminal.background#0F0E17
  • terminal.foreground#E4F0FB
  • titleBar.activeBackground#0A0912
  • titleBar.activeForeground#E4F0FB
  • titleBar.inactiveBackground#0A0912
  • titleBar.inactiveForeground#676E95

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#FF6AC1
comment, punctuation.definition.comment#676E95italic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#C792EA
comment.block.documentation variable.other, comment.block.documentation entity.name.type#89DDFFitalic
string#72F1B8
punctuation.definition.string.begin, punctuation.definition.string.end#4CD4A0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF6AC1
meta.template.expression#E4F0FB
constant, variable.other.constant#FFCB6B
constant.numeric#C792EA
constant.language.boolean#FF9AC1
constant.language.null, constant.language.undefined#FF9AC1italic
keyword#FF6AC1
storage.type, storage.modifier#FF6AC1italic
keyword.control#FF6AC1
keyword.control.import, keyword.control.export, keyword.control.from#FF6AC1italic
entity.name.function, meta.function-call#82AAFF
variable.parameter#FFCB6Bitalic
storage.type.function.arrow#FF6AC1
entity.name.type.class, entity.name.class#89DDFFbold
entity.name.type.interface#89DDFFitalic
entity.name.type, support.type#89DDFFitalic
entity.name.type.parameter#FFCB6B
variable#E4F0FB
variable.language#FF9AC1italic
variable.other.property, meta.object-literal.key#A6ACCD
entity.name.tag#FF6AC1
entity.other.attribute-name#FFCB6Bitalic
string.quoted.double.html, string.quoted.single.html#72F1B8
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#89DDFF
support.type.property-name.css#82AAFF
support.constant.property-value.css, meta.property-value.css#FFCB6B
keyword.other.unit.css#C792EA
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF6AC1
keyword.operator#FF6AC1
keyword.operator.comparison, keyword.operator.relational#89DDFF
keyword.operator.logical#FF6AC1
punctuation#A6ACCD
punctuation.definition.block, meta.brace#A6ACCD
string.regexp#FF9AC1
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#C792EA
meta.decorator, punctuation.decorator#C792EA
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#FF6AC1bold
markup.bold#FFCB6Bbold
markup.italic#C792EAitalic
markup.underline.link, string.other.link#82AAFF
markup.inline.raw, markup.fenced_code.block#72F1B8
markup.quote#676E95italic
punctuation.definition.list.begin.markdown#FF6AC1
support.type.property-name.json#FF6AC1
string.quoted.double.json#72F1B8
entity.name.tag.yaml#FF6AC1
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#FF9AC1italic
support.function.builtin.python, support.type.python#82AAFF
support.function.magic.python#C792EAitalic
entity.name.function.decorator.python, meta.function.decorator.python#C792EA
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#676E95italic
constant.character.format.placeholder.other.python#FF6AC1
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#FF9AC1italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#C792EA
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#89DDFF
keyword.other.unsafe.rust#FF9AC1bold
storage.modifier.mut.rust#FF6AC1italic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#89DDFF
entity.name.type.trait.rust#89DDFFitalic
keyword.other.impl.rust#FF6AC1italic
variable.language.self.rust#FF9AC1italic
entity.name.module.rust, entity.name.namespace.rust#89DDFF
variable.language.this#FF9AC1italic
support.type.primitive.ts, support.type.builtin.ts#89DDFF
entity.name.package.go#89DDFF
support.function.builtin.go#82AAFF
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.conditional, meta.preprocessor#C792EA
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#89DDFF
invalid#FF9AC1underline
invalid.deprecated#676E95strikethrough
support.function#82AAFF
support.class#89DDFF
support.constant#FFCB6B
entity.name#89DDFF
entity.name.namespace, entity.name.module#89DDFF
Synesthesia Synthwave by stackmason1 - VS Code Theme