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#050b14
  • activityBar.activeBorder#0ea5e9
  • activityBar.background#020509
  • activityBar.foreground#f0f9ff
  • activityBar.inactiveForeground#475569
  • activityBarBadge.background#ec4899
  • activityBarBadge.foreground#050b14
  • badge.background#0ea5e940
  • badge.foreground#f0f9ff
  • breadcrumb.activeSelectionForeground#f0f9ff
  • breadcrumb.background#050b14
  • breadcrumb.focusForeground#f0f9ff
  • breadcrumb.foreground#475569
  • breadcrumbPicker.background#03070d
  • button.background#818cf8
  • button.foreground#050b14
  • button.hoverBackground#ec4899
  • button.secondaryBackground#0ea5e940
  • button.secondaryForeground#f0f9ff
  • button.secondaryHoverBackground#0b172a
  • debugToolBar.background#03070d
  • diffEditor.insertedTextBackground#14b8a620
  • diffEditor.removedTextBackground#ef444440
  • dropdown.background#03070d
  • dropdown.border#0ea5e940
  • dropdown.foreground#f0f9ff
  • editor.background#050b14
  • editor.findMatchBackground#eab30860
  • editor.findMatchHighlightBackground#f0f9ff30
  • editor.findRangeHighlightBackground#0ea5e94060
  • editor.foldBackground#050b14
  • editor.foreground#f0f9ff
  • editor.hoverHighlightBackground#0ea5e930
  • editor.lineHighlightBackground#0b172a
  • editor.lineHighlightBorder#050b14
  • editor.rangeHighlightBackground#818cf815
  • editor.selectionBackground#0ea5e940
  • editor.selectionHighlightBackground#0ea5e940b0
  • editor.snippetFinalTabstopHighlightBackground#050b14
  • editor.snippetFinalTabstopHighlightBorder#14b8a6
  • editor.snippetTabstopHighlightBackground#050b14
  • editor.snippetTabstopHighlightBorder#0ea5e940
  • editor.wordHighlightBackground#0ea5e930
  • editor.wordHighlightStrongBackground#14b8a630
  • editorBracketHighlight.foreground1#f0f9ff
  • editorBracketHighlight.foreground2#ec4899
  • editorBracketHighlight.foreground3#0ea5e9
  • editorBracketHighlight.foreground4#14b8a6
  • editorBracketHighlight.foreground5#818cf8
  • editorBracketHighlight.foreground6#f97316
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorCodeLens.foreground#475569
  • editorCursor.foreground#0ea5e9
  • editorError.foreground#ef4444
  • editorGroup.border#020509
  • editorGroup.dropBackground#0ea5e94070
  • editorGroupHeader.noTabsBackground#03070d
  • editorGroupHeader.tabsBackground#03070d
  • editorGroupHeader.tabsBorder#020509
  • editorGutter.addedBackground#14b8a6cc
  • editorGutter.deletedBackground#ef4444cc
  • editorGutter.modifiedBackground#0ea5e9cc
  • editorHoverWidget.background#03070d
  • editorHoverWidget.border#0ea5e940
  • editorLineNumber.activeForeground#0ea5e9
  • editorLineNumber.foreground#475569
  • editorLink.activeForeground#0ea5e9
  • editorMarkerNavigation.background#03070d
  • editorOverviewRuler.addedForeground#14b8a6aa
  • editorOverviewRuler.border#020509
  • editorOverviewRuler.currentContentForeground#14b8a6
  • editorOverviewRuler.deletedForeground#ef4444aa
  • editorOverviewRuler.errorForeground#ef4444aa
  • editorOverviewRuler.incomingContentForeground#818cf8
  • editorOverviewRuler.infoForeground#0ea5e9aa
  • editorOverviewRuler.modifiedForeground#0ea5e9aa
  • editorOverviewRuler.selectionHighlightForeground#f97316
  • editorOverviewRuler.warningForeground#eab308aa
  • editorOverviewRuler.wordHighlightForeground#0ea5e9
  • editorOverviewRuler.wordHighlightStrongForeground#14b8a6
  • editorRuler.foreground#f0f9ff1a
  • editorSuggestWidget.background#03070d
  • editorSuggestWidget.border#0ea5e940
  • editorSuggestWidget.foreground#f0f9ff
  • editorSuggestWidget.selectedBackground#0ea5e940
  • editorWarning.foreground#eab308
  • editorWhitespace.foreground#f0f9ff1a
  • editorWidget.background#03070d
  • editorWidget.border#0ea5e940
  • errorForeground#ef4444
  • extensionButton.prominentBackground#818cf8
  • extensionButton.prominentForeground#050b14
  • extensionButton.prominentHoverBackground#ec4899
  • focusBorder#0ea5e940
  • foreground#f0f9ff
  • gitDecoration.conflictingResourceForeground#f97316
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#475569
  • gitDecoration.modifiedResourceForeground#0ea5e9
  • gitDecoration.untrackedResourceForeground#14b8a6
  • inlineChat.regionHighlight#0b172a
  • input.background#050b14
  • input.border#0ea5e940
  • input.foreground#f0f9ff
  • input.placeholderForeground#475569
  • inputOption.activeBorder#0ea5e9
  • inputValidation.errorBorder#ef4444
  • inputValidation.infoBorder#ec4899
  • inputValidation.warningBorder#eab308
  • list.activeSelectionBackground#0ea5e940
  • list.activeSelectionForeground#f0f9ff
  • list.dropBackground#0ea5e940
  • list.errorForeground#ef4444
  • list.focusBackground#0ea5e940a0
  • list.highlightForeground#0ea5e9
  • list.hoverBackground#0b172a
  • list.inactiveSelectionBackground#0b172a
  • list.warningForeground#eab308
  • listFilterWidget.background#03070d
  • listFilterWidget.noMatchesOutline#ef4444
  • listFilterWidget.outline#0ea5e940
  • menu.background#03070d
  • menu.foreground#f0f9ff
  • menu.separatorBackground#0ea5e940
  • menubar.selectionBackground#0b172a
  • merge.currentHeaderBackground#14b8a640
  • merge.incomingHeaderBackground#818cf840
  • panel.background#050b14
  • panel.border#020509
  • panelTitle.activeBorder#0ea5e9
  • panelTitle.activeForeground#f0f9ff
  • panelTitle.inactiveForeground#475569
  • peekView.border#0ea5e940
  • peekViewEditor.background#050b14
  • peekViewEditor.matchHighlightBackground#eab30840
  • peekViewResult.background#03070d
  • peekViewResult.fileForeground#f0f9ff
  • peekViewResult.lineForeground#f0f9ff
  • peekViewResult.matchHighlightBackground#eab30840
  • peekViewResult.selectionBackground#0ea5e940
  • peekViewResult.selectionForeground#f0f9ff
  • peekViewTitle.background#020509
  • peekViewTitleDescription.foreground#475569
  • peekViewTitleLabel.foreground#f0f9ff
  • pickerGroup.border#0ea5e940
  • pickerGroup.foreground#0ea5e9
  • progressBar.background#0ea5e9
  • scrollbar.shadow#02050933
  • selection.background#0ea5e940
  • settings.checkboxBackground#03070d
  • settings.checkboxBorder#0ea5e940
  • settings.checkboxForeground#f0f9ff
  • settings.dropdownBackground#03070d
  • settings.dropdownBorder#0ea5e940
  • settings.dropdownForeground#f0f9ff
  • settings.headerForeground#f0f9ff
  • settings.modifiedItemIndicator#f97316
  • settings.numberInputBackground#050b14
  • settings.numberInputBorder#0ea5e940
  • settings.numberInputForeground#f0f9ff
  • settings.textInputBackground#050b14
  • settings.textInputBorder#0ea5e940
  • settings.textInputForeground#f0f9ff
  • sideBar.background#03070d
  • sideBar.border#020509
  • sideBarSectionHeader.background#03070d
  • sideBarSectionHeader.border#03070d
  • sideBarSectionHeader.foreground#f0f9ff
  • sideBarTitle.foreground#f0f9ff
  • statusBar.background#020509
  • statusBar.border#020509
  • statusBar.debuggingBackground#ef4444
  • statusBar.debuggingForeground#050b14
  • statusBar.foreground#f0f9ff
  • statusBar.noFolderBackground#020509
  • statusBar.noFolderForeground#f0f9ff
  • statusBarItem.prominentBackground#ef4444
  • statusBarItem.prominentHoverBackground#f97316
  • statusBarItem.remoteBackground#0ea5e9
  • statusBarItem.remoteForeground#050b14
  • tab.activeBackground#050b14
  • tab.activeBorder#0ea5e9
  • tab.activeForeground#f0f9ff
  • tab.border#020509
  • tab.hoverBackground#0b172a
  • tab.hoverBorder#0ea5e950
  • tab.inactiveBackground#03070d
  • tab.inactiveForeground#475569
  • terminal.ansiBlack#050b14
  • terminal.ansiBlue#818cf8
  • terminal.ansiBrightBlack#475569
  • terminal.ansiBrightBlue#818cf8
  • terminal.ansiBrightCyan#0ea5e9
  • terminal.ansiBrightGreen#14b8a6
  • terminal.ansiBrightMagenta#ec4899
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#f0f9ff
  • terminal.ansiBrightYellow#eab308
  • terminal.ansiCyan#0ea5e9
  • terminal.ansiGreen#14b8a6
  • terminal.ansiMagenta#ec4899
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#f0f9ff
  • terminal.ansiYellow#eab308
  • terminal.background#050b14
  • terminal.border#020509
  • terminal.foreground#f0f9ff
  • titleBar.activeBackground#020509
  • titleBar.activeForeground#f0f9ff
  • titleBar.border#020509
  • titleBar.inactiveBackground#020509
  • titleBar.inactiveForeground#475569
  • walkThrough.embeddedEditorBackground#050b14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#818cf8
