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#ddb6f225
  • activityBar.activeBorder#f5c2e775
  • activityBar.background#161320
  • activityBar.border#c9cbff
  • activityBar.foreground#c9cbff
  • activityBar.inactiveForeground#c9cbff40
  • activityBarBadge.background#f5c2e7
  • activityBarBadge.foreground#161320
  • badge.background#c9cbff80
  • badge.foreground#c9cbff
  • breadcrumb.activeSelectionForeground#c9cbff
  • breadcrumb.background#161320
  • breadcrumb.focusForeground#c9cbff
  • breadcrumb.foreground#c9cbff40
  • breadcrumbPicker.background#161320
  • button.background#c9cbff80
  • button.foreground#c9cbff
  • button.secondaryBackground#161320
  • button.secondaryForeground#c9cbff
  • button.secondaryHoverBackground#161320
  • debugToolBar.background#161320
  • diffEditor.insertedTextBackground#abe9b325
  • diffEditor.removedTextBackground#f28fad50
  • dropdown.background#161320
  • dropdown.border#161320
  • dropdown.foreground#c9cbff
  • editor.background#161320
  • editor.findMatchBackground#f8bd9675
  • editor.findMatchHighlightBackground#c9cbff50
  • editor.findRangeHighlightBackground#c9cbff80
  • editor.foldBackground#16132075
  • editor.foreground#c9cbff
  • editor.hoverHighlightBackground#96cdfb50
  • editor.lineHighlightBorder#c9cbff80
  • editor.rangeHighlightBackground#ddb6f215
  • editor.selectionBackground#c9cbff80
  • editor.selectionHighlightBackground#161320
  • editor.snippetFinalTabstopHighlightBackground#161320
  • editor.snippetFinalTabstopHighlightBorder#abe9b3
  • editor.snippetTabstopHighlightBackground#161320
  • editor.snippetTabstopHighlightBorder#c9cbff40
  • editor.wordHighlightBackground#96cdfb50
  • editor.wordHighlightStrongBackground#abe9b350
  • editorBracketHighlight.foreground1#c9cbff
  • editorBracketHighlight.foreground2#f5c2e7
  • editorBracketHighlight.foreground3#96cdfb
  • editorBracketHighlight.foreground4#abe9b3
  • editorBracketHighlight.foreground5#ddb6f2
  • editorBracketHighlight.foreground6#f8bd96
  • editorBracketHighlight.unexpectedBracket.foreground#f28fad
  • editorCodeLens.foreground#c9cbff40
  • editorCursor.foreground#c9cbff
  • editorError.foreground#f28fad
  • editorGroup.border#ddb6f2
  • editorGroup.dropBackground#161320
  • editorGroupHeader.tabsBackground#161320
  • editorGutter.addedBackground#abe9b375
  • editorGutter.deletedBackground#f28fad75
  • editorGutter.modifiedBackground#96cdfb75
  • editorHoverWidget.background#161320
  • editorHoverWidget.border#c9cbff40
  • editorIndentGuide.activeBackground1#c9cbff50
  • editorIndentGuide.background1#c9cbff80
  • editorLineNumber.foreground#c9cbff40
  • editorLink.activeForeground#96cdfb
  • editorMarkerNavigation.background#161320
  • editorOverviewRuler.addedForeground#abe9b375
  • editorOverviewRuler.border#161320
  • editorOverviewRuler.currentContentForeground#abe9b3
  • editorOverviewRuler.deletedForeground#f28fad75
  • editorOverviewRuler.errorForeground#f28fad75
  • editorOverviewRuler.incomingContentForeground#ddb6f2
  • editorOverviewRuler.infoForeground#96cdfb75
  • editorOverviewRuler.modifiedForeground#96cdfb75
  • editorOverviewRuler.selectionHighlightForeground#f8bd96
  • editorOverviewRuler.warningForeground#f8bd9675
  • editorOverviewRuler.wordHighlightForeground#96cdfb
  • editorOverviewRuler.wordHighlightStrongForeground#abe9b3
  • editorRuler.foreground#ddb6f2
  • editorSuggestWidget.background#161320
  • editorSuggestWidget.foreground#c9cbff
  • editorSuggestWidget.selectedBackground#c9cbff80
  • editorWarning.foreground#96cdfb
  • editorWhitespace.foreground#c9cbff80
  • editorWidget.background#161320
  • errorForeground#f28fad
  • extensionButton.prominentBackground#abe9b375
  • extensionButton.prominentForeground#c9cbff
  • extensionButton.prominentHoverBackground#abe9b350
  • focusBorder#c9cbff40
  • foreground#c9cbff
  • gitDecoration.conflictingResourceForeground#f8bd96
  • gitDecoration.deletedResourceForeground#f28fad
  • gitDecoration.ignoredResourceForeground#c9cbff40
  • gitDecoration.modifiedResourceForeground#7fa2ad
  • gitDecoration.untrackedResourceForeground#a693d6
  • input.background#161320
  • input.border#161320
  • input.foreground#c9cbff
  • input.placeholderForeground#c9cbff40
  • inputOption.activeBorder#ddb6f2
  • inputValidation.errorBorder#f28fad
  • inputValidation.infoBorder#f5c2e7
  • inputValidation.warningBorder#f8bd96
  • list.activeSelectionBackground#c9cbff80
  • list.activeSelectionForeground#c9cbff
  • list.dropBackground#c9cbff80
  • list.errorForeground#f28fad
  • list.focusBackground#c9cbff80
  • list.highlightForeground#96cdfb
  • list.hoverBackground#c9cbff80
  • list.inactiveSelectionBackground#c9cbff80
  • list.warningForeground#f8bd96
  • listFilterWidget.background#161320
  • listFilterWidget.noMatchesOutline#f28fad
  • listFilterWidget.outline#161320
  • merge.currentHeaderBackground#abe9b375
  • merge.incomingHeaderBackground#ddb6f275
  • panel.background#161320
  • panel.border#ddb6f2
  • panelTitle.activeBorder#c9cbff
  • panelTitle.activeForeground#c9cbff
  • panelTitle.inactiveForeground#c9cbff40
  • peekView.border#c9cbff80
  • peekViewEditor.background#161320
  • peekViewEditor.matchHighlightBackground#fae3b075
  • peekViewResult.background#161320
  • peekViewResult.fileForeground#c9cbff
  • peekViewResult.lineForeground#c9cbff
  • peekViewResult.matchHighlightBackground#fae3b075
  • peekViewResult.selectionBackground#c9cbff80
  • peekViewResult.selectionForeground#c9cbff
  • peekViewTitle.background#161320
  • peekViewTitleDescription.foreground#c9cbff40
  • peekViewTitleLabel.foreground#c9cbff
  • pickerGroup.border#ddb6f2
  • pickerGroup.foreground#96cdfb
  • progressBar.background#f5c2e7
  • scrollbarSlider.activeBackground#c9cbff
  • scrollbarSlider.background#c9cbff50
  • scrollbarSlider.hoverBackground#c9cbff75
  • selection.background#c9cbff50
  • settings.checkboxBackground#161320
  • settings.checkboxBorder#161320
  • settings.checkboxForeground#c9cbff
  • settings.dropdownBackground#161320
  • settings.dropdownBorder#161320
  • settings.dropdownForeground#c9cbff
  • settings.headerForeground#c9cbff
  • settings.modifiedItemIndicator#f8bd96
  • settings.numberInputBackground#161320
  • settings.numberInputBorder#161320
  • settings.numberInputForeground#c9cbff
  • settings.textInputBackground#161320
  • settings.textInputBorder#161320
  • settings.textInputForeground#c9cbff
  • sideBar.background#161320
  • sideBar.border#c9cbff
  • sideBarSectionHeader.background#161320
  • sideBarSectionHeader.border#161320
  • sideBarTitle.foreground#c9cbff
  • statusBar.background#161320
  • statusBar.debuggingBackground#f28fad
  • statusBar.debuggingForeground#161320
  • statusBar.foreground#c9cbff
  • statusBar.noFolderBackground#161320
  • statusBar.noFolderForeground#c9cbff
  • statusBarItem.prominentBackground#f28fad
  • statusBarItem.prominentHoverBackground#f8bd96
  • statusBarItem.remoteBackground#ddb6f2
  • statusBarItem.remoteForeground#161320
  • tab.activeBackground#161320
  • tab.activeBorderTop#f5c2e775
  • tab.activeForeground#c9cbff
  • tab.border#161320
  • tab.inactiveBackground#161320
  • tab.inactiveForeground#c9cbff40
  • terminal.ansiBlack#161320
  • terminal.ansiBlue#ddb6f2
  • terminal.ansiBrightBlack#302d41
  • terminal.ansiBrightBlue#ddb6f2
  • terminal.ansiBrightCyan#96cdfb
  • terminal.ansiBrightGreen#abe9b3
  • terminal.ansiBrightMagenta#f5c2e7
  • terminal.ansiBrightRed#f28fad
  • terminal.ansiBrightWhite#c9cbff
  • terminal.ansiBrightYellow#fae3b0
  • terminal.ansiCyan#96cdfb
  • terminal.ansiGreen#abe9b3
  • terminal.ansiMagenta#f5c2e7
  • terminal.ansiRed#f28fad
  • terminal.ansiWhite#c9cbff
  • terminal.ansiYellow#fae3b0
  • terminal.background#161320
  • terminal.foreground#c9cbff
  • titleBar.activeBackground#161320
  • titleBar.activeForeground#c9cbff
  • titleBar.inactiveBackground#161320
  • titleBar.inactiveForeground#c9cbff40
  • walkThrough.embeddedEditorBackground#161320

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—
strong—bold
header#DDB6F2—
meta.diff, meta.diff.header#C9CBFF40—
markup.inserted#ABE9B3—
markup.deleted#F28FAD—
markup.changed#F8BD96—
invalid#F28FAD
invalid.deprecated#C9CBFF
entity.name.filename#FAE3B0—
markup.error#F28FAD—
markup.underline—underline
markup.bold#F8BD96bold
markup.heading#DDB6F2bold
markup.#FAE3B0
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#96CDFB—
markup.inline.raw, markup.raw.restructuredtext#ABE9B3—
markup.underline.link, markup.underline.link.image#96CDFB—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#F5C2E7—
entity.name.directive.restructuredtext, markup.quote#FAE3B0
meta.separator.markdown#C9CBFF40—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ABE9B3—
punctuation.definition.constant.restructuredtext#DDB6F2—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DDB6F2—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#C9CBFF—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FAE3B0—
entity.name.type.class, entity.name.class#96CDFB
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#FAE3B0
variable.other.object, variable.other.property#F28FAD
variable.other.member#F8BD96
entity.other.inherited-class#96CDFB
comment, punctuation.definition.comment, unused.comment, wildcard.comment#C9CBFF40
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#F5C2E7—
comment.block.documentation entity.name.type#96CDFB
comment.block.documentation entity.name.type punctuation.definition.bracket#96CDFB—
comment.block.documentation variable#F8BD96
constant, variable.other.constant#DDB6F2—
constant.character.escape, constant.character.string.escape, constant.regexp#F5C2E7—
entity.name.tag#F28FAD—
entity.other.attribute-name.parent-selector#F5C2E7—
entity.other.attribute-name#ABE9B3
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#ABE9B3—
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#F8BD96
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ABE9B3
meta.decorator variable.other.object#ABE9B3—
keyword, punctuation.definition.keyword#F5C2E7—
keyword.control.new, keyword.operator.new—bold
meta.selector#F5C2E7—
support#96CDFB
support.function.magic, support.variable, variable.other.predefined#DDB6F2regular
support.function, support.type.property-name—regular
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#F5C2E7—
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#C9CBFF—
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#F5C2E7—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#96CDFB—
constant.other.date, constant.other.timestamp#F8BD96—
variable.other.alias.yaml#ABE9B3 underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#F5C2E7regular
variable.other.member, variable.other.object, entity.name, storage.type, keyword, variable, source, meta.body, meta.function, storage.modifier, support.function, support.type.property-name—
string.quoted.double, string.quoted.other, constant, string.interpolated, string.quoted, text, meta.tag.without-attributes, meta.jsx.children, punctuation.definition.block, string.unquoted.plain—normal
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#96CDFB
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F8BD96—
storage.modifier#F5C2E7—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FAE3B0—
punctuation.definition.group.capture.regexp#F5C2E7—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F28FAD—
punctuation.definition.character-class.regexp#96CDFB—
punctuation.definition.group.regexp#F8BD96—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F28FAD—
meta.assertion.look-ahead.regexp#ABE9B3—
string#FAE3B0
punctuation.definition.string.begin, punctuation.definition.string.end#F8BD96—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#89DCEB—
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#C9CBFF40—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#C9CBFF—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#F8BD96
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#C9CBFFnormal
meta.selectionset.graphql variable#FAE3B0—
meta.selectionset.graphql meta.arguments variable#C9CBFF—
entity.name.fragment.graphql, variable.fragment.graphql#96CDFB—
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#C9CBFF—
source.shell variable.other#DDB6F2—
support.constant#DDB6F2
meta.scope.prerequisites.makefile#FAE3B0—
meta.attribute-selector.scss#FAE3B0—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#C9CBFF—
meta.preprocessor.haskell#C9CBFF40—
log.error#F28FADbold
log.warning#FAE3B0bold
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this—
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—