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#c9cbff80
  • 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#96cdfb
  • gitDecoration.untrackedResourceForeground#abe9b3
  • 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
strongbold
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.underlineunderline
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#A693D6
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.newbold
meta.selector#F5C2E7
support#96CDFB
support.function.magic, support.variable, variable.other.predefined#DDB6F2regular
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#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.plainnormal
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#DDB6F2normal
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