meta.diff, meta.diff.header#475569
markup.inserted#14b8a6
markup.deleted#ef4444
markup.changed#f97316
invalid.deprecated#f0f9ffunderline italic
entity.name.filename#eab308
markup.error#ef4444
markup.bold#f97316bold
markup.heading#818cf8bold
markup.italic#eab308italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0ea5e9
markup.inline.raw, markup.raw.restructuredtext#14b8a6
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ec4899
entity.name.directive.restructuredtext, markup.quote#eab308italic
meta.separator.markdown#475569
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#14b8a6
punctuation.definition.constant.restructuredtext#818cf8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#818cf8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f0f9ff
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#eab308
entity.name.type.class, entity.name.class#0ea5e9
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#818cf8italic
entity.other.inherited-class#0ea5e9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#475569
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ec4899
comment.block.documentation entity.name.type#0ea5e9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#0ea5e9
comment.block.documentation variable#f97316italic
constant, variable.other.constant#818cf8
constant.character.escape, constant.character.string.escape, constant.regexp#ec4899
entity.name.tag#ec4899
entity.other.attribute-name.parent-selector#ec4899
entity.other.attribute-name#14b8a6italic
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#14b8a6
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#14b8a6italic
meta.decorator variable.other.object#14b8a6
keyword, punctuation.definition.keyword#ec4899
keyword.control.new, keyword.operator.newbold
meta.selector#ec4899
support#0ea5e9italic
support.function.magic, support.variable, variable.other.predefined#818cf8
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#ec4899
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#f0f9ff
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#ec4899
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0ea5e9
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#ec4899
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#0ea5e9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f97316
storage.modifier#ec4899
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#eab308
punctuation.definition.group.capture.regexp#ec4899
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ef4444
punctuation.definition.character-class.regexp#0ea5e9
punctuation.definition.group.regexp#f97316
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ef4444
meta.assertion.look-ahead.regexp#14b8a6
string#eab308
punctuation.definition.string.begin, punctuation.definition.string.end#eab308ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0ea5e9ee
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#475569
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f0f9ff
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#f0f9ff
meta.selectionset.graphql variable#eab308
meta.selectionset.graphql meta.arguments variable#f0f9ff
entity.name.fragment.graphql, variable.fragment.graphql#0ea5e9
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#f0f9ff
source.shell variable.other#818cf8
support.constant#818cf8
meta.scope.prerequisites.makefile#eab308
meta.attribute-selector.scss#eab308
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f0f9ff
meta.preprocessor.haskell#475569
log.error#ef4444bold
log.warning#eab308bold
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#14b8a6italic
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#14b8a6
support.function#14b8a6italic
string#eab308