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#080513
  • activityBar.border#1c1330
  • activityBar.foreground#39f3ff
  • activityBar.inactiveForeground#9d8fc2
  • activityBarBadge.background#39f3ff
  • activityBarBadge.foreground#000000
  • badge.background#c724e0
  • breadcrumb.background#0a0612
  • button.background#c724e0
  • button.foreground#ffffff
  • button.hoverBackground#39f3ff
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#0a0612
  • editor.findMatchBackground#c724e0
  • editor.findMatchBorder#39F3FF
  • editor.findMatchHighlightBackground#c724e080
  • editor.findMatchHighlightBorder#C724E066
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#150d24
  • editor.lineHighlightBorder#4a1f66
  • editor.selectionBackground#4a1f6680
  • editorBracketMatch.border#39F3FF
  • editorCursor.foreground#39f3ff
  • editorGroup.border#1c1330
  • editorGroupHeader.noTabsBackground#0a0612
  • editorGroupHeader.tabsBackground#080513
  • editorGutter.addedBackground#39f3ff
  • editorGutter.background#0a0612
  • editorGutter.modifiedBackground#39f3ff
  • editorHoverWidget.background#150d24
  • editorHoverWidget.border#4a1f66
  • editorHoverWidget.foreground#e6dcf5
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.addedForeground#39f3ff
  • editorOverviewRuler.modifiedForeground#39f3ff
  • editorSuggestWidget.background#150d24
  • editorSuggestWidget.border#4a1f66
  • editorSuggestWidget.foreground#e6dcf5
  • editorSuggestWidget.highlightForeground#39f3ff
  • editorSuggestWidget.selectedBackground#4a1f66
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#150d24
  • editorWidget.border#4a1f66
  • extensionButton.prominentBackground#39F3FF
  • extensionButton.prominentHoverBackground#39F3FF96
  • focusBorder#C724E0
  • gitDecoration.addedResourceForeground#39f3ff
  • gitDecoration.deletedResourceForeground#39F3FF
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#39f3ff
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#1c1330
  • input.border#4a1f66
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#4a1f66
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#39f3ff
  • list.hoverBackground#1c1330
  • list.inactiveSelectionBackground#1c1330
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#0a0612
  • menu.selectionBackground#4a1f66
  • minimapGutter.addedBackground#39f3ff
  • minimapGutter.modifiedBackground#39f3ff
  • notificationCenter.background#150d24
  • notifications.background#150d24
  • notifications.border#4a1f66
  • output.background#0a0612
  • panel.background#0a0612
  • pickerGroup.border#39F3FF
  • quickInput.background#0a0612
  • scrollbarSlider.activeBackground#39f3ff66
  • scrollbarSlider.background#39f3ff22
  • scrollbarSlider.hoverBackground#39f3ff44
  • sideBar.background#080513
  • sideBar.border#1c1330
  • sideBar.foreground#9d8fc2
  • sideBarSectionHeader.background#080513
  • sideBarSectionHeader.border#1c1330
  • statusBar.background#150d24
  • statusBar.border#2b1c47
  • statusBar.debuggingBackground#39F3FF
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#150d24
  • tab.activeForeground#39f3ff
  • tab.border#2b1c47
  • tab.inactiveBackground#080513
  • terminal.ansiBlue#C724E0
  • terminal.ansiBrightBlue#C724E0
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#39f3ff
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#39F3FF
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#39f3ff
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#39F3FF
  • terminal.ansiYellow#FFEA16
  • terminal.background#0a0612
  • terminal.border#4a1f66
  • terminal.foreground#e6dcf5
  • terminal.selectionBackground#4a1f6680
  • terminalCommandDecoration.defaultBackground#39f3ff
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#39f3ff
  • terminalCursor.background#0a0612
  • terminalCursor.foreground#39f3ff
  • titleBar.activeBackground#080513
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#080513
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a4b7aitalic
string.quoted, string.template, punctuation.definition.string#FF71CE
string.template meta.embedded.line#f5e9ff
variable, entity.name.variable#B967FF
variable.language, variable.other.object.js#C724E0
variable.parameter#B967FFbold
storage.type, storage.modifier#39F3FFbold
constant#B967FF
string.regexp#B967FF
meta.jsx.children.js, meta.property-value.css, text.html.derivative#f5e9ff
constant.numeric#39F3FFbold
constant.language#B967FF
constant.character.escape#FFFFFF
entity.name#C724E0
entity.name.tag#C724E0bold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#B967FF
entity.name.type#C724E0bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#f5e9ffbold
keyword#39F3FFbold
keyword.control#39F3FFbold
keyword.operator#39F3FFbold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#39F3FFbold
keyword.other.unit#B967FF
support#C724E0bold
support.function#f5e9ff
support.variable#B967FF
meta.object-literal.key, support.type.property-name#C724E0
variable.other.property.js#39F3FFbold
punctuation.separator.key-value#39F3FFbold
punctuation.section.embedded#39F3FFbold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#39F3FF
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#39F3FFbold
support.constant.font-name#B967FF
entity.other.attribute-name.id#39F3FFbold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#39F3FFbold
markup.heading, entity.name.section#B967FF
markup.quote#FFD166bold
beginning.punctuation.definition.list#B967FF
markup.underline.link#F2F2F2
string.other.link.description#B967FF
meta.function-call.generic.python#f5e9ff
storage.type.cs#39F3FFbold
entity.name.variable.local.cs#B967FF
entity.name.variable.field.cs, entity.name.variable.property.cs#B967FF
source.cpp keyword.operator#39F3FFbold
punctuation.definition.heading.markdown#B967FF7c
punctuation.definition.bold.markdown#39F3FF7a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
storage.type.interface.ts, storage.type.interface.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.class.ts, storage.type.class.tsx#39F3FFbold
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx#C724E0bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#C724E0
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#C724E0
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#39F3FF
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#FF71CEitalic
entity.name.function.macro.rust, support.macro.rust#C724E0bold
variable.language.self.rust, variable.language.super.rust#C724E0italic
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.option.rust, entity.name.type.result.rust#C724E0bold
support.type.primitive.rust, entity.name.type.primitive.rust#39F3FFbold
meta.attribute.rust, punctuation.definition.attribute.rust#B967FF
support.class.component.js, support.class.component.jsx, support.class.component.tsx#C724E0bold
meta.jsx.children, meta.jsx.children.tsx#f5e9ff
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#39F3FFbold
meta.decorator, punctuation.decorator#B967FFitalic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#C724E0
entity.name.package.go, entity.name.import.go#B967FF
support.type.property-name.json#C724E0
entity.name.tag.yaml#C724E0
support.type.property-name.toml, entity.name.table.toml#C724E0
Brand New Day EV Theme by ryanditko - VS Code Theme