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#140f1f
  • activityBar.activeBorder#ff007f
  • activityBar.background#0a0710
  • activityBar.foreground#eef2ff
  • activityBar.inactiveForeground#7b6a9e
  • activityBarBadge.background#ff007f
  • activityBarBadge.foreground#140f1f
  • badge.background#ff007f30
  • badge.foreground#eef2ff
  • breadcrumb.activeSelectionForeground#eef2ff
  • breadcrumb.background#140f1f
  • breadcrumb.focusForeground#eef2ff
  • breadcrumb.foreground#7b6a9e
  • breadcrumbPicker.background#0f0b18
  • button.background#a855f7
  • button.foreground#140f1f
  • button.hoverBackground#ff007f
  • button.secondaryBackground#ff007f30
  • button.secondaryForeground#eef2ff
  • button.secondaryHoverBackground#221935
  • debugToolBar.background#0f0b18
  • diffEditor.insertedTextBackground#10b98120
  • diffEditor.removedTextBackground#ef444440
  • dropdown.background#0f0b18
  • dropdown.border#ff007f30
  • dropdown.foreground#eef2ff
  • editor.background#140f1f
  • editor.findMatchBackground#ffff8060
  • editor.findMatchHighlightBackground#eef2ff30
  • editor.findRangeHighlightBackground#ff007f3060
  • editor.foldBackground#140f1f
  • editor.foreground#eef2ff
  • editor.hoverHighlightBackground#00f0ff30
  • editor.lineHighlightBackground#221935
  • editor.lineHighlightBorder#140f1f
  • editor.rangeHighlightBackground#a855f715
  • editor.selectionBackground#ff007f30
  • editor.selectionHighlightBackground#ff007f30b0
  • editor.snippetFinalTabstopHighlightBackground#140f1f
  • editor.snippetFinalTabstopHighlightBorder#10b981
  • editor.snippetTabstopHighlightBackground#140f1f
  • editor.snippetTabstopHighlightBorder#ff007f30
  • editor.wordHighlightBackground#00f0ff30
  • editor.wordHighlightStrongBackground#10b98130
  • editorBracketHighlight.foreground1#eef2ff
  • editorBracketHighlight.foreground2#ff007f
  • editorBracketHighlight.foreground3#00f0ff
  • editorBracketHighlight.foreground4#10b981
  • editorBracketHighlight.foreground5#a855f7
  • editorBracketHighlight.foreground6#ffca80
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorCodeLens.foreground#7b6a9e
  • editorCursor.foreground#ff007f
  • editorError.foreground#ef4444
  • editorGroup.border#0a0710
  • editorGroup.dropBackground#ff007f3070
  • editorGroupHeader.noTabsBackground#0f0b18
  • editorGroupHeader.tabsBackground#0f0b18
  • editorGroupHeader.tabsBorder#0a0710
  • editorGutter.addedBackground#10b981cc
  • editorGutter.deletedBackground#ef4444cc
  • editorGutter.modifiedBackground#00f0ffcc
  • editorHoverWidget.background#0f0b18
  • editorHoverWidget.border#ff007f30
  • editorLineNumber.activeForeground#ff007f
  • editorLineNumber.foreground#7b6a9e
  • editorLink.activeForeground#00f0ff
  • editorMarkerNavigation.background#0f0b18
  • editorOverviewRuler.addedForeground#10b981aa
  • editorOverviewRuler.border#0a0710
  • editorOverviewRuler.currentContentForeground#10b981
  • editorOverviewRuler.deletedForeground#ef4444aa
  • editorOverviewRuler.errorForeground#ef4444aa
  • editorOverviewRuler.incomingContentForeground#a855f7
  • editorOverviewRuler.infoForeground#00f0ffaa
  • editorOverviewRuler.modifiedForeground#00f0ffaa
  • editorOverviewRuler.selectionHighlightForeground#ffca80
  • editorOverviewRuler.warningForeground#ffff80aa
  • editorOverviewRuler.wordHighlightForeground#00f0ff
  • editorOverviewRuler.wordHighlightStrongForeground#10b981
  • editorRuler.foreground#eef2ff1a
  • editorSuggestWidget.background#0f0b18
  • editorSuggestWidget.border#ff007f30
  • editorSuggestWidget.foreground#eef2ff
  • editorSuggestWidget.selectedBackground#ff007f30
  • editorWarning.foreground#ffff80
  • editorWhitespace.foreground#eef2ff1a
  • editorWidget.background#0f0b18
  • editorWidget.border#ff007f30
  • errorForeground#ef4444
  • extensionButton.prominentBackground#a855f7
  • extensionButton.prominentForeground#140f1f
  • extensionButton.prominentHoverBackground#ff007f
  • focusBorder#ff007f30
  • foreground#eef2ff
  • gitDecoration.conflictingResourceForeground#ffca80
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#7b6a9e
  • gitDecoration.modifiedResourceForeground#00f0ff
  • gitDecoration.untrackedResourceForeground#10b981
  • inlineChat.regionHighlight#221935
  • input.background#140f1f
  • input.border#ff007f30
  • input.foreground#eef2ff
  • input.placeholderForeground#7b6a9e
  • inputOption.activeBorder#ff007f
  • inputValidation.errorBorder#ef4444
  • inputValidation.infoBorder#ff007f
  • inputValidation.warningBorder#ffff80
  • list.activeSelectionBackground#ff007f30
  • list.activeSelectionForeground#eef2ff
  • list.dropBackground#ff007f30
  • list.errorForeground#ef4444
  • list.focusBackground#ff007f30a0
  • list.highlightForeground#00f0ff
  • list.hoverBackground#221935
  • list.inactiveSelectionBackground#221935
  • list.warningForeground#ffff80
  • listFilterWidget.background#0f0b18
  • listFilterWidget.noMatchesOutline#ef4444
  • listFilterWidget.outline#ff007f30
  • menu.background#0f0b18
  • menu.foreground#eef2ff
  • menu.separatorBackground#ff007f30
  • menubar.selectionBackground#221935
  • merge.currentHeaderBackground#10b98140
  • merge.incomingHeaderBackground#a855f740
  • panel.background#140f1f
  • panel.border#0a0710
  • panelTitle.activeBorder#ff007f
  • panelTitle.activeForeground#eef2ff
  • panelTitle.inactiveForeground#7b6a9e
  • peekView.border#ff007f30
  • peekViewEditor.background#140f1f
  • peekViewEditor.matchHighlightBackground#ffff8040
  • peekViewResult.background#0f0b18
  • peekViewResult.fileForeground#eef2ff
  • peekViewResult.lineForeground#eef2ff
  • peekViewResult.matchHighlightBackground#ffff8040
  • peekViewResult.selectionBackground#ff007f30
  • peekViewResult.selectionForeground#eef2ff
  • peekViewTitle.background#0a0710
  • peekViewTitleDescription.foreground#7b6a9e
  • peekViewTitleLabel.foreground#eef2ff
  • pickerGroup.border#ff007f30
  • pickerGroup.foreground#00f0ff
  • progressBar.background#ff007f
  • scrollbar.shadow#0a071033
  • selection.background#ff007f30
  • settings.checkboxBackground#0f0b18
  • settings.checkboxBorder#ff007f30
  • settings.checkboxForeground#eef2ff
  • settings.dropdownBackground#0f0b18
  • settings.dropdownBorder#ff007f30
  • settings.dropdownForeground#eef2ff
  • settings.headerForeground#eef2ff
  • settings.modifiedItemIndicator#ffca80
  • settings.numberInputBackground#140f1f
  • settings.numberInputBorder#ff007f30
  • settings.numberInputForeground#eef2ff
  • settings.textInputBackground#140f1f
  • settings.textInputBorder#ff007f30
  • settings.textInputForeground#eef2ff
  • sideBar.background#0f0b18
  • sideBar.border#0a0710
  • sideBarSectionHeader.background#0f0b18
  • sideBarSectionHeader.border#0f0b18
  • sideBarSectionHeader.foreground#eef2ff
  • sideBarTitle.foreground#eef2ff
  • statusBar.background#0a0710
  • statusBar.border#0a0710
  • statusBar.debuggingBackground#ef4444
  • statusBar.debuggingForeground#140f1f
  • statusBar.foreground#eef2ff
  • statusBar.noFolderBackground#0a0710
  • statusBar.noFolderForeground#eef2ff
  • statusBarItem.prominentBackground#ef4444
  • statusBarItem.prominentHoverBackground#ffca80
  • statusBarItem.remoteBackground#ff007f
  • statusBarItem.remoteForeground#140f1f
  • tab.activeBackground#140f1f
  • tab.activeBorder#ff007f
  • tab.activeForeground#eef2ff
  • tab.border#0a0710
  • tab.hoverBackground#221935
  • tab.hoverBorder#ff007f50
  • tab.inactiveBackground#0f0b18
  • tab.inactiveForeground#7b6a9e
  • terminal.ansiBlack#140f1f
  • terminal.ansiBlue#a855f7
  • terminal.ansiBrightBlack#7b6a9e
  • terminal.ansiBrightBlue#a855f7
  • terminal.ansiBrightCyan#00f0ff
  • terminal.ansiBrightGreen#10b981
  • terminal.ansiBrightMagenta#ff007f
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#eef2ff
  • terminal.ansiBrightYellow#ffff80
  • terminal.ansiCyan#00f0ff
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#ff007f
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#eef2ff
  • terminal.ansiYellow#ffff80
  • terminal.background#140f1f
  • terminal.border#0a0710
  • terminal.foreground#eef2ff
  • titleBar.activeBackground#0a0710
  • titleBar.activeForeground#eef2ff
  • titleBar.border#0a0710
  • titleBar.inactiveBackground#0a0710
  • titleBar.inactiveForeground#7b6a9e
  • walkThrough.embeddedEditorBackground#140f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a855f7
