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#e8e27410
  • activityBar.activeBorder#95de7380
  • activityBar.background#101530
  • activityBar.foreground#d3e0f0
  • activityBar.inactiveForeground#6570a8
  • activityBarBadge.background#95de73
  • activityBarBadge.foreground#101530
  • badge.background#95de73
  • badge.foreground#101530
  • breadcrumb.activeSelectionForeground#d3e0f0
  • breadcrumb.background#101530
  • breadcrumb.focusForeground#d3e0f0
  • breadcrumb.foreground#6570a8
  • breadcrumbPicker.background#070a1a
  • button.background#2a5ca8
  • button.foreground#eef4fb
  • button.secondaryBackground#101530
  • button.secondaryForeground#d3e0f0
  • button.secondaryHoverBackground#1c2547
  • debugToolBar.background#0a0e22
  • diffEditor.insertedTextBackground#95de7320
  • diffEditor.removedTextBackground#eb866750
  • dropdown.background#1c2547
  • dropdown.border#070a1a
  • dropdown.foreground#d3e0f0
  • editor.background#101530
  • editor.findMatchBackground#f2c07480
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#17204a80
  • editor.foldBackground#0a0e2280
  • editor.foreground#d3e0f0
  • editor.hoverHighlightBackground#99c5f050
  • editor.lineHighlightBackground#17204a80
  • editor.rangeHighlightBackground#9a63de15
  • editor.selectionBackground#17204a
  • editor.selectionHighlightBackground#202a58
  • editor.snippetFinalTabstopHighlightBackground#101530
  • editor.snippetFinalTabstopHighlightBorder#95de73
  • editor.snippetTabstopHighlightBackground#101530
  • editor.snippetTabstopHighlightBorder#6570a8
  • editor.wordHighlightBackground#99c5f050
  • editor.wordHighlightStrongBackground#95de7350
  • editorBracketHighlight.foreground1#d3e0f0
  • editorBracketHighlight.foreground2#5e9fe0
  • editorBracketHighlight.foreground3#99c5f0
  • editorBracketHighlight.foreground4#95de73
  • editorBracketHighlight.foreground5#9a63de
  • editorBracketHighlight.foreground6#f2c074
  • editorBracketHighlight.unexpectedBracket.foreground#eb8667
  • editorCodeLens.foreground#6570a8
  • editorError.foreground#eb8667
  • editorGroup.border#17204a
  • editorGroup.dropBackground#17204a70
  • editorGroupHeader.tabsBackground#070a1a
  • editorGutter.addedBackground#95de7380
  • editorGutter.deletedBackground#eb866780
  • editorGutter.modifiedBackground#99c5f080
  • editorHoverWidget.background#101530
  • editorHoverWidget.border#6570a8
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorInfo.foreground#99c5f0
  • editorLineNumber.foreground#6570a8
  • editorLink.activeForeground#99c5f0
  • editorMarkerNavigation.background#0a0e22
  • editorOverviewRuler.addedForeground#95de7380
  • editorOverviewRuler.border#070a1a
  • editorOverviewRuler.currentContentForeground#95de73
  • editorOverviewRuler.deletedForeground#eb866780
  • editorOverviewRuler.errorForeground#eb866780
  • editorOverviewRuler.incomingContentForeground#9a63de
  • editorOverviewRuler.infoForeground#99c5f080
  • editorOverviewRuler.modifiedForeground#99c5f080
  • editorOverviewRuler.selectionHighlightForeground#f2c074
  • editorOverviewRuler.warningForeground#f2c07480
  • editorOverviewRuler.wordHighlightForeground#99c5f0
  • editorOverviewRuler.wordHighlightStrongForeground#95de73
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#0a0e22
  • editorSuggestWidget.foreground#d3e0f0
  • editorSuggestWidget.selectedBackground#17204a
  • editorWarning.foreground#f2c074
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#0a0e22
  • errorForeground#eb8667
  • extensionButton.prominentBackground#2a5ca8
  • extensionButton.prominentForeground#eef4fb
  • extensionButton.prominentHoverBackground#2a5ca890
  • focusBorder#6570a8
  • foreground#d3e0f0
  • gitDecoration.addedResourceForeground#95de73
  • gitDecoration.conflictingResourceForeground#f2c074
  • gitDecoration.deletedResourceForeground#eb8667
  • gitDecoration.ignoredResourceForeground#6570a8
  • gitDecoration.modifiedResourceForeground#99c5f0
  • gitDecoration.untrackedResourceForeground#95de73
  • input.background#101530
  • input.border#070a1a
  • input.foreground#d3e0f0
  • input.placeholderForeground#6570a8
  • inputOption.activeBorder#9a63de
  • inputValidation.errorBorder#eb8667
  • inputValidation.infoBorder#84bef5
  • inputValidation.warningBorder#f2c074
  • list.activeSelectionBackground#17204a
  • list.activeSelectionForeground#d3e0f0
  • list.dropBackground#17204a
  • list.errorForeground#eb8667
  • list.focusBackground#17204a80
  • list.highlightForeground#99c5f0
  • list.hoverBackground#17204a80
  • list.inactiveSelectionBackground#17204a80
  • list.warningForeground#f2c074
  • listFilterWidget.background#1c2547
  • listFilterWidget.noMatchesOutline#eb8667
  • listFilterWidget.outline#202a58
  • merge.currentHeaderBackground#95de7390
  • merge.incomingHeaderBackground#9a63de90
  • minimapGutter.addedBackground#95de73
  • minimapGutter.deletedBackground#eb8667
  • minimapGutter.modifiedBackground#99c5f0
  • panel.background#101530
  • panel.border#17204a
  • panelTitle.activeBorder#95de73
  • panelTitle.activeForeground#d3e0f0
  • panelTitle.inactiveForeground#6570a8
  • peekView.border#17204a
  • peekViewEditor.background#101530
  • peekViewEditor.matchHighlightBackground#e8e27480
  • peekViewResult.background#0a0e22
  • peekViewResult.fileForeground#d3e0f0
  • peekViewResult.lineForeground#d3e0f0
  • peekViewResult.matchHighlightBackground#e8e27480
  • peekViewResult.selectionBackground#17204a
  • peekViewResult.selectionForeground#d3e0f0
  • peekViewTitle.background#070a1a
  • peekViewTitleDescription.foreground#6570a8
  • peekViewTitleLabel.foreground#d3e0f0
  • pickerGroup.border#17204a
  • pickerGroup.foreground#99c5f0
  • progressBar.background#95de73
  • selection.background#5e9fe040
  • settings.checkboxBackground#0a0e22
  • settings.checkboxBorder#070a1a
  • settings.checkboxForeground#d3e0f0
  • settings.dropdownBackground#0a0e22
  • settings.dropdownBorder#070a1a
  • settings.dropdownForeground#d3e0f0
  • settings.headerForeground#d3e0f0
  • settings.modifiedItemIndicator#f2c074
  • settings.numberInputBackground#0a0e22
  • settings.numberInputBorder#070a1a
  • settings.numberInputForeground#d3e0f0
  • settings.textInputBackground#0a0e22
  • settings.textInputBorder#070a1a
  • settings.textInputForeground#d3e0f0
  • sideBar.background#0a0e22
  • sideBarSectionHeader.background#101530
  • sideBarSectionHeader.border#070a1a
  • sideBarTitle.foreground#d3e0f0
  • statusBar.background#391565
  • statusBar.debuggingBackground#eb8667
  • statusBar.debuggingForeground#391565
  • statusBar.foreground#d3e0f0
  • statusBar.noFolderBackground#391565
  • statusBar.noFolderForeground#d3e0f0
  • statusBarItem.prominentBackground#eb8667
  • statusBarItem.prominentHoverBackground#f2c074
  • statusBarItem.remoteBackground#391565
  • statusBarItem.remoteForeground#101530
  • tab.activeBackground#101530
  • tab.activeBorderTop#95de73
  • tab.activeForeground#d3e0f0
  • tab.border#070a1a
  • tab.inactiveBackground#0a0e22
  • tab.inactiveForeground#6570a8
  • terminal.ansiBlack#1c2547
  • terminal.ansiBlue#9a63de
  • terminal.ansiBrightBlack#6570a8
  • terminal.ansiBrightBlue#b085e5
  • terminal.ansiBrightCyan#a3cef8
  • terminal.ansiBrightGreen#b0e696
  • terminal.ansiBrightMagenta#f0aac9
  • terminal.ansiBrightRed#f0a48d
  • terminal.ansiBrightWhite#eef4fb
  • terminal.ansiBrightYellow#ede893
  • terminal.ansiCyan#84bef5
  • terminal.ansiGreen#95de73
  • terminal.ansiMagenta#eb8db7
  • terminal.ansiRed#eb8667
  • terminal.ansiWhite#d3e0f0
  • terminal.ansiYellow#e8e274
  • terminal.background#101530
  • terminal.foreground#d3e0f0
  • titleBar.activeBackground#0a0e22
  • titleBar.activeForeground#d3e0f0
  • titleBar.inactiveBackground#070a1a
  • titleBar.inactiveForeground#6570a8
  • walkThrough.embeddedEditorBackground#0a0e22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9a63de
