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#1a1b26
  • activityBar.activeBorder#bb9af3
  • activityBar.background#16161e
  • activityBar.foreground#a9b1d6
  • activityBar.inactiveForeground#565f89
  • activityBarBadge.background#ff007c
  • activityBarBadge.foreground#1a1b26
  • badge.background#2f3549
  • badge.foreground#a9b1d6
  • breadcrumb.activeSelectionForeground#a9b1d6
  • breadcrumb.background#1a1b26
  • breadcrumb.focusForeground#a9b1d6
  • breadcrumb.foreground#565f89
  • breadcrumbPicker.background#16161e
  • button.background#bb9af3
  • button.foreground#1a1b26
  • button.hoverBackground#ff007c
  • button.secondaryBackground#2f3549
  • button.secondaryForeground#a9b1d6
  • button.secondaryHoverBackground#20212e
  • debugToolBar.background#16161e
  • diffEditor.insertedTextBackground#9ece6a20
  • diffEditor.removedTextBackground#f7768e40
  • dropdown.background#16161e
  • dropdown.border#2f3549
  • dropdown.foreground#a9b1d6
  • editor.background#1a1b26
  • editor.findMatchBackground#e0af6860
  • editor.findMatchHighlightBackground#a9b1d630
  • editor.findRangeHighlightBackground#2f354960
  • editor.foldBackground#1a1b26
  • editor.foreground#a9b1d6
  • editor.hoverHighlightBackground#7dcfff30
  • editor.lineHighlightBackground#20212e
  • editor.lineHighlightBorder#1a1b26
  • editor.rangeHighlightBackground#bb9af315
  • editor.selectionBackground#2f3549
  • editor.selectionHighlightBackground#2f3549b0
  • editor.snippetFinalTabstopHighlightBackground#1a1b26
  • editor.snippetFinalTabstopHighlightBorder#9ece6a
  • editor.snippetTabstopHighlightBackground#1a1b26
  • editor.snippetTabstopHighlightBorder#2f3549
  • editor.wordHighlightBackground#7dcfff30
  • editor.wordHighlightStrongBackground#9ece6a30
  • editorBracketHighlight.foreground1#a9b1d6
  • editorBracketHighlight.foreground2#ff007c
  • editorBracketHighlight.foreground3#7dcfff
  • editorBracketHighlight.foreground4#9ece6a
  • editorBracketHighlight.foreground5#bb9af3
  • editorBracketHighlight.foreground6#ff9e64
  • editorBracketHighlight.unexpectedBracket.foreground#f7768e
  • editorCodeLens.foreground#565f89
  • editorCursor.foreground#bb9af3
  • editorError.foreground#f7768e
  • editorGroup.border#16161e
  • editorGroup.dropBackground#2f354970
  • editorGroupHeader.noTabsBackground#16161e
  • editorGroupHeader.tabsBackground#16161e
  • editorGroupHeader.tabsBorder#16161e
  • editorGutter.addedBackground#9ece6acc
  • editorGutter.deletedBackground#f7768ecc
  • editorGutter.modifiedBackground#7dcfffcc
  • editorHoverWidget.background#16161e
  • editorHoverWidget.border#2f3549
  • editorLineNumber.activeForeground#bb9af3
  • editorLineNumber.foreground#565f89
  • editorLink.activeForeground#7dcfff
  • editorMarkerNavigation.background#16161e
  • editorOverviewRuler.addedForeground#9ece6aaa
  • editorOverviewRuler.border#16161e
  • editorOverviewRuler.currentContentForeground#9ece6a
  • editorOverviewRuler.deletedForeground#f7768eaa
  • editorOverviewRuler.errorForeground#f7768eaa
  • editorOverviewRuler.incomingContentForeground#bb9af3
  • editorOverviewRuler.infoForeground#7dcfffaa
  • editorOverviewRuler.modifiedForeground#7dcfffaa
  • editorOverviewRuler.selectionHighlightForeground#ff9e64
  • editorOverviewRuler.warningForeground#e0af68aa
  • editorOverviewRuler.wordHighlightForeground#7dcfff
  • editorOverviewRuler.wordHighlightStrongForeground#9ece6a
  • editorRuler.foreground#a9b1d61a
  • editorSuggestWidget.background#16161e
  • editorSuggestWidget.border#2f3549
  • editorSuggestWidget.foreground#a9b1d6
  • editorSuggestWidget.selectedBackground#2f3549
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#a9b1d61a
  • editorWidget.background#16161e
  • editorWidget.border#2f3549
  • errorForeground#f7768e
  • extensionButton.prominentBackground#bb9af3
  • extensionButton.prominentForeground#1a1b26
  • extensionButton.prominentHoverBackground#ff007c
  • focusBorder#2f3549
  • foreground#a9b1d6
  • gitDecoration.conflictingResourceForeground#ff9e64
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#7dcfff
  • gitDecoration.untrackedResourceForeground#9ece6a
  • inlineChat.regionHighlight#20212e
  • input.background#1a1b26
  • input.border#2f3549
  • input.foreground#a9b1d6
  • input.placeholderForeground#565f89
  • inputOption.activeBorder#bb9af3
  • inputValidation.errorBorder#f7768e
  • inputValidation.infoBorder#ff007c
  • inputValidation.warningBorder#e0af68
  • list.activeSelectionBackground#2f3549
  • list.activeSelectionForeground#a9b1d6
  • list.dropBackground#2f3549
  • list.errorForeground#f7768e
  • list.focusBackground#2f3549a0
  • list.highlightForeground#7dcfff
  • list.hoverBackground#20212e
  • list.inactiveSelectionBackground#20212e
  • list.warningForeground#e0af68
  • listFilterWidget.background#16161e
  • listFilterWidget.noMatchesOutline#f7768e
  • listFilterWidget.outline#2f3549
  • menu.background#16161e
  • menu.foreground#a9b1d6
  • menu.separatorBackground#2f3549
  • menubar.selectionBackground#20212e
  • merge.currentHeaderBackground#9ece6a40
  • merge.incomingHeaderBackground#bb9af340
  • panel.background#1a1b26
  • panel.border#16161e
  • panelTitle.activeBorder#bb9af3
  • panelTitle.activeForeground#a9b1d6
  • panelTitle.inactiveForeground#565f89
  • peekView.border#2f3549
  • peekViewEditor.background#1a1b26
  • peekViewEditor.matchHighlightBackground#e0af6840
  • peekViewResult.background#16161e
  • peekViewResult.fileForeground#a9b1d6
  • peekViewResult.lineForeground#a9b1d6
  • peekViewResult.matchHighlightBackground#e0af6840
  • peekViewResult.selectionBackground#2f3549
  • peekViewResult.selectionForeground#a9b1d6
  • peekViewTitle.background#16161e
  • peekViewTitleDescription.foreground#565f89
  • peekViewTitleLabel.foreground#a9b1d6
  • pickerGroup.border#2f3549
  • pickerGroup.foreground#7dcfff
  • progressBar.background#bb9af3
  • scrollbar.shadow#16161e33
  • selection.background#2f3549
  • settings.checkboxBackground#16161e
  • settings.checkboxBorder#2f3549
  • settings.checkboxForeground#a9b1d6
  • settings.dropdownBackground#16161e
  • settings.dropdownBorder#2f3549
  • settings.dropdownForeground#a9b1d6
  • settings.headerForeground#a9b1d6
  • settings.modifiedItemIndicator#ff9e64
  • settings.numberInputBackground#1a1b26
  • settings.numberInputBorder#2f3549
  • settings.numberInputForeground#a9b1d6
  • settings.textInputBackground#1a1b26
  • settings.textInputBorder#2f3549
  • settings.textInputForeground#a9b1d6
  • sideBar.background#16161e
  • sideBar.border#16161e
  • sideBarSectionHeader.background#16161e
  • sideBarSectionHeader.border#16161e
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#a9b1d6
  • statusBar.background#16161e
  • statusBar.border#16161e
  • statusBar.debuggingBackground#f7768e
  • statusBar.debuggingForeground#1a1b26
  • statusBar.foreground#a9b1d6
  • statusBar.noFolderBackground#16161e
  • statusBar.noFolderForeground#a9b1d6
  • statusBarItem.prominentBackground#f7768e
  • statusBarItem.prominentHoverBackground#ff9e64
  • statusBarItem.remoteBackground#bb9af3
  • statusBarItem.remoteForeground#1a1b26
  • tab.activeBackground#1a1b26
  • tab.activeBorder#bb9af3
  • tab.activeForeground#a9b1d6
  • tab.border#16161e
  • tab.hoverBackground#20212e
  • tab.hoverBorder#bb9af350
  • tab.inactiveBackground#16161e
  • tab.inactiveForeground#565f89
  • terminal.ansiBlack#1a1b26
  • terminal.ansiBlue#bb9af3
  • terminal.ansiBrightBlack#565f89
  • terminal.ansiBrightBlue#bb9af3
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#ff007c
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#a9b1d6
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#ff007c
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#a9b1d6
  • terminal.ansiYellow#e0af68
  • terminal.background#1a1b26
  • terminal.border#16161e
  • terminal.foreground#a9b1d6
  • titleBar.activeBackground#16161e
  • titleBar.activeForeground#a9b1d6
  • titleBar.border#16161e
  • titleBar.inactiveBackground#16161e
  • titleBar.inactiveForeground#565f89
  • walkThrough.embeddedEditorBackground#1a1b26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#bb9af3
