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