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#000000
  • activityBar.activeBorder#ff0000
  • activityBar.background#050505
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • badge.background#262626
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#666666
  • breadcrumbPicker.background#0a0a0a
  • button.background#ffffff
  • button.foreground#000000
  • button.hoverBackground#ffffff
  • button.secondaryBackground#262626
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#111111
  • debugToolBar.background#0a0a0a
  • diffEditor.insertedTextBackground#ffffff20
  • diffEditor.removedTextBackground#ff000040
  • dropdown.background#0a0a0a
  • dropdown.border#262626
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#ffffff60
  • editor.findMatchHighlightBackground#ffffff30
  • editor.findRangeHighlightBackground#26262660
  • editor.foldBackground#000000
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#ffffff30
  • editor.lineHighlightBackground#111111
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#ffffff15
  • editor.selectionBackground#262626
  • editor.selectionHighlightBackground#262626b0
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#ffffff
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#262626
  • editor.wordHighlightBackground#ffffff30
  • editor.wordHighlightStrongBackground#ffffff30
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#ffffff
  • editorBracketHighlight.foreground3#ffffff
  • editorBracketHighlight.foreground4#ffffff
  • editorBracketHighlight.foreground5#ffffff
  • editorBracketHighlight.foreground6#ffffff
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorCodeLens.foreground#666666
  • editorCursor.foreground#ff0000
  • editorError.foreground#ff0000
  • editorGroup.border#050505
  • editorGroup.dropBackground#26262670
  • editorGroupHeader.noTabsBackground#0a0a0a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#050505
  • editorGutter.addedBackground#ffffffcc
  • editorGutter.deletedBackground#ff0000cc
  • editorGutter.modifiedBackground#ffffffcc
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#262626
  • editorLineNumber.activeForeground#ff0000
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#0a0a0a
  • editorOverviewRuler.addedForeground#ffffffaa
  • editorOverviewRuler.border#050505
  • editorOverviewRuler.currentContentForeground#ffffff
  • editorOverviewRuler.deletedForeground#ff0000aa
  • editorOverviewRuler.errorForeground#ff0000aa
  • editorOverviewRuler.incomingContentForeground#ffffff
  • editorOverviewRuler.infoForeground#ffffffaa
  • editorOverviewRuler.modifiedForeground#ffffffaa
  • editorOverviewRuler.selectionHighlightForeground#ffffff
  • editorOverviewRuler.warningForeground#ffffffaa
  • editorOverviewRuler.wordHighlightForeground#ffffff
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#262626
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.selectedBackground#262626
  • editorWarning.foreground#ffffff
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#0a0a0a
  • editorWidget.border#262626
  • errorForeground#ff0000
  • extensionButton.prominentBackground#ffffff
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#ffffff
  • focusBorder#262626
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#ffffff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#ffffff
  • inlineChat.regionHighlight#111111
  • input.background#000000
  • input.border#262626
  • input.foreground#ffffff
  • input.placeholderForeground#666666
  • inputOption.activeBorder#ff0000
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBorder#ffffff
  • inputValidation.warningBorder#ffffff
  • list.activeSelectionBackground#262626
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#262626
  • list.errorForeground#ff0000
  • list.focusBackground#262626a0
  • list.highlightForeground#ffffff
  • list.hoverBackground#111111
  • list.inactiveSelectionBackground#111111
  • list.warningForeground#ffffff
  • listFilterWidget.background#0a0a0a
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#262626
  • menu.background#0a0a0a
  • menu.foreground#ffffff
  • menu.separatorBackground#262626
  • menubar.selectionBackground#111111
  • merge.currentHeaderBackground#ffffff40
  • merge.incomingHeaderBackground#ffffff40
  • panel.background#000000
  • panel.border#050505
  • panelTitle.activeBorder#ff0000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#666666
  • peekView.border#262626
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffffff40
  • peekViewResult.background#0a0a0a
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#ffffff40
  • peekViewResult.selectionBackground#262626
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#050505
  • peekViewTitleDescription.foreground#666666
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#262626
  • pickerGroup.foreground#ffffff
  • progressBar.background#ff0000
  • scrollbar.shadow#05050533
  • selection.background#262626
  • settings.checkboxBackground#0a0a0a
  • settings.checkboxBorder#262626
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#0a0a0a
  • settings.dropdownBorder#262626
  • settings.dropdownForeground#ffffff
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#ffffff
  • settings.numberInputBackground#000000
  • settings.numberInputBorder#262626
  • settings.numberInputForeground#ffffff
  • settings.textInputBackground#000000
  • settings.textInputBorder#262626
  • settings.textInputForeground#ffffff
  • sideBar.background#0a0a0a
  • sideBar.border#050505
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#0a0a0a
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#050505
  • statusBar.border#050505
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#050505
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.prominentBackground#ff0000
  • statusBarItem.prominentHoverBackground#ffffff
  • statusBarItem.remoteBackground#ff0000
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#ff0000
  • tab.activeForeground#ffffff
  • tab.border#050505
  • tab.hoverBackground#111111
  • tab.hoverBorder#ff000050
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#ffffff
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#ffffff
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#ffffff
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#ffffff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffffff
  • terminal.background#000000
  • terminal.border#050505
  • terminal.foreground#ffffff
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#ffffff
  • titleBar.border#050505
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#666666
  • walkThrough.embeddedEditorBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ffffff