meta.diff, meta.diff.header#565f89
markup.inserted#9ece6a
markup.deleted#f7768e
markup.changed#ff9e64
invalid.deprecated#a9b1d6underline italic
entity.name.filename#e0af68
markup.error#f7768e
markup.bold#ff9e64bold
markup.heading#bb9af3bold
markup.italic#e0af68italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7dcfff
markup.inline.raw, markup.raw.restructuredtext#9ece6a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff007c
entity.name.directive.restructuredtext, markup.quote#e0af68italic
meta.separator.markdown#565f89
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#9ece6a
punctuation.definition.constant.restructuredtext#bb9af3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bb9af3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a9b1d6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e0af68
entity.name.type.class, entity.name.class#7dcfff
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#bb9af3italic
entity.other.inherited-class#7dcfffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#565f89
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff007c
comment.block.documentation entity.name.type#7dcfffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#7dcfff
comment.block.documentation variable#ff9e64italic
constant, variable.other.constant#bb9af3
constant.character.escape, constant.character.string.escape, constant.regexp#ff007c
entity.name.tag#ff007c
entity.other.attribute-name.parent-selector#ff007c
entity.other.attribute-name#9ece6aitalic
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#9ece6a
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#ff9e64italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9ece6aitalic
meta.decorator variable.other.object#9ece6a
keyword, punctuation.definition.keyword#ff007c
keyword.control.new, keyword.operator.newbold
meta.selector#ff007c
support#7dcfffitalic
support.function.magic, support.variable, variable.other.predefined#bb9af3
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#ff007c
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#a9b1d6
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#ff007c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7dcfff
constant.other.date, constant.other.timestamp#ff9e64
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff007c
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#7dcfffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9e64
storage.modifier#ff007c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e0af68
punctuation.definition.group.capture.regexp#ff007c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f7768e
punctuation.definition.character-class.regexp#7dcfff
punctuation.definition.group.regexp#ff9e64
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f7768e
meta.assertion.look-ahead.regexp#9ece6a
string#e0af68
punctuation.definition.string.begin, punctuation.definition.string.end#e0af68ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7dcfffee
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#565f89
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a9b1d6
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ff9e64italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a9b1d6
meta.selectionset.graphql variable#e0af68
meta.selectionset.graphql meta.arguments variable#a9b1d6
entity.name.fragment.graphql, variable.fragment.graphql#7dcfff
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#a9b1d6
source.shell variable.other#bb9af3
support.constant#bb9af3
meta.scope.prerequisites.makefile#e0af68
meta.attribute-selector.scss#e0af68
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a9b1d6
meta.preprocessor.haskell#565f89
log.error#f7768ebold
log.warning#e0af68bold
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#9ece6aitalic
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#9ece6a
support.function#9ece6aitalic
string#e0af68
Dracula Pro (Halloween) by Hasibur R - VS Code Theme