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#12131a
  • activityBar.activeBorder#ff4d9d
  • activityBar.background#0e0f14
  • activityBar.foreground#f6f6f7
  • activityBar.inactiveForeground#7a7a89
  • activityBarBadge.background#ff4d9d
  • activityBarBadge.foreground#12131a
  • badge.background#5e6472
  • badge.foreground#f6f6f7
  • breadcrumb.activeSelectionForeground#f6f6f7
  • breadcrumb.background#12131a
  • breadcrumb.focusForeground#f6f6f7
  • breadcrumb.foreground#7a7a89
  • breadcrumbPicker.background#181923
  • button.background#c77dff
  • button.foreground#12131a
  • button.hoverBackground#ff4d9d
  • button.secondaryBackground#5e6472
  • button.secondaryForeground#f6f6f7
  • button.secondaryHoverBackground#20222e
  • debugToolBar.background#181923
  • diffEditor.insertedTextBackground#8aff8020
  • diffEditor.removedTextBackground#ff958040
  • dropdown.background#181923
  • dropdown.border#5e6472
  • dropdown.foreground#f6f6f7
  • editor.background#12131a
  • editor.findMatchBackground#ffff8060
  • editor.findMatchHighlightBackground#f6f6f730
  • editor.findRangeHighlightBackground#5e647260
  • editor.foldBackground#12131a
  • editor.foreground#f6f6f7
  • editor.hoverHighlightBackground#80ffea30
  • editor.lineHighlightBackground#20222e
  • editor.lineHighlightBorder#12131a
  • editor.rangeHighlightBackground#c77dff15
  • editor.selectionBackground#5e6472
  • editor.selectionHighlightBackground#5e6472b0
  • editor.snippetFinalTabstopHighlightBackground#12131a
  • editor.snippetFinalTabstopHighlightBorder#8aff80
  • editor.snippetTabstopHighlightBackground#12131a
  • editor.snippetTabstopHighlightBorder#5e6472
  • editor.wordHighlightBackground#80ffea30
  • editor.wordHighlightStrongBackground#8aff8030
  • editorBracketHighlight.foreground1#f6f6f7
  • editorBracketHighlight.foreground2#ff4d9d
  • editorBracketHighlight.foreground3#80ffea
  • editorBracketHighlight.foreground4#8aff80
  • editorBracketHighlight.foreground5#c77dff
  • editorBracketHighlight.foreground6#ffca80
  • editorBracketHighlight.unexpectedBracket.foreground#ff9580
  • editorCodeLens.foreground#7a7a89
  • editorCursor.foreground#ff4d9d
  • editorError.foreground#ff9580
  • editorGroup.border#0e0f14
  • editorGroup.dropBackground#5e647270
  • editorGroupHeader.noTabsBackground#181923
  • editorGroupHeader.tabsBackground#181923
  • editorGroupHeader.tabsBorder#0e0f14
  • editorGutter.addedBackground#8aff80cc
  • editorGutter.deletedBackground#ff9580cc
  • editorGutter.modifiedBackground#80ffeacc
  • editorHoverWidget.background#181923
  • editorHoverWidget.border#5e6472
  • editorLineNumber.activeForeground#ff4d9d
  • editorLineNumber.foreground#7a7a89
  • editorLink.activeForeground#80ffea
  • editorMarkerNavigation.background#181923
  • editorOverviewRuler.addedForeground#8aff80aa
  • editorOverviewRuler.border#0e0f14
  • editorOverviewRuler.currentContentForeground#8aff80
  • editorOverviewRuler.deletedForeground#ff9580aa
  • editorOverviewRuler.errorForeground#ff9580aa
  • editorOverviewRuler.incomingContentForeground#c77dff
  • editorOverviewRuler.infoForeground#80ffeaaa
  • editorOverviewRuler.modifiedForeground#80ffeaaa
  • editorOverviewRuler.selectionHighlightForeground#ffca80
  • editorOverviewRuler.warningForeground#ffff80aa
  • editorOverviewRuler.wordHighlightForeground#80ffea
  • editorOverviewRuler.wordHighlightStrongForeground#8aff80
  • editorRuler.foreground#f6f6f71a
  • editorSuggestWidget.background#181923
  • editorSuggestWidget.border#5e6472
  • editorSuggestWidget.foreground#f6f6f7
  • editorSuggestWidget.selectedBackground#5e6472
  • editorWarning.foreground#ffff80
  • editorWhitespace.foreground#f6f6f71a
  • editorWidget.background#181923
  • editorWidget.border#5e6472
  • errorForeground#ff9580
  • extensionButton.prominentBackground#c77dff
  • extensionButton.prominentForeground#12131a
  • extensionButton.prominentHoverBackground#ff4d9d
  • focusBorder#5e6472
  • foreground#f6f6f7
  • gitDecoration.conflictingResourceForeground#ffca80
  • gitDecoration.deletedResourceForeground#ff9580
  • gitDecoration.ignoredResourceForeground#7a7a89
  • gitDecoration.modifiedResourceForeground#80ffea
  • gitDecoration.untrackedResourceForeground#8aff80
  • inlineChat.regionHighlight#20222e
  • input.background#12131a
  • input.border#5e6472
  • input.foreground#f6f6f7
  • input.placeholderForeground#7a7a89
  • inputOption.activeBorder#ff4d9d
  • inputValidation.errorBorder#ff9580
  • inputValidation.infoBorder#ff4d9d
  • inputValidation.warningBorder#ffff80
  • list.activeSelectionBackground#5e6472
  • list.activeSelectionForeground#f6f6f7
  • list.dropBackground#5e6472
  • list.errorForeground#ff9580
  • list.focusBackground#5e6472a0
  • list.highlightForeground#80ffea
  • list.hoverBackground#20222e
  • list.inactiveSelectionBackground#20222e
  • list.warningForeground#ffff80
  • listFilterWidget.background#181923
  • listFilterWidget.noMatchesOutline#ff9580
  • listFilterWidget.outline#5e6472
  • menu.background#181923
  • menu.foreground#f6f6f7
  • menu.separatorBackground#5e6472
  • menubar.selectionBackground#20222e
  • merge.currentHeaderBackground#8aff8040
  • merge.incomingHeaderBackground#c77dff40
  • panel.background#12131a
  • panel.border#0e0f14
  • panelTitle.activeBorder#ff4d9d
  • panelTitle.activeForeground#f6f6f7
  • panelTitle.inactiveForeground#7a7a89
  • peekView.border#5e6472
  • peekViewEditor.background#12131a
  • peekViewEditor.matchHighlightBackground#ffff8040
  • peekViewResult.background#181923
  • peekViewResult.fileForeground#f6f6f7
  • peekViewResult.lineForeground#f6f6f7
  • peekViewResult.matchHighlightBackground#ffff8040
  • peekViewResult.selectionBackground#5e6472
  • peekViewResult.selectionForeground#f6f6f7
  • peekViewTitle.background#0e0f14
  • peekViewTitleDescription.foreground#7a7a89
  • peekViewTitleLabel.foreground#f6f6f7
  • pickerGroup.border#5e6472
  • pickerGroup.foreground#80ffea
  • progressBar.background#ff4d9d
  • scrollbar.shadow#0e0f1433
  • selection.background#5e6472
  • settings.checkboxBackground#181923
  • settings.checkboxBorder#5e6472
  • settings.checkboxForeground#f6f6f7
  • settings.dropdownBackground#181923
  • settings.dropdownBorder#5e6472
  • settings.dropdownForeground#f6f6f7
  • settings.headerForeground#f6f6f7
  • settings.modifiedItemIndicator#ffca80
  • settings.numberInputBackground#12131a
  • settings.numberInputBorder#5e6472
  • settings.numberInputForeground#f6f6f7
  • settings.textInputBackground#12131a
  • settings.textInputBorder#5e6472
  • settings.textInputForeground#f6f6f7
  • sideBar.background#181923
  • sideBar.border#0e0f14
  • sideBarSectionHeader.background#181923
  • sideBarSectionHeader.border#181923
  • sideBarSectionHeader.foreground#f6f6f7
  • sideBarTitle.foreground#f6f6f7
  • statusBar.background#0e0f14
  • statusBar.border#0e0f14
  • statusBar.debuggingBackground#ff9580
  • statusBar.debuggingForeground#12131a
  • statusBar.foreground#f6f6f7
  • statusBar.noFolderBackground#0e0f14
  • statusBar.noFolderForeground#f6f6f7
  • statusBarItem.prominentBackground#ff9580
  • statusBarItem.prominentHoverBackground#ffca80
  • statusBarItem.remoteBackground#ff4d9d
  • statusBarItem.remoteForeground#12131a
  • tab.activeBackground#12131a
  • tab.activeBorder#ff4d9d
  • tab.activeForeground#f6f6f7
  • tab.border#0e0f14
  • tab.hoverBackground#20222e
  • tab.hoverBorder#ff4d9d50
  • tab.inactiveBackground#181923
  • tab.inactiveForeground#7a7a89
  • terminal.ansiBlack#12131a
  • terminal.ansiBlue#c77dff
  • terminal.ansiBrightBlack#7a7a89
  • terminal.ansiBrightBlue#c77dff
  • terminal.ansiBrightCyan#80ffea
  • terminal.ansiBrightGreen#8aff80
  • terminal.ansiBrightMagenta#ff4d9d
  • terminal.ansiBrightRed#ff9580
  • terminal.ansiBrightWhite#f6f6f7
  • terminal.ansiBrightYellow#ffff80
  • terminal.ansiCyan#80ffea
  • terminal.ansiGreen#8aff80
  • terminal.ansiMagenta#ff4d9d
  • terminal.ansiRed#ff9580
  • terminal.ansiWhite#f6f6f7
  • terminal.ansiYellow#ffff80
  • terminal.background#12131a
  • terminal.border#0e0f14
  • terminal.foreground#f6f6f7
  • titleBar.activeBackground#0e0f14
  • titleBar.activeForeground#f6f6f7
  • titleBar.border#0e0f14
  • titleBar.inactiveBackground#0e0f14
  • titleBar.inactiveForeground#7a7a89
  • walkThrough.embeddedEditorBackground#12131a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c77dff
