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#1a0f1a
  • activityBar.border#4a3a4a
  • activityBar.dropBackground#4a3a4a66
  • activityBar.foreground#88ccdd
  • activityBar.inactiveForeground#5a4a5a
  • activityBarBadge.background#dd77bb
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#dd77dd
  • breadcrumb.background#1a0f1a
  • breadcrumb.focusForeground#88ccdd
  • breadcrumb.foreground#aa8aaa
  • button.background#dd77bb
  • button.foreground#ffffff
  • button.hoverBackground#ee88cc
  • dropdown.background#2a1a2a
  • dropdown.border#88ccdd44
  • dropdown.foreground#e8d8e8
  • editor.background#1a0f1a
  • editor.findMatchBackground#dd77bb77
  • editor.findMatchHighlightBackground#dd77bb55
  • editor.foreground#e8d8e8
  • editor.inactiveSelectionBackground#dd77dd40
  • editor.lineHighlightBackground#2a1a2a
  • editor.selectionBackground#dd77dd66
  • editor.wordHighlightBackground#88ccdd55
  • editor.wordHighlightStrongBackground#88ccdd77
  • editorBracketHighlight.foreground1#dd77dd
  • editorBracketHighlight.foreground2#88ccdd
  • editorBracketHighlight.foreground3#99ddaa
  • editorBracketHighlight.foreground4#ddaa77
  • editorBracketHighlight.foreground5#dd77bb
  • editorBracketHighlight.foreground6#77ddcc
  • editorBracketMatch.background#88ccdd66
  • editorBracketMatch.border#88ccdd
  • editorCodeLens.foreground#8a6a8a
  • editorCursor.foreground#dd77dd
  • editorError.foreground#dd77aa
  • editorGroup.border#4a3a4a
  • editorGroup.dropBackground#4a3a4a44
  • editorGroupHeader.noTabsBackground#1a0f1a
  • editorGroupHeader.tabsBackground#1d121d
  • editorGroupHeader.tabsBorder#3a2a3a
  • editorGutter.addedBackground#99ddaa
  • editorGutter.background#1a0f1a
  • editorGutter.deletedBackground#dd77aa
  • editorGutter.modifiedBackground#88ccdd
  • editorIndentGuide.activeBackground#5a4a5a
  • editorIndentGuide.background#3a2a3a
  • editorInfo.foreground#88ccdd
  • editorInlayHint.background#2a1a2a88
  • editorInlayHint.foreground#aa8aaa
  • editorInlayHint.parameterBackground#ddaa7711
  • editorInlayHint.parameterForeground#ddaa7788
  • editorInlayHint.typeBackground#88ccdd11
  • editorInlayHint.typeForeground#88ccdd88
  • editorLineNumber.activeForeground#88ccdd
  • editorLineNumber.foreground#5a4a5a
  • editorOverviewRuler.border#2a1a2a
  • editorOverviewRuler.errorForeground#dd77aa
  • editorOverviewRuler.infoForeground#88ccdd
  • editorOverviewRuler.warningForeground#ddaa77
  • editorRuler.foreground#3a2a3a
  • editorWarning.foreground#ddaa77
  • focusBorder#88ccdd
  • gitDecoration.addedResourceForeground#99ddaa
  • gitDecoration.conflictingResourceForeground#dd77dd
  • gitDecoration.deletedResourceForeground#dd77aa
  • gitDecoration.modifiedResourceForeground#88ccdd
  • gitDecoration.untrackedResourceForeground#ddaa77
  • input.background#2a1a2a
  • input.border#88ccdd44
  • input.foreground#e8d8e8
  • input.placeholderForeground#8a6a8a
  • list.activeSelectionBackground#dd77bb44
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#88ccdd
  • list.hoverBackground#2a1a2a
  • list.inactiveSelectionBackground#dd77bb22
  • minimap.background#1a0f1a
  • minimap.errorHighlight#dd77aa
  • minimap.warningHighlight#ddaa77
  • panel.background#1d121d
  • panel.border#4a3a4a
  • panel.dropBackground#4a3a4a44
  • panelTitle.activeForeground#88ccdd
  • panelTitle.inactiveForeground#aa8aaa
  • peekView.border#88ccdd
  • peekViewEditor.background#1d121d
  • peekViewResult.background#1a0f1a
  • peekViewTitle.background#2a1a2a
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#5a4a5a88
  • scrollbarSlider.background#5a4a5a44
  • scrollbarSlider.hoverBackground#5a4a5a66
  • sideBar.background#1d121d
  • sideBar.border#4a3a4a
  • sideBar.dropBackground#4a3a4a66
  • sideBar.foreground#d8c8d8
  • sideBarSectionHeader.background#2a1a2a
  • sideBarSectionHeader.foreground#dd77dd
  • sideBarTitle.foreground#88ccdd
  • statusBar.background#1d121d
  • statusBar.border#2a1a2a
  • statusBar.debuggingBackground#dd77aa
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d8c8d8
  • tab.activeBackground#1a0f1a
  • tab.activeBorder#88ccdd
  • tab.activeBorderTop#88ccdd
  • tab.activeForeground#ffffff
  • tab.border#4a3a4a
  • tab.inactiveBackground#1d121d
  • tab.inactiveForeground#aa8aaa
  • tab.unfocusedActiveForeground#aa8aaa
  • tab.unfocusedInactiveForeground#7a6a7a
  • terminal.ansiBlack#1a0f1a
  • terminal.ansiBlue#88ccdd
  • terminal.ansiBrightBlack#5a4a5a
  • terminal.ansiBrightBlue#99ddee
  • terminal.ansiBrightCyan#88eecc
  • terminal.ansiBrightGreen#aaeebb
  • terminal.ansiBrightMagenta#ee88ee
  • terminal.ansiBrightRed#ee88bb
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#eebb88
  • terminal.ansiCyan#77ddcc
  • terminal.ansiGreen#99ddaa
  • terminal.ansiMagenta#dd77dd
  • terminal.ansiRed#dd77aa
  • terminal.ansiWhite#e8d8e8
  • terminal.ansiYellow#ddaa77
  • terminal.background#1a0f1a
  • terminal.foreground#e8d8e8
  • widget.border#4a3a4a
  • widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#8a6a8aitalic
