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#0b090a
  • activityBar.activeBorder#f77f00
  • activityBar.background#0a0b0c
  • activityBar.foreground#f8f9fa
  • activityBar.inactiveForeground#6c757d
  • activityBarBadge.background#e85d04
  • activityBarBadge.foreground#0b090a
  • badge.background#f77f0040
  • badge.foreground#f8f9fa
  • breadcrumb.activeSelectionForeground#f8f9fa
  • breadcrumb.background#0b090a
  • breadcrumb.focusForeground#f8f9fa
  • breadcrumb.foreground#6c757d
  • breadcrumbPicker.background#161a1d
  • button.background#9d4edd
  • button.foreground#0b090a
  • button.hoverBackground#e85d04
  • button.secondaryBackground#f77f0040
  • button.secondaryForeground#f8f9fa
  • button.secondaryHoverBackground#220f06
  • debugToolBar.background#161a1d
  • diffEditor.insertedTextBackground#39ff1420
  • diffEditor.removedTextBackground#d9042940
  • dropdown.background#161a1d
  • dropdown.border#f77f0040
  • dropdown.foreground#f8f9fa
  • editor.background#0b090a
  • editor.findMatchBackground#ffff8060
  • editor.findMatchHighlightBackground#f8f9fa30
  • editor.findRangeHighlightBackground#f77f004060
  • editor.foldBackground#0b090a
  • editor.foreground#f8f9fa
  • editor.hoverHighlightBackground#80ffea30
  • editor.lineHighlightBackground#220f06
  • editor.lineHighlightBorder#0b090a
  • editor.rangeHighlightBackground#9d4edd15
  • editor.selectionBackground#f77f0040
  • editor.selectionHighlightBackground#f77f0040b0
  • editor.snippetFinalTabstopHighlightBackground#0b090a
  • editor.snippetFinalTabstopHighlightBorder#39ff14
  • editor.snippetTabstopHighlightBackground#0b090a
  • editor.snippetTabstopHighlightBorder#f77f0040
  • editor.wordHighlightBackground#80ffea30
  • editor.wordHighlightStrongBackground#39ff1430
  • editorBracketHighlight.foreground1#f8f9fa
  • editorBracketHighlight.foreground2#e85d04
  • editorBracketHighlight.foreground3#80ffea
  • editorBracketHighlight.foreground4#39ff14
  • editorBracketHighlight.foreground5#9d4edd
  • editorBracketHighlight.foreground6#f77f00
  • editorBracketHighlight.unexpectedBracket.foreground#d90429
  • editorCodeLens.foreground#6c757d
  • editorCursor.foreground#f77f00
  • editorError.foreground#d90429
  • editorGroup.border#0a0b0c
  • editorGroup.dropBackground#f77f004070
  • editorGroupHeader.noTabsBackground#161a1d
  • editorGroupHeader.tabsBackground#161a1d
  • editorGroupHeader.tabsBorder#0a0b0c
  • editorGutter.addedBackground#39ff14cc
  • editorGutter.deletedBackground#d90429cc
  • editorGutter.modifiedBackground#80ffeacc
  • editorHoverWidget.background#161a1d
  • editorHoverWidget.border#f77f0040
  • editorLineNumber.activeForeground#f77f00
  • editorLineNumber.foreground#6c757d
  • editorLink.activeForeground#80ffea
  • editorMarkerNavigation.background#161a1d
  • editorOverviewRuler.addedForeground#39ff14aa
  • editorOverviewRuler.border#0a0b0c
  • editorOverviewRuler.currentContentForeground#39ff14
  • editorOverviewRuler.deletedForeground#d90429aa
  • editorOverviewRuler.errorForeground#d90429aa
  • editorOverviewRuler.incomingContentForeground#9d4edd
  • editorOverviewRuler.infoForeground#80ffeaaa
  • editorOverviewRuler.modifiedForeground#80ffeaaa
  • editorOverviewRuler.selectionHighlightForeground#f77f00
  • editorOverviewRuler.warningForeground#ffff80aa
  • editorOverviewRuler.wordHighlightForeground#80ffea
  • editorOverviewRuler.wordHighlightStrongForeground#39ff14
  • editorRuler.foreground#f8f9fa1a
  • editorSuggestWidget.background#161a1d
  • editorSuggestWidget.border#f77f0040
  • editorSuggestWidget.foreground#f8f9fa
  • editorSuggestWidget.selectedBackground#f77f0040
  • editorWarning.foreground#ffff80
  • editorWhitespace.foreground#f8f9fa1a
  • editorWidget.background#161a1d
  • editorWidget.border#f77f0040
  • errorForeground#d90429
  • extensionButton.prominentBackground#9d4edd
  • extensionButton.prominentForeground#0b090a
  • extensionButton.prominentHoverBackground#e85d04
  • focusBorder#f77f0040
  • foreground#f8f9fa
  • gitDecoration.conflictingResourceForeground#f77f00
  • gitDecoration.deletedResourceForeground#d90429
  • gitDecoration.ignoredResourceForeground#6c757d
  • gitDecoration.modifiedResourceForeground#80ffea
  • gitDecoration.untrackedResourceForeground#39ff14
  • inlineChat.regionHighlight#220f06
  • input.background#0b090a
  • input.border#f77f0040
  • input.foreground#f8f9fa
  • input.placeholderForeground#6c757d
  • inputOption.activeBorder#f77f00
  • inputValidation.errorBorder#d90429
  • inputValidation.infoBorder#e85d04
  • inputValidation.warningBorder#ffff80
  • list.activeSelectionBackground#f77f0040
  • list.activeSelectionForeground#f8f9fa
  • list.dropBackground#f77f0040
  • list.errorForeground#d90429
  • list.focusBackground#f77f0040a0
  • list.highlightForeground#80ffea
  • list.hoverBackground#220f06
  • list.inactiveSelectionBackground#220f06
  • list.warningForeground#ffff80
  • listFilterWidget.background#161a1d
  • listFilterWidget.noMatchesOutline#d90429
  • listFilterWidget.outline#f77f0040
  • menu.background#161a1d
  • menu.foreground#f8f9fa
  • menu.separatorBackground#f77f0040
  • menubar.selectionBackground#220f06
  • merge.currentHeaderBackground#39ff1440
  • merge.incomingHeaderBackground#9d4edd40
  • panel.background#0b090a
  • panel.border#0a0b0c
  • panelTitle.activeBorder#f77f00
  • panelTitle.activeForeground#f8f9fa
  • panelTitle.inactiveForeground#6c757d
  • peekView.border#f77f0040
  • peekViewEditor.background#0b090a
  • peekViewEditor.matchHighlightBackground#ffff8040
  • peekViewResult.background#161a1d
  • peekViewResult.fileForeground#f8f9fa
  • peekViewResult.lineForeground#f8f9fa
  • peekViewResult.matchHighlightBackground#ffff8040
  • peekViewResult.selectionBackground#f77f0040
  • peekViewResult.selectionForeground#f8f9fa
  • peekViewTitle.background#0a0b0c
  • peekViewTitleDescription.foreground#6c757d
  • peekViewTitleLabel.foreground#f8f9fa
  • pickerGroup.border#f77f0040
  • pickerGroup.foreground#80ffea
  • progressBar.background#f77f00
  • scrollbar.shadow#0a0b0c33
  • selection.background#f77f0040
  • settings.checkboxBackground#161a1d
  • settings.checkboxBorder#f77f0040
  • settings.checkboxForeground#f8f9fa
  • settings.dropdownBackground#161a1d
  • settings.dropdownBorder#f77f0040
  • settings.dropdownForeground#f8f9fa
  • settings.headerForeground#f8f9fa
  • settings.modifiedItemIndicator#f77f00
  • settings.numberInputBackground#0b090a
  • settings.numberInputBorder#f77f0040
  • settings.numberInputForeground#f8f9fa
  • settings.textInputBackground#0b090a
  • settings.textInputBorder#f77f0040
  • settings.textInputForeground#f8f9fa
  • sideBar.background#161a1d
  • sideBar.border#0a0b0c
  • sideBarSectionHeader.background#161a1d
  • sideBarSectionHeader.border#161a1d
  • sideBarSectionHeader.foreground#f8f9fa
  • sideBarTitle.foreground#f8f9fa
  • statusBar.background#0a0b0c
  • statusBar.border#0a0b0c
  • statusBar.debuggingBackground#d90429
  • statusBar.debuggingForeground#0b090a
  • statusBar.foreground#f8f9fa
  • statusBar.noFolderBackground#0a0b0c
  • statusBar.noFolderForeground#f8f9fa
  • statusBarItem.prominentBackground#d90429
  • statusBarItem.prominentHoverBackground#f77f00
  • statusBarItem.remoteBackground#f77f00
  • statusBarItem.remoteForeground#0b090a
  • tab.activeBackground#0b090a
  • tab.activeBorder#f77f00
  • tab.activeForeground#f8f9fa
  • tab.border#0a0b0c
  • tab.hoverBackground#220f06
  • tab.hoverBorder#f77f0050
  • tab.inactiveBackground#161a1d
  • tab.inactiveForeground#6c757d
  • terminal.ansiBlack#0b090a
  • terminal.ansiBlue#9d4edd
  • terminal.ansiBrightBlack#6c757d
  • terminal.ansiBrightBlue#9d4edd
  • terminal.ansiBrightCyan#80ffea
  • terminal.ansiBrightGreen#39ff14
  • terminal.ansiBrightMagenta#e85d04
  • terminal.ansiBrightRed#d90429
  • terminal.ansiBrightWhite#f8f9fa
  • terminal.ansiBrightYellow#ffff80
  • terminal.ansiCyan#80ffea
  • terminal.ansiGreen#39ff14
  • terminal.ansiMagenta#e85d04
  • terminal.ansiRed#d90429
  • terminal.ansiWhite#f8f9fa
  • terminal.ansiYellow#ffff80
  • terminal.background#0b090a
  • terminal.border#0a0b0c
  • terminal.foreground#f8f9fa
  • titleBar.activeBackground#0a0b0c
  • titleBar.activeForeground#f8f9fa
  • titleBar.border#0a0b0c
  • titleBar.inactiveBackground#0a0b0c
  • titleBar.inactiveForeground#6c757d
  • walkThrough.embeddedEditorBackground#0b090a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9d4edd
