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#091e16
  • activityBar.activeBorder#10b981
  • activityBar.background#040f0b
  • activityBar.foreground#ecfdf5
  • activityBar.inactiveForeground#668c7f
  • activityBarBadge.background#f472b6
  • activityBarBadge.foreground#091e16
  • badge.background#10b98140
  • badge.foreground#ecfdf5
  • breadcrumb.activeSelectionForeground#ecfdf5
  • breadcrumb.background#091e16
  • breadcrumb.focusForeground#ecfdf5
  • breadcrumb.foreground#668c7f
  • breadcrumbPicker.background#06140f
  • button.background#a78bfa
  • button.foreground#091e16
  • button.hoverBackground#f472b6
  • button.secondaryBackground#10b98140
  • button.secondaryForeground#ecfdf5
  • button.secondaryHoverBackground#0e2e22
  • debugToolBar.background#06140f
  • diffEditor.insertedTextBackground#10b98120
  • diffEditor.removedTextBackground#f8717140
  • dropdown.background#06140f
  • dropdown.border#10b98140
  • dropdown.foreground#ecfdf5
  • editor.background#091e16
  • editor.findMatchBackground#fde04760
  • editor.findMatchHighlightBackground#ecfdf530
  • editor.findRangeHighlightBackground#10b9814060
  • editor.foldBackground#091e16
  • editor.foreground#ecfdf5
  • editor.hoverHighlightBackground#67e8f930
  • editor.lineHighlightBackground#0e2e22
  • editor.lineHighlightBorder#091e16
  • editor.rangeHighlightBackground#a78bfa15
  • editor.selectionBackground#10b98140
  • editor.selectionHighlightBackground#10b98140b0
  • editor.snippetFinalTabstopHighlightBackground#091e16
  • editor.snippetFinalTabstopHighlightBorder#10b981
  • editor.snippetTabstopHighlightBackground#091e16
  • editor.snippetTabstopHighlightBorder#10b98140
  • editor.wordHighlightBackground#67e8f930
  • editor.wordHighlightStrongBackground#10b98130
  • editorBracketHighlight.foreground1#ecfdf5
  • editorBracketHighlight.foreground2#f472b6
  • editorBracketHighlight.foreground3#67e8f9
  • editorBracketHighlight.foreground4#10b981
  • editorBracketHighlight.foreground5#a78bfa
  • editorBracketHighlight.foreground6#fb923c
  • editorBracketHighlight.unexpectedBracket.foreground#f87171
  • editorCodeLens.foreground#668c7f
  • editorCursor.foreground#10b981
  • editorError.foreground#f87171
  • editorGroup.border#040f0b
  • editorGroup.dropBackground#10b9814070
  • editorGroupHeader.noTabsBackground#06140f
  • editorGroupHeader.tabsBackground#06140f
  • editorGroupHeader.tabsBorder#040f0b
  • editorGutter.addedBackground#10b981cc
  • editorGutter.deletedBackground#f87171cc
  • editorGutter.modifiedBackground#67e8f9cc
  • editorHoverWidget.background#06140f
  • editorHoverWidget.border#10b98140
  • editorLineNumber.activeForeground#10b981
  • editorLineNumber.foreground#668c7f
  • editorLink.activeForeground#67e8f9
  • editorMarkerNavigation.background#06140f
  • editorOverviewRuler.addedForeground#10b981aa
  • editorOverviewRuler.border#040f0b
  • editorOverviewRuler.currentContentForeground#10b981
  • editorOverviewRuler.deletedForeground#f87171aa
  • editorOverviewRuler.errorForeground#f87171aa
  • editorOverviewRuler.incomingContentForeground#a78bfa
  • editorOverviewRuler.infoForeground#67e8f9aa
  • editorOverviewRuler.modifiedForeground#67e8f9aa
  • editorOverviewRuler.selectionHighlightForeground#fb923c
  • editorOverviewRuler.warningForeground#fde047aa
  • editorOverviewRuler.wordHighlightForeground#67e8f9
  • editorOverviewRuler.wordHighlightStrongForeground#10b981
  • editorRuler.foreground#ecfdf51a
  • editorSuggestWidget.background#06140f
  • editorSuggestWidget.border#10b98140
  • editorSuggestWidget.foreground#ecfdf5
  • editorSuggestWidget.selectedBackground#10b98140
  • editorWarning.foreground#fde047
  • editorWhitespace.foreground#ecfdf51a
  • editorWidget.background#06140f
  • editorWidget.border#10b98140
  • errorForeground#f87171
  • extensionButton.prominentBackground#a78bfa
  • extensionButton.prominentForeground#091e16
  • extensionButton.prominentHoverBackground#f472b6
  • focusBorder#10b98140
  • foreground#ecfdf5
  • gitDecoration.conflictingResourceForeground#fb923c
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#668c7f
  • gitDecoration.modifiedResourceForeground#67e8f9
  • gitDecoration.untrackedResourceForeground#10b981
  • inlineChat.regionHighlight#0e2e22
  • input.background#091e16
  • input.border#10b98140
  • input.foreground#ecfdf5
  • input.placeholderForeground#668c7f
  • inputOption.activeBorder#10b981
  • inputValidation.errorBorder#f87171
  • inputValidation.infoBorder#f472b6
  • inputValidation.warningBorder#fde047
  • list.activeSelectionBackground#10b98140
  • list.activeSelectionForeground#ecfdf5
  • list.dropBackground#10b98140
  • list.errorForeground#f87171
  • list.focusBackground#10b98140a0
  • list.highlightForeground#67e8f9
  • list.hoverBackground#0e2e22
  • list.inactiveSelectionBackground#0e2e22
  • list.warningForeground#fde047
  • listFilterWidget.background#06140f
  • listFilterWidget.noMatchesOutline#f87171
  • listFilterWidget.outline#10b98140
  • menu.background#06140f
  • menu.foreground#ecfdf5
  • menu.separatorBackground#10b98140
  • menubar.selectionBackground#0e2e22
  • merge.currentHeaderBackground#10b98140
  • merge.incomingHeaderBackground#a78bfa40
  • panel.background#091e16
  • panel.border#040f0b
  • panelTitle.activeBorder#10b981
  • panelTitle.activeForeground#ecfdf5
  • panelTitle.inactiveForeground#668c7f
  • peekView.border#10b98140
  • peekViewEditor.background#091e16
  • peekViewEditor.matchHighlightBackground#fde04740
  • peekViewResult.background#06140f
  • peekViewResult.fileForeground#ecfdf5
  • peekViewResult.lineForeground#ecfdf5
  • peekViewResult.matchHighlightBackground#fde04740
  • peekViewResult.selectionBackground#10b98140
  • peekViewResult.selectionForeground#ecfdf5
  • peekViewTitle.background#040f0b
  • peekViewTitleDescription.foreground#668c7f
  • peekViewTitleLabel.foreground#ecfdf5
  • pickerGroup.border#10b98140
  • pickerGroup.foreground#67e8f9
  • progressBar.background#10b981
  • scrollbar.shadow#040f0b33
  • selection.background#10b98140
  • settings.checkboxBackground#06140f
  • settings.checkboxBorder#10b98140
  • settings.checkboxForeground#ecfdf5
  • settings.dropdownBackground#06140f
  • settings.dropdownBorder#10b98140
  • settings.dropdownForeground#ecfdf5
  • settings.headerForeground#ecfdf5
  • settings.modifiedItemIndicator#fb923c
  • settings.numberInputBackground#091e16
  • settings.numberInputBorder#10b98140
  • settings.numberInputForeground#ecfdf5
  • settings.textInputBackground#091e16
  • settings.textInputBorder#10b98140
  • settings.textInputForeground#ecfdf5
  • sideBar.background#06140f
  • sideBar.border#040f0b
  • sideBarSectionHeader.background#06140f
  • sideBarSectionHeader.border#06140f
  • sideBarSectionHeader.foreground#ecfdf5
  • sideBarTitle.foreground#ecfdf5
  • statusBar.background#040f0b
  • statusBar.border#040f0b
  • statusBar.debuggingBackground#f87171
  • statusBar.debuggingForeground#091e16
  • statusBar.foreground#ecfdf5
  • statusBar.noFolderBackground#040f0b
  • statusBar.noFolderForeground#ecfdf5
  • statusBarItem.prominentBackground#f87171
  • statusBarItem.prominentHoverBackground#fb923c
  • statusBarItem.remoteBackground#10b981
  • statusBarItem.remoteForeground#091e16
  • tab.activeBackground#091e16
  • tab.activeBorder#10b981
  • tab.activeForeground#ecfdf5
  • tab.border#040f0b
  • tab.hoverBackground#0e2e22
  • tab.hoverBorder#10b98150
  • tab.inactiveBackground#06140f
  • tab.inactiveForeground#668c7f
  • terminal.ansiBlack#091e16
  • terminal.ansiBlue#a78bfa
  • terminal.ansiBrightBlack#668c7f
  • terminal.ansiBrightBlue#a78bfa
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#10b981
  • terminal.ansiBrightMagenta#f472b6
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightWhite#ecfdf5
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#67e8f9
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#f472b6
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#ecfdf5
  • terminal.ansiYellow#fde047
  • terminal.background#091e16
  • terminal.border#040f0b
  • terminal.foreground#ecfdf5
  • titleBar.activeBackground#040f0b
  • titleBar.activeForeground#ecfdf5
  • titleBar.border#040f0b
  • titleBar.inactiveBackground#040f0b
  • titleBar.inactiveForeground#668c7f
  • walkThrough.embeddedEditorBackground#091e16

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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