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.background#0D011E
  • activityBar.foreground#FFFFD8
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#FF78B1
  • activityBarBadge.foreground#FFFFD8
  • badge.background#3f2680
  • badge.foreground#FFFFD8
  • breadcrumb.activeSelectionForeground#FFFFD8
  • breadcrumb.background#0D011E
  • breadcrumb.focusForeground#FFFFD8
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#0D011E
  • button.background#3f2680
  • button.foreground#FFFFD8
  • contrastBorder#0D011E
  • debugToolBar.background#0D011E
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FD1D5350
  • dropdown.background#0D011E
  • dropdown.border#0D011E
  • dropdown.foreground#FFFFD8
  • editor.background#0D011E
  • editor.findMatchBackground#FD947C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foreground#FFFFD8
  • editor.hoverHighlightBackground#0D011E
  • editor.lineHighlightBorder#361766
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#3f2680
  • editor.selectionHighlightBackground#443858
  • editor.snippetFinalTabstopHighlightBackground#0D011E
  • editor.snippetFinalTabstopHighlightBorder#50FA7B
  • editor.snippetTabstopHighlightBackground#0D011E
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#2BDCFF50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FD1D53
  • editorGroup.border#BD93F9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0D011E
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FD1D5380
  • editorGutter.modifiedBackground#2BDCFF80
  • editorHoverWidget.background#0D011E
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FF78B190
  • editorIndentGuide.background#BD93F990
  • editorLineNumber.activeForeground#FF78B1
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#2BDCFF
  • editorMarkerNavigation.background#0D011E
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#0D011E
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#FD1D5380
  • editorOverviewRuler.errorForeground#FD1D5380
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#2BDCFF80
  • editorOverviewRuler.modifiedForeground#2BDCFF80
  • editorOverviewRuler.selectionHighlightForeground#FD947C
  • editorOverviewRuler.warningForeground#FD947C80
  • editorOverviewRuler.wordHighlightForeground#2BDCFF
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#0D011E
  • editorSuggestWidget.foreground#FFFFD8
  • editorSuggestWidget.selectedBackground#3f2680
  • editorWarning.foreground#2BDCFF
  • editorWhitespace.foreground#424450
  • editorWidget.background#0D011E
  • errorForeground#FD1D53
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#FFFFD8
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#6272A4
  • foreground#FFFFD8
  • gitDecoration.conflictingResourceForeground#FD947C
  • gitDecoration.deletedResourceForeground#FD1D53
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#2BDCFF
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#0D011E
  • input.border#0D011E
  • input.foreground#FFFFD8
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#FD1D53
  • inputValidation.infoBorder#FF78B1
  • inputValidation.warningBorder#FD947C
  • list.activeSelectionBackground#3f2680
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#3f2680
  • list.errorForeground#FD1D53
  • list.focusBackground#44475A75
  • list.highlightForeground#2BDCFF
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FD947C
  • listFilterWidget.background#0D011E
  • listFilterWidget.noMatchesOutline#FD1D53
  • listFilterWidget.outline#443858
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#BD93F990
  • notification.background#0D011E
  • notification.buttonBackground#3f2680
  • notification.buttonForeground#FFFFD8
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#FD1D53
  • notification.errorForeground#FFFFD8
  • notification.foreground#FFFFD8
  • notification.infoBackground#2BDCFF
  • notification.infoForeground#0D011E
  • notification.warningBackground#FD947C
  • notification.warningForeground#0D011E
  • panel.background#0D011E
  • panel.border#BD93F9
  • panelTitle.activeBorder#FF78B1
  • panelTitle.activeForeground#FFFFD8
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#3f2680
  • peekViewEditor.background#0D011E
  • peekViewEditor.matchHighlightBackground#FFFA5080
  • peekViewResult.background#0D011E
  • peekViewResult.fileForeground#FFFFD8
  • peekViewResult.lineForeground#FFFFD8
  • peekViewResult.matchHighlightBackground#FFFA5080
  • peekViewResult.selectionBackground#3f2680
  • peekViewResult.selectionForeground#FFFFD8
  • peekViewTitle.background#0D011E
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#FFFFD8
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#2BDCFF
  • progressBar.background#FF78B1
  • scrollbarSlider.activeBackground#BD93F960
  • scrollbarSlider.background#3f268060
  • scrollbarSlider.hoverBackground#BD93F980
  • selection.background#BD93F9
  • settings.checkboxBackground#3f2680
  • settings.checkboxBorder#0D011E
  • settings.checkboxForeground#FFFFD8
  • settings.dropdownBackground#3f2680
  • settings.dropdownBorder#0D011E
  • settings.dropdownForeground#FFFFD8
  • settings.headerForeground#FFFFD8
  • settings.modifiedItemForeground#FD947C
  • settings.modifiedItemIndicator#FD947C
  • settings.numberInputBackground#3f2680
  • settings.numberInputBorder#0D011E
  • settings.numberInputForeground#FFFFD8
  • settings.textInputBackground#3f2680
  • settings.textInputBorder#0D011E
  • settings.textInputForeground#FFFFD8
  • sideBar.background#0D011E
  • sideBarSectionHeader.background#0D011E
  • sideBarSectionHeader.border#0D011E
  • sideBarTitle.foreground#FFFFD8
  • statusBar.background#0D011E
  • statusBar.debuggingBackground#FD1D53
  • statusBar.debuggingForeground#0D011E
  • statusBar.foreground#FFFFD8
  • statusBar.noFolderBackground#0D011E
  • statusBar.noFolderForeground#FFFFD8
  • statusBarItem.prominentBackground#FD1D53
  • statusBarItem.prominentHoverBackground#FD947C
  • tab.activeBackground#0D011E
  • tab.activeBorder#FF78B180
  • tab.activeForeground#FFFFD8
  • tab.border#0D011E
  • tab.inactiveBackground#0D011E
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#0D011E
  • terminal.foreground#FFFFD8
  • titleBar.activeBackground#0D011E
  • titleBar.activeForeground#FFFFD8
  • titleBar.inactiveBackground#0D011E
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#0D011E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
source#FFFFD8
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FD1D53
markup.changed#FD947C
invalid#FD1D53underline italic
invalid.deprecated#FFFFD8underline italic
entity.name.filename#FFFA50
markup.error#FD1D53
markup.underlineunderline
markup.bold#FD947Cbold
markup.heading#BD93F9bold
markup.italic#FFFA50italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2BDCFF
markup.inline.raw, markup.raw.restructuredtext#50FA7B
markup.underline.link, markup.underline.link.image#2BDCFF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#2BDCFF
entity.name.directive.restructuredtext, markup.quote#FFFA50italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B
punctuation.definition.constant.restructuredtext#BD93F9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BD93F9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#FFFFD8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFFA50
entity.name.type.class#2BDCFFnormal
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#BD93F9italic
entity.other.inherited-class#2BDCFFitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF78B190
comment.block.documentation entity.name.type#2BDCFF90italic
comment.block.documentation entity.name.type punctuation.definition.bracket#2BDCFF90
comment.block.documentation variable#FFFA5090italic
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#FF78B1
entity.name.tag#BD93F9
entity.other.attribute-name.parent-selector#FF78B1
entity.other.attribute-name#FFC4E8italic
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#2BDCFF
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#FD947Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#FD947C
keyword.control.elixir#FF78B1
keyword.control.new, keyword.operator.newbold
meta.selector#FF78B1
support#2BDCFFitalic
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
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#FF78B1
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#FFFA5090
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#BDF3FF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2BDCFF
constant.other.date, constant.other.timestamp#FD947C
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF78B1regular
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#2BDCFFitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FD947C
storage.modifier#FF78B1
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFFA50
punctuation.definition.group.capture.regexp#FF78B1
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FD1D53
punctuation.definition.character-class.regexp#2BDCFF
punctuation.definition.group.regexp#FD947C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FD1D53
meta.assertion.look-ahead.regexp#50FA7B
string#BDF3FF
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#FFC4E8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FD947Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#FFFFD8normal
meta.selectionset.graphql variable#FFFA50
meta.selectionset.graphql meta.arguments variable#FFFFD8
entity.name.fragment.graphql, variable.fragment.graphql#2BDCFF
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#FFFFD8
source.shell variable.other#BD93F9
support.constant#BD93F9normal
meta.scope.prerequisites.makefile#FFFA50
meta.attribute-selector.scss#FFFA50
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#FFFFD8
meta.preprocessor.haskell#6272A4