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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ab47bc
meta.diff, meta.diff.header#5c647b
markup.inserted#10b981
markup.deleted#ef4444
markup.changed#f97316
invalid.deprecated#e0e6f0underline italic
entity.name.filename#facc15
markup.error#ef4444
markup.bold#f97316bold
markup.heading#ab47bcbold
markup.italic#facc15italic
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#f43f5e
entity.name.directive.restructuredtext, markup.quote#facc15italic
meta.separator.markdown#5c647b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#10b981
punctuation.definition.constant.restructuredtext#ab47bc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ab47bc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e0e6f0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#facc15
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#ab47bcitalic
entity.other.inherited-class#00f0ffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5c647b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f43f5e
comment.block.documentation entity.name.type#00f0ffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00f0ff
comment.block.documentation variable#f97316italic
constant, variable.other.constant#ab47bc
constant.character.escape, constant.character.string.escape, constant.regexp#f43f5e
entity.name.tag#f43f5e
entity.other.attribute-name.parent-selector#f43f5e
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#f97316italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#10b981italic
meta.decorator variable.other.object#10b981
keyword, punctuation.definition.keyword#f43f5e
keyword.control.new, keyword.operator.newbold
meta.selector#f43f5e
support#00f0ffitalic
support.function.magic, support.variable, variable.other.predefined#ab47bc
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#f43f5e
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#e0e6f0
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#f43f5e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00f0ff
constant.other.date, constant.other.timestamp#f97316
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f43f5e
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#f97316
storage.modifier#f43f5e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#facc15
punctuation.definition.group.capture.regexp#f43f5e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ef4444
punctuation.definition.character-class.regexp#00f0ff
punctuation.definition.group.regexp#f97316
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ef4444
meta.assertion.look-ahead.regexp#10b981
string#facc15
punctuation.definition.string.begin, punctuation.definition.string.end#facc15ee
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#5c647b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e0e6f0
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f97316italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e0e6f0
meta.selectionset.graphql variable#facc15
meta.selectionset.graphql meta.arguments variable#e0e6f0
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#e0e6f0
source.shell variable.other#ab47bc
support.constant#ab47bc
meta.scope.prerequisites.makefile#facc15
meta.attribute-selector.scss#facc15
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e0e6f0
meta.preprocessor.haskell#5c647b
log.error#ef4444bold
log.warning#facc15bold
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#facc15
Dracula Pro (Halloween) by Hasibur R - VS Code Theme