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#e0db7710
  • activityBar.activeBorder#95d77680
  • activityBar.background#141b3d
  • activityBar.foreground#d3e0f0
  • activityBar.inactiveForeground#6a75ab
  • activityBarBadge.background#95d776
  • activityBarBadge.foreground#141b3d
  • badge.background#95d776
  • badge.foreground#141b3d
  • breadcrumb.activeSelectionForeground#d3e0f0
  • breadcrumb.background#141b3d
  • breadcrumb.focusForeground#d3e0f0
  • breadcrumb.foreground#6a75ab
  • breadcrumbPicker.background#0b1029
  • button.background#3462a8
  • button.foreground#eef4fb
  • button.secondaryBackground#141b3d
  • button.secondaryForeground#d3e0f0
  • button.secondaryHoverBackground#202b52
  • debugToolBar.background#0e1430
  • diffEditor.insertedTextBackground#95d77620
  • diffEditor.removedTextBackground#e2876b50
  • dropdown.background#202b52
  • dropdown.border#0b1029
  • dropdown.foreground#d3e0f0
  • editor.background#141b3d
  • editor.findMatchBackground#eabc7780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#1b255680
  • editor.foldBackground#0e143080
  • editor.foreground#d3e0f0
  • editor.hoverHighlightBackground#98c1ea50
  • editor.lineHighlightBackground#1b255680
  • editor.rangeHighlightBackground#9f70d815
  • editor.selectionBackground#1b2556
  • editor.selectionHighlightBackground#242f63
  • editor.snippetFinalTabstopHighlightBackground#141b3d
  • editor.snippetFinalTabstopHighlightBorder#95d776
  • editor.snippetTabstopHighlightBackground#141b3d
  • editor.snippetTabstopHighlightBorder#6a75ab
  • editor.wordHighlightBackground#98c1ea50
  • editor.wordHighlightStrongBackground#95d77650
  • editorBracketHighlight.foreground1#d3e0f0
  • editorBracketHighlight.foreground2#639dd8
  • editorBracketHighlight.foreground3#98c1ea
  • editorBracketHighlight.foreground4#95d776
  • editorBracketHighlight.foreground5#9f70d8
  • editorBracketHighlight.foreground6#eabc77
  • editorBracketHighlight.unexpectedBracket.foreground#e2876b
  • editorCodeLens.foreground#6a75ab
  • editorError.foreground#e2876b
  • editorGroup.border#1b2556
  • editorGroup.dropBackground#1b255670
  • editorGroupHeader.tabsBackground#0b1029
  • editorGutter.addedBackground#95d77680
  • editorGutter.deletedBackground#e2876b80
  • editorGutter.modifiedBackground#98c1ea80
  • editorHoverWidget.background#141b3d
  • editorHoverWidget.border#6a75ab
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorInfo.foreground#98c1ea
  • editorLineNumber.foreground#6a75ab
  • editorLink.activeForeground#98c1ea
  • editorMarkerNavigation.background#0e1430
  • editorOverviewRuler.addedForeground#95d77680
  • editorOverviewRuler.border#0b1029
  • editorOverviewRuler.currentContentForeground#95d776
  • editorOverviewRuler.deletedForeground#e2876b80
  • editorOverviewRuler.errorForeground#e2876b80
  • editorOverviewRuler.incomingContentForeground#9f70d8
  • editorOverviewRuler.infoForeground#98c1ea80
  • editorOverviewRuler.modifiedForeground#98c1ea80
  • editorOverviewRuler.selectionHighlightForeground#eabc77
  • editorOverviewRuler.warningForeground#eabc7780
  • editorOverviewRuler.wordHighlightForeground#98c1ea
  • editorOverviewRuler.wordHighlightStrongForeground#95d776
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#0e1430
  • editorSuggestWidget.foreground#d3e0f0
  • editorSuggestWidget.selectedBackground#1b2556
  • editorWarning.foreground#eabc77
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#0e1430
  • errorForeground#e2876b
  • extensionButton.prominentBackground#3462a8
  • extensionButton.prominentForeground#eef4fb
  • extensionButton.prominentHoverBackground#3462a890
  • focusBorder#6a75ab
  • foreground#d3e0f0
  • gitDecoration.addedResourceForeground#95d776
  • gitDecoration.conflictingResourceForeground#eabc77
  • gitDecoration.deletedResourceForeground#e2876b
  • gitDecoration.ignoredResourceForeground#6a75ab
  • gitDecoration.modifiedResourceForeground#98c1ea
  • gitDecoration.untrackedResourceForeground#95d776
  • input.background#141b3d
  • input.border#0b1029
  • input.foreground#d3e0f0
  • input.placeholderForeground#6a75ab
  • inputOption.activeBorder#9f70d8
  • inputValidation.errorBorder#e2876b
  • inputValidation.infoBorder#85bbed
  • inputValidation.warningBorder#eabc77
  • list.activeSelectionBackground#1b2556
  • list.activeSelectionForeground#d3e0f0
  • list.dropBackground#1b2556
  • list.errorForeground#e2876b
  • list.focusBackground#1b255680
  • list.highlightForeground#98c1ea
  • list.hoverBackground#1b255680
  • list.inactiveSelectionBackground#1b255680
  • list.warningForeground#eabc77
  • listFilterWidget.background#202b52
  • listFilterWidget.noMatchesOutline#e2876b
  • listFilterWidget.outline#242f63
  • merge.currentHeaderBackground#95d77690
  • merge.incomingHeaderBackground#9f70d890
  • minimapGutter.addedBackground#95d776
  • minimapGutter.deletedBackground#e2876b
  • minimapGutter.modifiedBackground#98c1ea
  • panel.background#141b3d
  • panel.border#1b2556
  • panelTitle.activeBorder#95d776
  • panelTitle.activeForeground#d3e0f0
  • panelTitle.inactiveForeground#6a75ab
  • peekView.border#1b2556
  • peekViewEditor.background#141b3d
  • peekViewEditor.matchHighlightBackground#e0db7780
  • peekViewResult.background#0e1430
  • peekViewResult.fileForeground#d3e0f0
  • peekViewResult.lineForeground#d3e0f0
  • peekViewResult.matchHighlightBackground#e0db7780
  • peekViewResult.selectionBackground#1b2556
  • peekViewResult.selectionForeground#d3e0f0
  • peekViewTitle.background#0b1029
  • peekViewTitleDescription.foreground#6a75ab
  • peekViewTitleLabel.foreground#d3e0f0
  • pickerGroup.border#1b2556
  • pickerGroup.foreground#98c1ea
  • progressBar.background#95d776
  • selection.background#639dd840
  • settings.checkboxBackground#0e1430
  • settings.checkboxBorder#0b1029
  • settings.checkboxForeground#d3e0f0
  • settings.dropdownBackground#0e1430
  • settings.dropdownBorder#0b1029
  • settings.dropdownForeground#d3e0f0
  • settings.headerForeground#d3e0f0
  • settings.modifiedItemIndicator#eabc77
  • settings.numberInputBackground#0e1430
  • settings.numberInputBorder#0b1029
  • settings.numberInputForeground#d3e0f0
  • settings.textInputBackground#0e1430
  • settings.textInputBorder#0b1029
  • settings.textInputForeground#d3e0f0
  • sideBar.background#0e1430
  • sideBarSectionHeader.background#141b3d
  • sideBarSectionHeader.border#0b1029
  • sideBarTitle.foreground#d3e0f0
  • statusBar.background#401d6c
  • statusBar.debuggingBackground#e2876b
  • statusBar.debuggingForeground#401d6c
  • statusBar.foreground#d3e0f0
  • statusBar.noFolderBackground#401d6c
  • statusBar.noFolderForeground#d3e0f0
  • statusBarItem.prominentBackground#e2876b
  • statusBarItem.prominentHoverBackground#eabc77
  • statusBarItem.remoteBackground#401d6c
  • statusBarItem.remoteForeground#141b3d
  • tab.activeBackground#141b3d
  • tab.activeBorderTop#95d776
  • tab.activeForeground#d3e0f0
  • tab.border#0b1029
  • tab.inactiveBackground#0e1430
  • tab.inactiveForeground#6a75ab
  • terminal.ansiBlack#202b52
  • terminal.ansiBlue#9f70d8
  • terminal.ansiBrightBlack#6a75ab
  • terminal.ansiBrightBlue#ae86de
  • terminal.ansiBrightCyan#a1caf2
  • terminal.ansiBrightGreen#aee096
  • terminal.ansiBrightMagenta#eaa8c5
  • terminal.ansiBrightRed#e9a38d
  • terminal.ansiBrightWhite#eef4fb
  • terminal.ansiBrightYellow#e6e293
  • terminal.ansiCyan#85bbed
  • terminal.ansiGreen#95d776
  • terminal.ansiMagenta#e48db4
  • terminal.ansiRed#e2876b
  • terminal.ansiWhite#d3e0f0
  • terminal.ansiYellow#e0db77
  • terminal.background#141b3d
  • terminal.foreground#d3e0f0
  • titleBar.activeBackground#0e1430
  • titleBar.activeForeground#d3e0f0
  • titleBar.inactiveBackground#0b1029
  • titleBar.inactiveForeground#6a75ab
  • walkThrough.embeddedEditorBackground#0e1430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9f70d8