comment.line.double-slash keyword, comment.block keyword#aa8aaaitalic bold
string, string.quoted.single, string.quoted.double, string.quoted.triple#00ff99—
string.template, string.quoted.template#33ffbb—
meta.template.expression, string.template meta.embedded#dd77dd—
string.regexp#dd99bb—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#ff55ff—
constant.language.boolean#ff77ffbold
constant.language.null, constant.language.undefined, constant.language.none#dd88ccitalic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#ff77ddbold
storage.type, storage.modifier, keyword.other.unit#ff77dd—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#ff55ffitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#88ccdd—
keyword.operator.assignment#99ddeebold
entity.name.function, meta.function-call entity.name.function#99ddffbold
meta.function-call, variable.function#aaeeff—
entity.name.function.member, meta.method-call entity.name.function#88ccee—
support.function, support.function.builtin#55ffbb—
meta.definition.variable variable.other, variable.other.readwrite#e8d8e8—
variable.other#d8c8d8—
variable.other.constant, constant.other#99ddeebold
variable.parameter, meta.function.parameters variable#ffaa44italic
meta.object-binding-pattern-variable variable.parameter, meta.array-binding-pattern-variable variable.parameter#ffcc66—
variable.other.property, support.variable.property, meta.object-literal.key#f5f5f5—
variable.other.object.property#e8e8e8—
entity.name.class, entity.name.type.class#ff4466bold
entity.name.interface, entity.name.type.interface#77ddccitalic
support.type, entity.name.type, meta.type.annotation#88ccdd—
entity.name.type.parameter#99ddeeitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#dd77bb—
entity.other.attribute-name#88ccdd—
support.class.component, entity.name.tag.js, entity.name.tag.tsx#cc77ffbold
entity.other.attribute-name.js, entity.other.attribute-name.tsx#99ddee—
support.type.property-name.css#88ccdd—
support.constant.property-value.css, meta.property-value.css#00ff88—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#dd77bb—
variable.language.self.python#dd77dditalic
meta.decorator.python, entity.name.function.decorator.python#ddaa77bold
support.function.magic.python#ee88ee—
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#88ccdd—
meta.structure.dictionary.value.json#00ff88—
markup.heading, entity.name.section.markdown#dd77bbbold
markup.bold#88ccddbold
markup.italic#00ff88italic
markup.inline.raw, markup.fenced_code#ff44ff—
markup.underline.link#99ddaa—
markup.quote#aa8aaaitalic
punctuation.separator, punctuation.terminator#aa8aaa—
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#99ddee—
variable.language.this#dd77dditalic
variable.language.super#ee88eeitalic
keyword.control.flow.async, keyword.control.flow.await#dd77bbitalic bold
invalid, invalid.illegal#dd77aaunderline
invalid.deprecated#ddaa77strikethrough
Neon Dreams Theme by Cursor Themes - VS Code Theme