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#2e3440
  • activityBar.activeBorder#88c0d0
  • activityBar.background#242933
  • activityBar.foreground#d8dee9
  • activityBar.inactiveForeground#4c566a
  • activityBarBadge.background#b48ead
  • activityBarBadge.foreground#2e3440
  • badge.background#434c5e
  • badge.foreground#d8dee9
  • breadcrumb.activeSelectionForeground#d8dee9
  • breadcrumb.background#2e3440
  • breadcrumb.focusForeground#d8dee9
  • breadcrumb.foreground#4c566a
  • breadcrumbPicker.background#242933
  • button.background#b48ead
  • button.foreground#2e3440
  • button.hoverBackground#b48ead
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#d8dee9
  • button.secondaryHoverBackground#3b4252
  • debugToolBar.background#242933
  • diffEditor.insertedTextBackground#a3be8c20
  • diffEditor.removedTextBackground#bf616a40
  • dropdown.background#242933
  • dropdown.border#434c5e
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#ebcb8b60
  • editor.findMatchHighlightBackground#d8dee930
  • editor.findRangeHighlightBackground#434c5e60
  • editor.foldBackground#2e3440
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#88c0d030
  • editor.lineHighlightBackground#3b4252
  • editor.lineHighlightBorder#2e3440
  • editor.rangeHighlightBackground#b48ead15
  • editor.selectionBackground#434c5e
  • editor.selectionHighlightBackground#434c5eb0
  • editor.snippetFinalTabstopHighlightBackground#2e3440
  • editor.snippetFinalTabstopHighlightBorder#a3be8c
  • editor.snippetTabstopHighlightBackground#2e3440
  • editor.snippetTabstopHighlightBorder#434c5e
  • editor.wordHighlightBackground#88c0d030
  • editor.wordHighlightStrongBackground#a3be8c30
  • editorBracketHighlight.foreground1#d8dee9
  • editorBracketHighlight.foreground2#b48ead
  • editorBracketHighlight.foreground3#88c0d0
  • editorBracketHighlight.foreground4#a3be8c
  • editorBracketHighlight.foreground5#b48ead
  • editorBracketHighlight.foreground6#d08770
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#88c0d0
  • editorError.foreground#bf616a
  • editorGroup.border#242933
  • editorGroup.dropBackground#434c5e70
  • editorGroupHeader.noTabsBackground#242933
  • editorGroupHeader.tabsBackground#242933
  • editorGroupHeader.tabsBorder#242933
  • editorGutter.addedBackground#a3be8ccc
  • editorGutter.deletedBackground#bf616acc
  • editorGutter.modifiedBackground#88c0d0cc
  • editorHoverWidget.background#242933
  • editorHoverWidget.border#434c5e
  • editorLineNumber.activeForeground#88c0d0
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#242933
  • editorOverviewRuler.addedForeground#a3be8caa
  • editorOverviewRuler.border#242933
  • editorOverviewRuler.currentContentForeground#a3be8c
  • editorOverviewRuler.deletedForeground#bf616aaa
  • editorOverviewRuler.errorForeground#bf616aaa
  • editorOverviewRuler.incomingContentForeground#b48ead
  • editorOverviewRuler.infoForeground#88c0d0aa
  • editorOverviewRuler.modifiedForeground#88c0d0aa
  • editorOverviewRuler.selectionHighlightForeground#d08770
  • editorOverviewRuler.warningForeground#ebcb8baa
  • editorOverviewRuler.wordHighlightForeground#88c0d0
  • editorOverviewRuler.wordHighlightStrongForeground#a3be8c
  • editorRuler.foreground#d8dee91a
  • editorSuggestWidget.background#242933
  • editorSuggestWidget.border#434c5e
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.selectedBackground#434c5e
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#d8dee91a
  • editorWidget.background#242933
  • editorWidget.border#434c5e
  • errorForeground#bf616a
  • extensionButton.prominentBackground#b48ead
  • extensionButton.prominentForeground#2e3440
  • extensionButton.prominentHoverBackground#b48ead
  • focusBorder#434c5e
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#d08770
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#4c566a
  • gitDecoration.modifiedResourceForeground#88c0d0
  • gitDecoration.untrackedResourceForeground#a3be8c
  • inlineChat.regionHighlight#3b4252
  • input.background#2e3440
  • input.border#434c5e
  • input.foreground#d8dee9
  • input.placeholderForeground#4c566a
  • inputOption.activeBorder#88c0d0
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBorder#b48ead
  • inputValidation.warningBorder#ebcb8b
  • list.activeSelectionBackground#434c5e
  • list.activeSelectionForeground#d8dee9
  • list.dropBackground#434c5e
  • list.errorForeground#bf616a
  • list.focusBackground#434c5ea0
  • list.highlightForeground#88c0d0
  • list.hoverBackground#3b4252
  • list.inactiveSelectionBackground#3b4252
  • list.warningForeground#ebcb8b
  • listFilterWidget.background#242933
  • listFilterWidget.noMatchesOutline#bf616a
  • listFilterWidget.outline#434c5e
  • menu.background#242933
  • menu.foreground#d8dee9
  • menu.separatorBackground#434c5e
  • menubar.selectionBackground#3b4252
  • merge.currentHeaderBackground#a3be8c40
  • merge.incomingHeaderBackground#b48ead40
  • panel.background#2e3440
  • panel.border#242933
  • panelTitle.activeBorder#88c0d0
  • panelTitle.activeForeground#d8dee9
  • panelTitle.inactiveForeground#4c566a
  • peekView.border#434c5e
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#ebcb8b40
  • peekViewResult.background#242933
  • peekViewResult.fileForeground#d8dee9
  • peekViewResult.lineForeground#d8dee9
  • peekViewResult.matchHighlightBackground#ebcb8b40
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#242933
  • peekViewTitleDescription.foreground#4c566a
  • peekViewTitleLabel.foreground#d8dee9
  • pickerGroup.border#434c5e
  • pickerGroup.foreground#88c0d0
  • progressBar.background#88c0d0
  • scrollbar.shadow#24293333
  • selection.background#434c5e
  • settings.checkboxBackground#242933
  • settings.checkboxBorder#434c5e
  • settings.checkboxForeground#d8dee9
  • settings.dropdownBackground#242933
  • settings.dropdownBorder#434c5e
  • settings.dropdownForeground#d8dee9
  • settings.headerForeground#d8dee9
  • settings.modifiedItemIndicator#d08770
  • settings.numberInputBackground#2e3440
  • settings.numberInputBorder#434c5e
  • settings.numberInputForeground#d8dee9
  • settings.textInputBackground#2e3440
  • settings.textInputBorder#434c5e
  • settings.textInputForeground#d8dee9
  • sideBar.background#242933
  • sideBar.border#242933
  • sideBarSectionHeader.background#242933
  • sideBarSectionHeader.border#242933
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#242933
  • statusBar.border#242933
  • statusBar.debuggingBackground#bf616a
  • statusBar.debuggingForeground#2e3440
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#242933
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.prominentBackground#bf616a
  • statusBarItem.prominentHoverBackground#d08770
  • statusBarItem.remoteBackground#88c0d0
  • statusBarItem.remoteForeground#2e3440
  • tab.activeBackground#2e3440
  • tab.activeBorder#88c0d0
  • tab.activeForeground#d8dee9
  • tab.border#242933
  • tab.hoverBackground#3b4252
  • tab.hoverBorder#88c0d050
  • tab.inactiveBackground#242933
  • tab.inactiveForeground#4c566a
  • terminal.ansiBlack#2e3440
  • terminal.ansiBlue#b48ead
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#b48ead
  • terminal.ansiBrightCyan#88c0d0
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#d8dee9
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#d8dee9
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.border#242933
  • terminal.foreground#d8dee9
  • titleBar.activeBackground#242933
  • titleBar.activeForeground#d8dee9
  • titleBar.border#242933
  • titleBar.inactiveBackground#242933
  • titleBar.inactiveForeground#4c566a
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#b48ead
meta.diff, meta.diff.header#4c566a
markup.inserted#a3be8c
markup.deleted#bf616a
markup.changed#d08770
invalid.deprecated#d8dee9underline italic
entity.name.filename#ebcb8b
markup.error#bf616a
markup.bold#d08770bold
markup.heading#b48eadbold
markup.italic#ebcb8bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#88c0d0
markup.inline.raw, markup.raw.restructuredtext#a3be8c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b48ead
entity.name.directive.restructuredtext, markup.quote#ebcb8bitalic
meta.separator.markdown#4c566a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a3be8c
punctuation.definition.constant.restructuredtext#b48ead
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b48ead
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d8dee9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ebcb8b
entity.name.type.class, entity.name.class#88c0d0
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#b48eaditalic
entity.other.inherited-class#88c0d0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4c566a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b48ead
comment.block.documentation entity.name.type#88c0d0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#88c0d0
comment.block.documentation variable#d08770italic
constant, variable.other.constant#b48ead
constant.character.escape, constant.character.string.escape, constant.regexp#b48ead
entity.name.tag#b48ead
entity.other.attribute-name.parent-selector#b48ead
entity.other.attribute-name#a3be8citalic
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#a3be8c
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#d08770italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a3be8citalic
meta.decorator variable.other.object#a3be8c
keyword, punctuation.definition.keyword#b48ead
keyword.control.new, keyword.operator.newbold
meta.selector#b48ead
support#88c0d0italic
support.function.magic, support.variable, variable.other.predefined#b48ead
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#b48ead
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#d8dee9
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#b48ead
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#88c0d0
constant.other.date, constant.other.timestamp#d08770
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b48ead
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#88c0d0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d08770
storage.modifier#b48ead
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ebcb8b
punctuation.definition.group.capture.regexp#b48ead
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#bf616a
punctuation.definition.character-class.regexp#88c0d0
punctuation.definition.group.regexp#d08770
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bf616a
meta.assertion.look-ahead.regexp#a3be8c
string#ebcb8b
punctuation.definition.string.begin, punctuation.definition.string.end#ebcb8bee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#88c0d0ee
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#4c566a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d8dee9
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#d08770italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d8dee9
meta.selectionset.graphql variable#ebcb8b
meta.selectionset.graphql meta.arguments variable#d8dee9
entity.name.fragment.graphql, variable.fragment.graphql#88c0d0
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#d8dee9
source.shell variable.other#b48ead
support.constant#b48ead
meta.scope.prerequisites.makefile#ebcb8b
meta.attribute-selector.scss#ebcb8b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d8dee9
meta.preprocessor.haskell#4c566a
log.error#bf616abold
log.warning#ebcb8bbold
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#a3be8citalic
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#a3be8c
support.function#a3be8citalic
string#ebcb8b
Dracula Pro (Halloween) by Hasibur R - VS Code Theme