meta.diff, meta.diff.header#6a75ab
markup.inserted#95d776
markup.deleted#e2876b
markup.changed#eabc77
invalid#e2876bunderline italic
invalid.deprecated#d3e0f0underline italic
entity.name.filename#e0db77
markup.error#e2876b
markup.underlineunderline
markup.bold#eabc77bold
markup.heading#9f70d8bold
markup.italic#e0db77italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#98c1ea
markup.inline.raw, markup.raw.restructuredtext#95d776
markup.underline.link, markup.underline.link.image#98c1ea
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#639dd8
entity.name.directive.restructuredtext, markup.quote#e0db77italic
meta.separator.markdown#6a75ab
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#95d776
punctuation.definition.constant.restructuredtext#9f70d8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9f70d8
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#e0db77
entity.name.type.class, entity.name.class#eabc77normal
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#e0db77italic
entity.other.inherited-class#eabc77italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6a75ab
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#639dd8
comment.block.documentation entity.name.type#98c1eaitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#98c1ea
comment.block.documentation variable#eabc77italic
constant#9f70d8
constant.character.escape, constant.character.string.escape, constant.regexp#639dd8
entity.name.tag#639dd8
entity.other.attribute-name.parent-selector#639dd8
entity.other.attribute-name#95d776italic
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#95d776
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#eabc77italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#95d776italic
meta.decorator variable.other.object#95d776
keyword, punctuation.definition.keyword#639dd8
keyword.control.new, keyword.operator.newbold
meta.selector#639dd8
support#98c1eaitalic
support.function.magic, support.variable, variable.other.predefined#9f70d8regular
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#639dd8
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#639dd8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#98c1ea
constant.other.date, constant.other.timestamp#eabc77
variable.other.alias.yaml#95d776italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#639dd8regular
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#eabc77italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#eabc77
storage.modifier#639dd8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e0db77
punctuation.definition.group.capture.regexp#639dd8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e2876b
punctuation.definition.character-class.regexp#98c1ea
punctuation.definition.group.regexp#eabc77
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e2876b
meta.assertion.look-ahead.regexp#95d776
string#e0db77
punctuation.definition.string.begin, punctuation.definition.string.end#e0db77
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#b0c0db
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#6a75ab
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#eabc77italic
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#e0db77
meta.selectionset.graphql meta.arguments variable#d3e0f0
entity.name.fragment.graphql, variable.fragment.graphql#98c1ea
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#9f70d8
support.constant#9f70d8normal
meta.scope.prerequisites.makefile#e0db77
meta.attribute-selector.scss#e0db77
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d3e0f0
meta.preprocessor.haskell#6a75ab
log.error#e2876bbold
log.warning#e0db77bold