meta.diff, meta.diff.header#6570a8
markup.inserted#95de73
markup.deleted#eb8667
markup.changed#f2c074
invalid#eb8667underline italic
invalid.deprecated#d3e0f0underline italic
entity.name.filename#e8e274
markup.error#eb8667
markup.underlineunderline
markup.bold#f2c074bold
markup.heading#9a63debold
markup.italic#e8e274italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#99c5f0
markup.inline.raw, markup.raw.restructuredtext#95de73
markup.underline.link, markup.underline.link.image#99c5f0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5e9fe0
entity.name.directive.restructuredtext, markup.quote#e8e274italic
meta.separator.markdown#6570a8
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#95de73
punctuation.definition.constant.restructuredtext#9a63de
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9a63de
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d3e0f0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e8e274
entity.name.type.class, entity.name.class#f2c074normal
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#e8e274italic
entity.other.inherited-class#f2c074italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6570a8
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5e9fe0
comment.block.documentation entity.name.type#99c5f0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#99c5f0
comment.block.documentation variable#f2c074italic
constant#9a63de
constant.character.escape, constant.character.string.escape, constant.regexp#5e9fe0
entity.name.tag#5e9fe0
entity.other.attribute-name.parent-selector#5e9fe0
entity.other.attribute-name#95de73italic
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#95de73
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#f2c074italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#95de73italic
meta.decorator variable.other.object#95de73
keyword, punctuation.definition.keyword#5e9fe0
keyword.control.new, keyword.operator.newbold
meta.selector#5e9fe0
support#99c5f0italic
support.function.magic, support.variable, variable.other.predefined#9a63deregular
support.function, support.type.property-nameregular
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#5e9fe0
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#d3e0f0
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#5e9fe0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#99c5f0
constant.other.date, constant.other.timestamp#f2c074
variable.other.alias.yaml#95de73italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#5e9fe0regular
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#f2c074italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f2c074
storage.modifier#5e9fe0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e8e274
punctuation.definition.group.capture.regexp#5e9fe0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#eb8667
punctuation.definition.character-class.regexp#99c5f0
punctuation.definition.group.regexp#f2c074
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#eb8667
meta.assertion.look-ahead.regexp#95de73
string#e8e274
punctuation.definition.string.begin, punctuation.definition.string.end#e8e274
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#aebfda
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#6570a8
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d3e0f0
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f2c074italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d3e0f0normal
meta.selectionset.graphql variable#e8e274
meta.selectionset.graphql meta.arguments variable#d3e0f0
entity.name.fragment.graphql, variable.fragment.graphql#99c5f0
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#d3e0f0
source.shell variable.other#9a63de
support.constant#9a63denormal
meta.scope.prerequisites.makefile#e8e274
meta.attribute-selector.scss#e8e274
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d3e0f0
meta.preprocessor.haskell#6570a8
log.error#eb8667bold
log.warning#e8e274bold