meta.diff, meta.diff.header#7a7a89
markup.inserted#8aff80
markup.deleted#ff9580
markup.changed#ffca80
invalid.deprecated#f6f6f7underline italic
entity.name.filename#ffff80
markup.error#ff9580
markup.bold#ffca80bold
markup.heading#c77dffbold
markup.italic#ffff80italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#80ffea
markup.inline.raw, markup.raw.restructuredtext#8aff80
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff4d9d
entity.name.directive.restructuredtext, markup.quote#ffff80italic
meta.separator.markdown#7a7a89
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8aff80
punctuation.definition.constant.restructuredtext#c77dff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c77dff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f7
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#80ffea
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#c77dffitalic
entity.other.inherited-class#80ffeaitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7a7a89
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff4d9d
comment.block.documentation entity.name.type#80ffeaitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#80ffea
comment.block.documentation variable#ffca80italic
constant, variable.other.constant#c77dff
constant.character.escape, constant.character.string.escape, constant.regexp#ff4d9d
entity.name.tag#ff4d9d
entity.other.attribute-name.parent-selector#ff4d9d
entity.other.attribute-name#8aff80italic
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#8aff80
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#8aff80italic
meta.decorator variable.other.object#8aff80
keyword, punctuation.definition.keyword#ff4d9d
keyword.control.new, keyword.operator.newbold
meta.selector#ff4d9d
support#80ffeaitalic
support.function.magic, support.variable, variable.other.predefined#c77dff
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#ff4d9d
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#f6f6f7
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#ff4d9d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#80ffea
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#ff4d9d
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#80ffeaitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffca80
storage.modifier#ff4d9d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff80
punctuation.definition.group.capture.regexp#ff4d9d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff9580
punctuation.definition.character-class.regexp#80ffea
punctuation.definition.group.regexp#ffca80
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff9580
meta.assertion.look-ahead.regexp#8aff80
string#ffff80
punctuation.definition.string.begin, punctuation.definition.string.end#ffff80ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#80ffeaee
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#7a7a89
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f6f6f7
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#f6f6f7
meta.selectionset.graphql variable#ffff80
meta.selectionset.graphql meta.arguments variable#f6f6f7
entity.name.fragment.graphql, variable.fragment.graphql#80ffea
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#f6f6f7
source.shell variable.other#c77dff
support.constant#c77dff
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#f6f6f7
meta.preprocessor.haskell#7a7a89
log.error#ff9580bold
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#8aff80italic
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#8aff80
support.function#8aff80italic
string#ffff80
Dracula Pro (Halloween) by Hasibur R - VS Code Theme