meta.diff, meta.diff.header#6c757d
markup.inserted#39ff14
markup.deleted#d90429
markup.changed#f77f00
invalid.deprecated#f8f9faunderline italic
entity.name.filename#ffff80
markup.error#d90429
markup.bold#f77f00bold
markup.heading#9d4eddbold
markup.italic#ffff80italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#80ffea
markup.inline.raw, markup.raw.restructuredtext#39ff14
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#e85d04
entity.name.directive.restructuredtext, markup.quote#ffff80italic
meta.separator.markdown#6c757d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#39ff14
punctuation.definition.constant.restructuredtext#9d4edd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9d4edd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f8f9fa
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#9d4edditalic
entity.other.inherited-class#80ffeaitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6c757d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#e85d04
comment.block.documentation entity.name.type#80ffeaitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#80ffea
comment.block.documentation variable#f77f00italic
constant, variable.other.constant#9d4edd
constant.character.escape, constant.character.string.escape, constant.regexp#e85d04
entity.name.tag#e85d04
entity.other.attribute-name.parent-selector#e85d04
entity.other.attribute-name#39ff14italic
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#39ff14
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#f77f00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#39ff14italic
meta.decorator variable.other.object#39ff14
keyword, punctuation.definition.keyword#e85d04
keyword.control.new, keyword.operator.newbold
meta.selector#e85d04
support#80ffeaitalic
support.function.magic, support.variable, variable.other.predefined#9d4edd
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#e85d04
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#f8f9fa
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#e85d04
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#80ffea
constant.other.date, constant.other.timestamp#f77f00
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e85d04
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#f77f00
storage.modifier#e85d04
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff80
punctuation.definition.group.capture.regexp#e85d04
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d90429
punctuation.definition.character-class.regexp#80ffea
punctuation.definition.group.regexp#f77f00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d90429
meta.assertion.look-ahead.regexp#39ff14
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#6c757d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f8f9fa
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f77f00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f8f9fa
meta.selectionset.graphql variable#ffff80
meta.selectionset.graphql meta.arguments variable#f8f9fa
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#f8f9fa
source.shell variable.other#9d4edd
support.constant#9d4edd
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#f8f9fa
meta.preprocessor.haskell#6c757d
log.error#d90429bold
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#39ff14italic
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#39ff14
support.function#39ff14italic
string#ffff80