meta.diff, meta.diff.header#7b6a9e
markup.inserted#10b981
markup.deleted#ef4444
markup.changed#ffca80
invalid.deprecated#eef2ffunderline italic
entity.name.filename#ffff80
markup.error#ef4444
markup.bold#ffca80bold
markup.heading#a855f7bold
markup.italic#ffff80italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00f0ff
markup.inline.raw, markup.raw.restructuredtext#10b981
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff007f
entity.name.directive.restructuredtext, markup.quote#ffff80italic
meta.separator.markdown#7b6a9e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#10b981
punctuation.definition.constant.restructuredtext#a855f7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a855f7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#eef2ff
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff80
entity.name.type.class, entity.name.class#00f0ff
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#a855f7italic
entity.other.inherited-class#00f0ffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b6a9e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff007f
comment.block.documentation entity.name.type#00f0ffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00f0ff
comment.block.documentation variable#ffca80italic
constant, variable.other.constant#a855f7
constant.character.escape, constant.character.string.escape, constant.regexp#ff007f
entity.name.tag#ff007f
entity.other.attribute-name.parent-selector#ff007f
entity.other.attribute-name#10b981italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#10b981
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ffca80italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#10b981italic
meta.decorator variable.other.object#10b981
keyword, punctuation.definition.keyword#ff007f
keyword.control.new, keyword.operator.newbold
meta.selector#ff007f
support#00f0ffitalic
support.function.magic, support.variable, variable.other.predefined#a855f7
support.function, support.type.property-name
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ff007f
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#eef2ff
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#ff007f
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00f0ff
constant.other.date, constant.other.timestamp#ffca80
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff007f
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#00f0ffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffca80
storage.modifier#ff007f
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff80
punctuation.definition.group.capture.regexp#ff007f
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ef4444
punctuation.definition.character-class.regexp#00f0ff
punctuation.definition.group.regexp#ffca80
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ef4444
meta.assertion.look-ahead.regexp#10b981
string#ffff80
punctuation.definition.string.begin, punctuation.definition.string.end#ffff80ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#00f0ffee
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#7b6a9e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#eef2ff
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffca80italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#eef2ff
meta.selectionset.graphql variable#ffff80
meta.selectionset.graphql meta.arguments variable#eef2ff
entity.name.fragment.graphql, variable.fragment.graphql#00f0ff
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#eef2ff
source.shell variable.other#a855f7
support.constant#a855f7
meta.scope.prerequisites.makefile#ffff80
meta.attribute-selector.scss#ffff80
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#eef2ff
meta.preprocessor.haskell#7b6a9e
log.error#ef4444bold
log.warning#ffff80bold
comment, invalid, keyword, entity.other.attribute-nameitalic
comment, punctuation.definition.commentitalic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.pythonitalic
stringitalic
storage.type
entity.name.class, meta.class.extends variable.other.readwrite
variable.parameter
variable.parameter.function.language.python
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-nameitalic
python.builtin.support.function
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin
meta.type.support.inheritance.python
support.constant
support.type, support.class
support.other.variable
css.property-list.property-name
markup.bold.markdownbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
comment, punctuation.definition.commentitalic
Keyword, Storageitalic
keyword.controlitalic
entity.other.attribute-name#10b981italic
entity.name.method.jsitalic
variable.languageitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-nameitalic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.jsitalic
source.js constant.other.object.key.js string.unquoted.label.jsitalic
markup.italicitalic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold stringbold
markup.quoteitalic
variable.otheritalic
entity.name.function#10b981
support.function#10b981italic
string#ffff80
Dracula Pro (Halloween) by Hasibur R - VS Code Theme