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#7b7f8b
  • activityBarBadge.background#FF78B1
  • activityBarBadge.foreground#FFFFD8
  • badge.background#3f2680
  • badge.foreground#FFFFD8
  • breadcrumb.activeSelectionForeground#FFFFD8
  • breadcrumb.background#0D011E
  • breadcrumb.focusForeground#FFFFD8
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#0D011E
  • button.background#3f2680
  • button.foreground#FFFFD8
  • contrastBorder#0D011E
  • debugToolBar.background#0D011E
  • diffEditor.insertedTextBackground#62e88420
  • 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#bf9eee15
  • editor.selectionBackground#3f2680
  • editor.selectionHighlightBackground#443858
  • editor.snippetFinalTabstopHighlightBackground#0D011E
  • editor.snippetFinalTabstopHighlightBorder#62e884
  • editor.snippetTabstopHighlightBackground#0D011E
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#2BDCFF50
  • editor.wordHighlightStrongBackground#62e88450
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#FD1D53
  • editorGroup.border#bf9eee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0D011E
  • editorGutter.addedBackground#62e88480
  • editorGutter.deletedBackground#FD1D5380
  • editorGutter.modifiedBackground#2BDCFF80
  • editorHoverWidget.background#0D011E
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#FF78B190
  • editorIndentGuide.background#bf9eee90
  • editorLineNumber.activeForeground#FF78B1
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#2BDCFF
  • editorMarkerNavigation.background#0D011E
  • editorOverviewRuler.addedForeground#62e88480
  • editorOverviewRuler.border#0D011E
  • editorOverviewRuler.currentContentForeground#62e884
  • editorOverviewRuler.deletedForeground#FD1D5380
  • editorOverviewRuler.errorForeground#FD1D5380
  • editorOverviewRuler.incomingContentForeground#bf9eee
  • editorOverviewRuler.infoForeground#2BDCFF80
  • editorOverviewRuler.modifiedForeground#2BDCFF80
  • editorOverviewRuler.selectionHighlightForeground#FD947C
  • editorOverviewRuler.warningForeground#FD947C80
  • editorOverviewRuler.wordHighlightForeground#2BDCFF
  • editorOverviewRuler.wordHighlightStrongForeground#62e884
  • 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#62e88490
  • extensionButton.prominentForeground#FFFFD8
  • extensionButton.prominentHoverBackground#62e88460
  • focusBorder#7b7f8b
  • foreground#FFFFD8
  • gitDecoration.conflictingResourceForeground#FD947C
  • gitDecoration.deletedResourceForeground#FD1D53
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#2BDCFF
  • gitDecoration.untrackedResourceForeground#62e884
  • input.background#0D011E
  • input.border#0D011E
  • input.foreground#FFFFD8
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#bf9eee
  • 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#62e88490
  • merge.incomingHeaderBackground#bf9eee90
  • 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#bf9eee
  • panelTitle.activeBorder#FF78B1
  • panelTitle.activeForeground#FFFFD8
  • panelTitle.inactiveForeground#7b7f8b
  • 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#7b7f8b
  • peekViewTitleLabel.foreground#FFFFD8
  • pickerGroup.border#bf9eee
  • pickerGroup.foreground#2BDCFF
  • progressBar.background#FF78B1
  • scrollbarSlider.activeBackground#bf9eee60
  • scrollbarSlider.background#3f268060
  • scrollbarSlider.hoverBackground#bf9eee80
  • selection.background#bf9eee
  • 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#7b7f8b
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#bf9eee
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#97e1f1
  • terminal.ansiGreen#62e884
  • terminal.ansiMagenta#f286c4
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e7ee98
  • terminal.background#0D011E
  • terminal.foreground#FFFFD8
  • titleBar.activeBackground#0D011E
  • titleBar.activeForeground#FFFFD8
  • titleBar.inactiveBackground#0D011E
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#0D011E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#bf9eee
source#FFFFD8
meta.diff, meta.diff.header#7b7f8b
markup.inserted#62e884
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#bf9eeebold
markup.italic#FFFA50italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2BDCFF
markup.inline.raw, markup.raw.restructuredtext#62e884
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#7b7f8b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#62e884
punctuation.definition.constant.restructuredtext#bf9eee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bf9eee
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#bf9eeeitalic
entity.other.inherited-class#2BDCFFitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b
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#bf9eee
constant.character.escape, constant.character.string.escape, constant.regexp#FF78B1
entity.name.tag#bf9eee
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#62e884italic
meta.decorator variable.other.object#62e884
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#bf9eeeregular
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#62e884italic 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#62e884
string#BDF3FF
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2
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#7b7f8b
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#bf9eee
support.constant#bf9eeenormal
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#7b7f8b