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.activeBorder#c0caf580
  • activityBar.background#1a1b26
  • activityBar.border#1a1b26
  • activityBar.foreground#7aa2f7
  • activityBar.inactiveForeground#c0caf590
  • activityBarBadge.background#7aa2f7
  • activityBarBadge.foreground#1a1b26
  • badge.background#7aa2f7
  • badge.foreground#292e42
  • breadcrumb.activeSelectionForeground#c0caf5
  • breadcrumb.background#1a1b26
  • breadcrumb.focusForeground#c0caf5
  • breadcrumb.foreground#7aa2f7
  • breadcrumbPicker.background#292e42
  • button.background#7aa2f7
  • button.foreground#1a1b26
  • button.hoverBackground#7aa2f790
  • button.secondaryBackground#7aa2f790
  • button.secondaryForeground#292e42
  • button.secondaryHoverBackground#7aa2f780
  • descriptionForeground#c0caf5
  • dropdown.background#292e42
  • dropdown.border#c0caf5
  • dropdown.foreground#c0caf5
  • editor.background#1a1b26
  • editor.findMatchBackground#7aa2f785
  • editor.findMatchBorder#7aa2f7
  • editor.findMatchHighlightBackground#7aa2f740
  • editor.findMatchHighlightBorder#7aa2f780
  • editor.findRangeHighlightBackground#7aa2f740
  • editor.findRangeHighlightBorder#7aa2f780
  • editor.foreground#c0caf5
  • editor.hoverHighlightBackground#7aa2f740
  • editor.inactiveSelectionBackground#7aa2f740
  • editor.lineHighlightBackground#292e42
  • editor.lineHighlightBorder#292e42
  • editor.rangeHighlightBackground#7aa2f740
  • editor.rangeHighlightBorder#7aa2f780
  • editor.selectionBackground#33467c
  • editor.selectionForeground#c0caf5
  • editor.selectionHighlightBackground#29294590
  • editor.symbolHighlightBackground#7aa2f740
  • editor.symbolHighlightBorder#7aa2f780
  • editor.wordHighlightBackground#7aa2f740
  • editor.wordHighlightBorder#7aa2f780
  • editor.wordHighlightStrongBackground#7aa2f740
  • editor.wordHighlightStrongBorder#7aa2f780
  • editorBracketHighlight.foreground1#c0caf5
  • editorBracketHighlight.foreground2#c0caf5
  • editorBracketHighlight.foreground3#c0caf5
  • editorBracketHighlight.foreground4#c0caf5
  • editorBracketHighlight.foreground5#c0caf5
  • editorBracketHighlight.foreground6#c0caf5
  • editorCodeLens.foreground#7aa2f7
  • editorCursor.background#1a1b26
  • editorCursor.foreground#c0caf5
  • editorError.border#f7768e80
  • editorError.foreground#f7768e
  • editorGhostText.background#292e42
  • editorGhostText.foreground#c0caf5
  • editorGroup.border#7aa2f7
  • editorGroupHeader.noTabsBackground#1a1b26
  • editorGroupHeader.tabsBackground#1a1b26
  • editorGroupHeader.tabsBorder#1a1b26
  • editorGutter.addedBackground#9ece6a
  • editorGutter.background#1a1b26
  • editorGutter.deletedBackground#f7768e
  • editorGutter.foldingControlForeground#7aa2f7
  • editorGutter.modifiedBackground#7aa2f7
  • editorHoverWidget.background#292e42
  • editorHoverWidget.border#7aa2f7
  • editorHoverWidget.foreground#c0caf5
  • editorIndentGuide.activeBackground#7aa2f7
  • editorIndentGuide.background#7aa2f740
  • editorInfo.border#7aa2f780
  • editorInfo.foreground#7aa2f7
  • editorLineNumber.activeForeground#c0caf5
  • editorLineNumber.foreground#7aa2f785
  • editorLink.activeForeground#7aa2f7
  • editorMarkerNavigation.background#292e42
  • editorMarkerNavigationError.background#f7768e
  • editorMarkerNavigationInfo.background#7aa2f7
  • editorMarkerNavigationWarning.background#e0af68
  • editorOverviewRuler.addedForeground#9ece6a
  • editorOverviewRuler.background#1a1b26
  • editorOverviewRuler.border#7aa2f7
  • editorOverviewRuler.deletedForeground#f7768e
  • editorOverviewRuler.errorForeground#f7768e
  • editorOverviewRuler.findMatchForeground#7aa2f7
  • editorOverviewRuler.infoForeground#7aa2f7
  • editorOverviewRuler.modifiedForeground#7aa2f7
  • editorOverviewRuler.rangeHighlightForeground#7aa2f7
  • editorOverviewRuler.selectionHighlightForeground#7aa2f7
  • editorOverviewRuler.warningForeground#e0af68
  • editorOverviewRuler.wordHighlightForeground#7aa2f7
  • editorOverviewRuler.wordHighlightStrongForeground#7aa2f7
  • editorRuler.foreground#7aa2f7
  • editorSuggestWidget.background#292e42
  • editorSuggestWidget.border#7aa2f7
  • editorSuggestWidget.foreground#c0caf5
  • editorSuggestWidget.highlightForeground#7aa2f7
  • editorSuggestWidget.selectedBackground#7aa2f785
  • editorWarning.border#e0af6880
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#c0caf530
  • editorWidget.background#292e42
  • editorWidget.border#7aa2f7
  • editorWidget.foreground#c0caf5
  • editorWidget.resizeBorder#7aa2f7
  • errorForeground#f7768e
  • extensionButton.prominentBackground#7aa2f7
  • extensionButton.prominentForeground#1a1b26
  • extensionButton.prominentHoverBackground#7aa2f785
  • focusBorder#7aa2f7
  • foreground#c0caf5
  • gitDecoration.conflictingResourceForeground#e0af6885
  • gitDecoration.deletedResourceForeground#f7768e85
  • gitDecoration.ignoredResourceForeground#c0caf585
  • gitDecoration.modifiedResourceForeground#7aa2f785
  • gitDecoration.submoduleResourceForeground#7aa2f7
  • gitDecoration.untrackedResourceForeground#9ece6a85
  • icon.foreground#c0caf5
  • input.background#292e42
  • input.border#c0caf5
  • input.foreground#7aa2f7
  • input.placeholderForeground#c0caf5
  • inputOption.activeBackground#7aa2f7
  • inputOption.activeBorder#7aa2f7
  • inputOption.activeForeground#c0caf590
  • inputValidation.errorBackground#292e42
  • inputValidation.errorBorder#f7768e
  • inputValidation.infoBackground#1a1b26
  • inputValidation.infoBorder#7aa2f7
  • inputValidation.warningBackground#1a1b26
  • inputValidation.warningBorder#7aa2f7
  • keybindingLabel.background#292e42
  • keybindingLabel.border#7aa2f7
  • keybindingLabel.bottomBorder#7aa2f7
  • keybindingLabel.foreground#7aa2f7
  • list.activeSelectionBackground#7aa2f785
  • list.activeSelectionForeground#7aa2f7
  • list.deemphasizedForeground#7aa2f785
  • list.errorForeground#f7768e
  • list.filterMatchBackground#7aa2f785
  • list.filterMatchBorder#7aa2f7
  • list.focusBackground#7aa2f785
  • list.focusForeground#7aa2f7
  • list.focusOutline#7aa2f7
  • list.highlightForeground#7aa2f7
  • list.hoverBackground#7aa2f785
  • list.inactiveSelectionBackground#7aa2f785
  • list.inactiveSelectionForeground#7aa2f7
  • list.invalidItemForeground#7aa2f7
  • listFilterWidget.background#292e42
  • listFilterWidget.noMatchesOutline#f7768e
  • listFilterWidget.outline#7aa2f7
  • minimap.background#1a1b26
  • minimap.errorHighlight#f7768e
  • minimap.findMatchHighlight#7aa2f785
  • minimap.selectionHighlight#c0caf585
  • minimapGutter.addedBackground#9ece6a
  • minimapGutter.deletedBackground#f7768e
  • minimapGutter.modifiedBackground#7aa2f7
  • notification.background#292e42
  • notification.buttonBackground#7aa2f7
  • notification.buttonForeground#1a1b26
  • notification.buttonHoverBackground#7aa2f785
  • notification.errorBackground#f7768e
  • notification.errorForeground#1a1b26
  • notification.foreground#c0caf5
  • notification.infoBackground#7aa2f7
  • notification.infoForeground#1a1b26
  • notification.warningBackground#e0af68
  • notification.warningForeground#1a1b26
  • panel.background#1a1b26
  • panel.border#7aa2f7
  • panelTitle.activeBorder#7aa2f7
  • panelTitle.activeForeground#c0caf5
  • panelTitle.inactiveForeground#7aa2f785
  • peekView.background#292e42
  • peekView.border#7aa2f7
  • peekViewEditor.background#1a1b26
  • peekViewEditor.matchHighlightBackground#7aa2f740
  • peekViewResult.background#292e42
  • peekViewResult.fileForeground#c0caf5
  • peekViewResult.lineForeground#7aa2f7
  • peekViewResult.matchHighlightBackground#7aa2f740
  • peekViewResult.selectionBackground#7aa2f785
  • peekViewResult.selectionForeground#c0caf5
  • peekViewTitle.background#7aa2f7
  • peekViewTitleDescription.foreground#1a1b26
  • peekViewTitleLabel.foreground#1a1b26
  • pickerGroup.border#7aa2f7
  • pickerGroup.foreground#7aa2f7
  • progressBar.background#7aa2f7
  • scrollbar.shadow#7aa2f7
  • scrollbarSlider.activeBackground#7aa2f7
  • scrollbarSlider.background#7aa2f7
  • scrollbarSlider.hoverBackground#7aa2f7
  • selection.background#7aa2f740
  • settings.headerForeground#7aa2f7
  • settings.modifiedItemIndicator#7aa2f7
  • sideBar.background#1a1b26
  • sideBar.border#1a1b26
  • sideBarSectionHeader.background#1a1b26
  • sideBarSectionHeader.border#1a1b26
  • sideBarSectionHeader.foreground#7aa2f7
  • sideBarTitle.foreground#7aa2f7
  • statusBar.background#1a1b26
  • statusBar.border#1a1b26
  • statusBar.debuggingBackground#f7768e
  • statusBar.debuggingForeground#1a1b26
  • statusBar.foreground#c0caf5
  • statusBar.noFolderBackground#1a1b26
  • statusBar.noFolderForeground#c0caf5
  • statusBarItem.activeBackground#7aa2f7
  • statusBarItem.hoverBackground#7aa2f785
  • statusBarItem.prominentBackground#7aa2f7
  • statusBarItem.prominentHoverBackground#7aa2f785
  • tab.activeBackground#292e42
  • tab.activeBorder#7aa2f7
  • tab.activeBorderTop#7aa2f7
  • tab.activeForeground#c0caf5
  • tab.border#1a1b26
  • tab.hoverBackground#292e42
  • tab.hoverBorder#7aa2f7
  • tab.hoverForeground#c0caf5
  • tab.inactiveBackground#1a1b26
  • tab.inactiveForeground#7aa2f785
  • tab.unfocusedActiveBackground#292e42
  • tab.unfocusedActiveBorder#7aa2f785
  • tab.unfocusedActiveBorderTop#7aa2f785
  • tab.unfocusedActiveForeground#c0caf585
  • tab.unfocusedHoverBackground#292e42
  • tab.unfocusedHoverBorder#7aa2f785
  • tab.unfocusedHoverForeground#c0caf585
  • tab.unfocusedInactiveBackground#1a1b26
  • tab.unfocusedInactiveForeground#7aa2f785
  • terminal.ansiBlack#1a1b26
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#565f89
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#c0caf5
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#c0caf5
  • terminal.ansiYellow#e0af68
  • terminal.background#1a1b26
  • terminal.foreground#c0caf5
  • terminal.selectionBackground#33467c
  • terminal.selectionForeground#c0caf5
  • textBlockQuote.background#292e42
  • textLink.activeForeground#c0caf590
  • textLink.foreground#7aa2f7
  • textPreformat.foreground#7aa2f7
  • titleBar.activeBackground#1a1b26
  • titleBar.activeForeground#c0caf5
  • titleBar.border#1a1b26
  • titleBar.inactiveBackground#1a1b26
  • titleBar.inactiveForeground#c0caf585
  • tree.indentGuidesStroke#7aa2f7
  • widget.shadow#c0caf590

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#c0caf5
variable.other.generic-type.haskell#c0caf5
storage.type.haskell#c0caf5
support.variable.magic.python#c0caf5
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#c0caf5
variable.parameter.function.language.special.self.python#c0caf5
storage.modifier.lifetime.rust#c0caf5
support.function.std.rust#c0caf5
entity.name.lifetime.rust#c0caf5
variable.language.rust#c0caf5
support.constant.edge#c0caf5
constant.other.character-class.regexp#c0caf5
keyword.operator.quantifier.regexp#c0caf5
punctuation.definition.string.begin,punctuation.definition.string.end#c0caf5
variable.parameter.function#c0caf5
comment markup.link#565f89
markup.changed.diff#c0caf5
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#c0caf5
markup.inserted.diff#c0caf5
markup.deleted.diff#c0caf5
meta.function.c,meta.function.cpp#c0caf5
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#c0caf5
punctuation.separator.key-value#c0caf5
punctuation.terminator.statement.js,punctuation.terminator.statement.ts,punctuation.terminator.statement.tsx#c0caf5
support.constant.math#c0caf5
support.constant.property.math#c0caf5
variable.other.constant.js,variable.other.constant.ts,variable.other.constant.tsx#c0caf5
storage.type.annotation.java,storage.type.object.array.java#c0caf5
source.java#c0caf5
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#c0caf5
meta.method.java#c0caf5
storage.modifier.import.java,storage.type.java,storage.type.generic.java#c0caf5
keyword.operator.instanceof.java#c0caf5
meta.definition.variable.name.java#c0caf5
keyword.operator.logical#c0caf5
keyword.operator.bitwise#c0caf5
keyword.operator.channel#c0caf5
support.constant.property-value.scss,support.constant.property-value.css#c0caf5
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.section.embedded#c0caf5
string.regexp#c0caf5
constant.character.escape#c0caf5
punctuation.section.embedded, variable.interpolation#c0caf5
invalid.illegal#f7768e
invalid.broken#f7768e
invalid.deprecated#f7768e
invalid.unimplemented#f7768e
source.json#c0caf5
source.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
text.html.markdown, punctuation.definition.list_item.markdown#c0caf5
text.html.markdown markup.inline.raw.markdown#c0caf5
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#c0caf5
text.html.markdown meta.dummy.line-break#c0caf5
markdown.heading, markup.heading | markup.heading entity.name.section, markup.heading.markdown punctuation.definition.heading.markdown#c0caf5
markup.italic#c0caf5italic
markup.bold, markup.bold.markdown#c0caf5bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic, markup.italic markup.bold#c0caf5bold italic
markup.underline#c0caf5underline
markup.strike#c0caf5strikethrough
markup.quote punctuation.definition.blockquote.markdown#565f89
markup.quote#c0caf5italic
string.other.link.title.markdown#c0caf5
string.other.link.description.title.markdown#c0caf5
constant.other.reference.link.markdown#c0caf5
markup.raw.block#c0caf5
markup.raw.block.fenced.markdown#c0caf500
punctuation.definition.fenced.markdown#c0caf500
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c0caf5
variable.language.fenced.markdown#565f89
meta.separator#565f89bold
markup.table#c0caf5
token.info-token#7aa2f7
token.warn-token#e0af68
token.error-token#f7768e
token.debug-token#bb9af7
variable.language#c0caf5
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#c0caf5
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#c0caf5
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#c0caf5
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#c0caf5
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#c0caf5
variable.other.constant, variable.other.enummember, keyword.other.unit#c0caf5
meta.object-literal.key#c0caf5
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#c0caf5
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#c0caf5
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#c0caf5
keyword.operator.or.regexp, keyword.control.anchor.regexp#c0caf5
keyword.operator.quantifier.regexp#c0caf5
constant.character#c0caf5
constant.character.escape#c0caf5
entity.name.label#c0caf5
comment, punctuation.definition.comment#565f89italic