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
emphasis—italic
strong—bold
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.new—bold
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-name—italic
comment, punctuation.definition.comment—italic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python—italic
string—italic
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-name—italic
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.markdown—bold
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
comment, punctuation.definition.comment—italic
Keyword, Storage—italic
keyword.control—italic
entity.other.attribute-name#a3be8citalic
entity.name.method.js—italic
variable.language—italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name—italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js—italic
source.js constant.other.object.key.js string.unquoted.label.js—italic
markup.italic—italic
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 string—bold
markup.quote—italic
variable.other—italic
entity.name.function#a3be8c—
support.function#a3be8citalic
string#ebcb8b—
Dracula Pro (Halloween) by Hasibur R - VS Code Theme