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#3D355866
  • activityBar.activeBorder#E06BAAcc
  • activityBar.background#1F1A2E
  • activityBar.foreground#E8E4F0
  • activityBar.inactiveForeground#6E5F96
  • activityBarBadge.background#E06BAA
  • activityBarBadge.foreground#171320
  • badge.background#3D3558
  • badge.foreground#E8E4F0
  • breadcrumb.activeSelectionForeground#E8E4F0
  • breadcrumb.background#171320
  • breadcrumb.focusForeground#E8E4F0
  • breadcrumb.foreground#6E5F96
  • breadcrumbPicker.background#0E0C16
  • button.background#3D3558
  • button.foreground#E8E4F0
  • contrastBorder#0E0C16
  • debugToolBar.background#12101C
  • diffEditor.insertedTextBackground#6EE7A833
  • diffEditor.removedTextBackground#F0718880
  • dropdown.background#1F1A2E
  • dropdown.border#0E0C16
  • dropdown.foreground#E8E4F0
  • editor.background#171320
  • editor.findMatchBackground#E8A574cc
  • editor.findMatchHighlightBackground#E8E4F066
  • editor.findRangeHighlightBackground#231E35
  • editor.foldBackground#12101C
  • editor.foreground#E8E4F0
  • editor.hoverHighlightBackground#0E0C16
  • editor.inactiveSelectionBackground#3D355859
  • editor.lineHighlightBackground#231E35
  • editor.lineHighlightBorder#171320
  • editor.rangeHighlightBackground#A78BFA26
  • editor.selectionBackground#3D3558
  • editor.selectionHighlightBackground#2A2440
  • editor.snippetFinalTabstopHighlightBackground#171320
  • editor.snippetFinalTabstopHighlightBorder#6EE7A8
  • editor.snippetTabstopHighlightBackground#171320
  • editor.snippetTabstopHighlightBorder#6E5F96
  • editor.wordHighlightBackground#67CFE980
  • editor.wordHighlightStrongBackground#6EE7A880
  • editorBracketHighlight.foreground1#E06BAA
  • editorBracketHighlight.foreground2#67CFE9
  • editorBracketHighlight.foreground3#6EE7A8
  • editorBracketHighlight.foreground4#E8DC78
  • editorBracketHighlight.foreground5#E8A574
  • editorBracketHighlight.foreground6#A78BFA
  • editorBracketHighlight.unexpectedBracket.foreground#F07188
  • editorBracketMatch.background#3D355873
  • editorBracketMatch.border#E06BAA
  • editorCodeLens.foreground#6E5F96
  • editorCursor.foreground#E06BAA
  • editorError.foreground#F07188
  • editorGroup.border#3D3558
  • editorGroup.dropBackground#3D355870
  • editorGroupHeader.tabsBackground#0E0C16
  • editorGutter.addedBackground#6EE7A8cc
  • editorGutter.deletedBackground#F07188cc
  • editorGutter.modifiedBackground#67CFE9cc
  • editorHoverWidget.background#171320
  • editorHoverWidget.border#6E5F96
  • editorIndentGuide.activeBackground#E8E4F073
  • editorIndentGuide.background#E8E4F018
  • editorInlineSuggest.background#12101C
  • editorInlineSuggest.foreground#E8E4F08c
  • editorLineNumber.foreground#6E5F96
  • editorLink.activeForeground#67CFE9
  • editorMarkerNavigation.background#12101C
  • editorOverviewRuler.addedForeground#6EE7A8cc
  • editorOverviewRuler.border#0E0C16
  • editorOverviewRuler.currentContentForeground#6EE7A8
  • editorOverviewRuler.deletedForeground#F07188cc
  • editorOverviewRuler.errorForeground#F07188cc
  • editorOverviewRuler.incomingContentForeground#A78BFA
  • editorOverviewRuler.infoForeground#67CFE9cc
  • editorOverviewRuler.modifiedForeground#67CFE9cc
  • editorOverviewRuler.selectionHighlightForeground#E8A574
  • editorOverviewRuler.warningForeground#E8A574cc
  • editorOverviewRuler.wordHighlightForeground#67CFE9
  • editorOverviewRuler.wordHighlightStrongForeground#6EE7A8
  • editorRuler.foreground#E8E4F018
  • editorSuggestWidget.background#12101C
  • editorSuggestWidget.foreground#E8E4F0
  • editorSuggestWidget.selectedBackground#3D3558
  • editorWarning.foreground#67CFE9
  • editorWhitespace.foreground#E8E4F018
  • editorWidget.background#12101C
  • errorForeground#F07188
  • extensionButton.prominentBackground#6EE7A8e6
  • extensionButton.prominentForeground#E8E4F0
  • extensionButton.prominentHoverBackground#6EE7A899
  • focusBorder#6E5F96
  • foreground#E8E4F0
  • gitDecoration.conflictingResourceForeground#E8A574
  • gitDecoration.deletedResourceForeground#F07188
  • gitDecoration.ignoredResourceForeground#6E5F96
  • gitDecoration.modifiedResourceForeground#67CFE9
  • gitDecoration.untrackedResourceForeground#6EE7A8
  • input.background#171320
  • input.border#0E0C16
  • input.foreground#E8E4F0
  • input.placeholderForeground#6E5F96
  • inputOption.activeBorder#A78BFA
  • inputValidation.errorBorder#F07188
  • inputValidation.infoBorder#E06BAA
  • inputValidation.warningBorder#E8A574
  • list.activeSelectionBackground#3D355899
  • list.activeSelectionForeground#E8E4F0
  • list.dropBackground#3D3558
  • list.errorForeground#F07188
  • list.focusBackground#231E35
  • list.highlightForeground#67CFE9
  • list.hoverBackground#3D3558a6
  • list.inactiveSelectionBackground#3D355866
  • list.warningForeground#E8A574
  • listFilterWidget.background#1F1A2E
  • listFilterWidget.noMatchesOutline#F07188
  • listFilterWidget.outline#2A2440
  • merge.currentHeaderBackground#6EE7A8e6
  • merge.incomingHeaderBackground#A78BFAe6
  • notification.background#171320
  • notification.buttonBackground#3D3558
  • notification.buttonForeground#E8E4F0
  • notification.buttonHoverBackground#231E35
  • notification.errorBackground#F07188
  • notification.errorForeground#E8E4F0
  • notification.foreground#E8E4F0
  • notification.infoBackground#67CFE9
  • notification.infoForeground#171320
  • notification.warningBackground#E8A574
  • notification.warningForeground#171320
  • panel.background#171320
  • panel.border#E06BAA
  • panelTitle.activeBorder#E06BAA
  • panelTitle.activeForeground#E8E4F0
  • panelTitle.inactiveForeground#E8E4F0cc
  • peekView.border#3D3558
  • peekViewEditor.background#171320
  • peekViewEditor.matchHighlightBackground#E8DC78cc
  • peekViewResult.background#12101C
  • peekViewResult.fileForeground#E8E4F0
  • peekViewResult.lineForeground#E8E4F0
  • peekViewResult.matchHighlightBackground#E8DC78cc
  • peekViewResult.selectionBackground#3D3558
  • peekViewResult.selectionForeground#E8E4F0
  • peekViewTitle.background#0E0C16
  • peekViewTitleDescription.foreground#6E5F96
  • peekViewTitleLabel.foreground#E8E4F0
  • pickerGroup.border#A78BFA
  • pickerGroup.foreground#67CFE9
  • progressBar.background#E06BAA
  • selection.background#A78BFA
  • settings.checkboxBackground#12101C
  • settings.checkboxBorder#0E0C16
  • settings.checkboxForeground#E8E4F0
  • settings.dropdownBackground#12101C
  • settings.dropdownBorder#0E0C16
  • settings.dropdownForeground#E8E4F0
  • settings.headerForeground#E8E4F0
  • settings.modifiedItemForeground#E8A574
  • settings.modifiedItemIndicator#E8A574
  • settings.numberInputBackground#12101C
  • settings.numberInputBorder#0E0C16
  • settings.numberInputForeground#E8E4F0
  • settings.textInputBackground#12101C
  • settings.textInputBorder#0E0C16
  • settings.textInputForeground#E8E4F0
  • sideBar.background#12101C
  • sideBar.foreground#E8E4F0
  • sideBarSectionHeader.background#171320
  • sideBarSectionHeader.border#0E0C16
  • sideBarTitle.foreground#E8E4F0
  • statusBar.background#0E0C16
  • statusBar.debuggingBackground#F07188
  • statusBar.debuggingForeground#0E0C16
  • statusBar.foreground#E8E4F0
  • statusBar.noFolderBackground#0E0C16
  • statusBar.noFolderForeground#E8E4F0
  • statusBarItem.prominentBackground#F07188
  • statusBarItem.prominentHoverBackground#E8A574
  • statusBarItem.remoteBackground#A78BFA
  • statusBarItem.remoteForeground#E8E4F0
  • tab.activeBackground#171320
  • tab.activeBorderTop#E06BAAcc
  • tab.activeForeground#E8E4F0
  • tab.border#0E0C16
  • tab.inactiveBackground#12101C
  • tab.inactiveForeground#6E5F96
  • terminal.ansiBlack#12101C
  • terminal.ansiBlue#67CFE9
  • terminal.ansiBrightBlack#7A6E98
  • terminal.ansiBrightBlue#78D8F8
  • terminal.ansiBrightCyan#A8FFFF
  • terminal.ansiBrightGreen#7EF8B8
  • terminal.ansiBrightMagenta#B89BFA
  • terminal.ansiBrightRed#F07898
  • terminal.ansiBrightWhite#F8F6FC
  • terminal.ansiBrightYellow#F0E888
  • terminal.ansiCyan#8AE8DC
  • terminal.ansiGreen#6EE7A8
  • terminal.ansiMagenta#A78BFA
  • terminal.ansiRed#E06BAA
  • terminal.ansiWhite#E8E4F0
  • terminal.ansiYellow#E8DC78
  • terminal.background#171320
  • terminal.foreground#E8E4F0
  • terminal.selectionBackground#6E5F9673
  • terminalCursor.background#12101C
  • terminalCursor.foreground#E8E4F0
  • titleBar.activeBackground#12101C
  • titleBar.activeForeground#E8E4F0
  • titleBar.inactiveBackground#0E0C16
  • titleBar.inactiveForeground#6E5F96
  • walkThrough.embeddedEditorBackground#12101C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#A78BFA