meta.diff, meta.diff.header#666666
markup.inserted#ffffff
markup.deleted#ff0000
markup.changed#ffffff
invalid.deprecated#ffffffunderline italic
entity.name.filename#ffffff
markup.error#ff0000
markup.bold#ffffffbold
markup.heading#ffffffbold
markup.italic#ffffffitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ffffff
markup.inline.raw, markup.raw.restructuredtext#ffffff
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ffffff
entity.name.directive.restructuredtext, markup.quote#ffffffitalic
meta.separator.markdown#666666
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ffffff
punctuation.definition.constant.restructuredtext#ffffff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#ffffff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ffffff
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffffff
entity.name.type.class, entity.name.class#ffffff
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#ffffffitalic
entity.other.inherited-class#ffffffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#666666
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ffffff
comment.block.documentation entity.name.type#ffffffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#ffffff
comment.block.documentation variable#ffffffitalic
constant, variable.other.constant#ffffff
constant.character.escape, constant.character.string.escape, constant.regexp#ffffff
entity.name.tag#ffffff
entity.other.attribute-name.parent-selector#ffffff
entity.other.attribute-name#ffffffitalic
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#ffffff
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#ffffffitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ffffffitalic
meta.decorator variable.other.object#ffffff
keyword, punctuation.definition.keyword#ffffff
keyword.control.new, keyword.operator.newbold
meta.selector#ffffff
support#ffffffitalic
support.function.magic, support.variable, variable.other.predefined#ffffff
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#ffffff
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#ffffff
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#ffffff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ffffff
constant.other.date, constant.other.timestamp#ffffff
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ffffff
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#ffffffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffffff
storage.modifier#ffffff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffffff
punctuation.definition.group.capture.regexp#ffffff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff0000
punctuation.definition.character-class.regexp#ffffff
punctuation.definition.group.regexp#ffffff
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff0000
meta.assertion.look-ahead.regexp#ffffff
string#ffffff
punctuation.definition.string.begin, punctuation.definition.string.end#ffffffee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#ffffffee
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#666666
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ffffff
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffffffitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ffffff
meta.selectionset.graphql variable#ffffff
meta.selectionset.graphql meta.arguments variable#ffffff
entity.name.fragment.graphql, variable.fragment.graphql#ffffff
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#ffffff
source.shell variable.other#ffffff
support.constant#ffffff
meta.scope.prerequisites.makefile#ffffff
meta.attribute-selector.scss#ffffff
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ffffff
meta.preprocessor.haskell#666666
log.error#ff0000bold
log.warning#ffffffbold
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#ffffffitalic
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#ffffff
support.function#ffffffitalic
string#ffffff