source#E8E4F0
meta.diff, meta.diff.header#6E5F96
markup.inserted#6EE7A8
markup.deleted#F07188
markup.changed#E8A574
invalid#F07188underline italic
invalid.deprecated#E8E4F0underline italic
entity.name.filename#E8DC78
markup.error#F07188
markup.underlineunderline
markup.bold#E8A574bold
markup.heading#A78BFAbold
markup.italic#E8DC78italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#67CFE9
markup.inline.raw, markup.raw.restructuredtext#6EE7A8
markup.underline.link, markup.underline.link.image#67CFE9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#E06BAA
entity.name.directive.restructuredtext, markup.quote#E8DC78italic
meta.separator.markdown#6E5F96
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6EE7A8
punctuation.definition.constant.restructuredtext#A78BFA
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#A78BFA
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E8E4F0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E8DC78
entity.name.type.class, entity.name.class#67CFE9normal
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#A78BFAitalic
entity.other.inherited-class#67CFE9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6E5F96
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#E06BAA
comment.block.documentation entity.name.type#67CFE9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#67CFE9
comment.block.documentation variable#E8A574italic
constant, variable.other.constant#A78BFA
constant.character.escape, constant.character.string.escape, constant.regexp#E06BAA
entity.name.tag#E06BAA
entity.other.attribute-name.parent-selector#E06BAA
entity.other.attribute-name.id#E8DC78italic
entity.other.attribute-name#6EE7A8italic
meta.tag.inline source#E8DC78
entity.name.function, meta.function-call.generic, 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#6EE7A8
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#E8A574italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6EE7A8italic
meta.decorator variable.other.object#6EE7A8
keyword, punctuation.definition.keyword#E06BAA
keyword.control.new, keyword.operator.newbold
meta.selector#E06BAA
support#67CFE9italic
support.function.magic, support.variable, variable.other.predefined#A78BFAregular
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#E06BAA
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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#E8E4F0
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#E06BAA
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#67CFE9
constant.other.date, constant.other.timestamp#E8A574
variable.other.alias.yaml#6EE7A8italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#E06BAAregular
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#67CFE9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A574
storage.modifier#E06BAA
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E8DC78
punctuation.definition.group.capture.regexp#E06BAA
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F07188
punctuation.definition.character-class.regexp#67CFE9
punctuation.definition.group.regexp#E8A574
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F07188
meta.assertion.look-ahead.regexp#6EE7A8
string#E8DC78
punctuation.definition.string.begin, punctuation.definition.string.end#E8DC78
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#A78BFA
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#6E5F96
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E8E4F0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E8A574italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E8E4F0normal
meta.selectionset.graphql variable#E8DC78
meta.selectionset.graphql meta.arguments variable#E8E4F0
entity.name.fragment.graphql, variable.fragment.graphql#67CFE9
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.section.embedded.begin.html, punctuation.section.embedded.end.html#E06BAA
meta.embedded.line.cshtml, source.cs meta.embedded.line, string.quoted.double.cshtml, entity.name.tag.cshtml#67CFE9
keyword.other.DML.sql, keyword.other.DDL.create.II.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql, keyword.other.sql#E06BAA
support.function.sql, support.type.sql#67CFE9italic
string.quoted.single.sql, string.quoted.double.sql#E8DC78
support.type.property-name.json#67CFE9
constant.numeric.json, constant.language.json#E8A574
entity.name.type.interface, entity.name.type.alias, support.type.builtin.ts, support.type.primitive.ts, support.type.builtin.tsx, support.type.primitive.tsx#67CFE9italic
entity.name.namespace, entity.name.scope-resolution#A78BFA
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical#E06BAA
constant.language.boolean, constant.language.null, constant.language.undefined#A78BFAitalic
constant.numeric, constant.numeric.integer, constant.numeric.float#E8A574
support.type.property-name.css, meta.property-name.css#67CFE9
support.constant.property-value.css, constant.other.color.rgb-value.css#E8DC78