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#E04A7C12
  • activityBar.activeBorder#E04A7C
  • activityBar.background#16172CE6
  • activityBar.border#FFFFFF0A
  • activityBar.foreground#EFEFF0
  • activityBar.inactiveForeground#9899B0
  • activityBarBadge.background#E04A7C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E04A7C
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#EFEFF0
  • breadcrumb.background#1A1B2EF2
  • breadcrumb.focusForeground#EFEFF0
  • breadcrumb.foreground#5C5D7A
  • breadcrumbPicker.background#16172CE6
  • button.background#9B7FCF
  • button.foreground#FFFFFF
  • button.hoverBackground#A88FDD
  • button.secondaryBackground#2A2B45
  • button.secondaryForeground#EFEFF0
  • button.secondaryHoverBackground#343660
  • checkbox.background#1A1B2ECC
  • checkbox.border#FFFFFF15
  • checkbox.foreground#EFEFF0
  • debugToolBar.background#1E1F35E6
  • descriptionForeground#9899B0
  • disabledForeground#5C5D7A
  • dropdown.background#1E1F35D9
  • dropdown.border#FFFFFF15
  • dropdown.foreground#EFEFF0
  • dropdown.listBackground#1E1F35D9
  • editor.background#1A1B2EF2
  • editor.findMatchBackground#D4A85350
  • editor.findMatchHighlightBackground#D4A85325
  • editor.findRangeHighlightBackground#FFFFFF0A
  • editor.foreground#EFEFF0
  • editor.hoverHighlightBackground#7EC8E320
  • editor.lineHighlightBackground#FFFFFF08
  • editor.lineHighlightBorder#FFFFFF00
  • editor.rangeHighlightBackground#9B7FCF15
  • editor.selectionBackground#7EC8E340
  • editor.selectionHighlightBackground#9B7FCF30
  • editor.snippetFinalTabstopHighlightBackground#1A1B2E
  • editor.snippetFinalTabstopHighlightBorder#6BCB9E
  • editor.snippetTabstopHighlightBackground#1A1B2E
  • editor.snippetTabstopHighlightBorder#5C5D7A
  • editor.wordHighlightBackground#D4A85340
  • editor.wordHighlightStrongBackground#6BCB9E40
  • editorBracketHighlight.foreground1#EFEFF0
  • editorBracketHighlight.foreground2#E04A7C
  • editorBracketHighlight.foreground3#7EC8E3
  • editorBracketHighlight.foreground4#6BCB9E
  • editorBracketHighlight.foreground5#9B7FCF
  • editorBracketHighlight.foreground6#D4A853
  • editorBracketHighlight.unexpectedBracket.foreground#E05A5A
  • editorBracketMatch.background#1E1F35E6
  • editorBracketMatch.border#7EC8E3
  • editorCodeLens.foreground#5C5D7A
  • editorCursor.foreground#7EC8E3
  • editorError.foreground#E05A5A
  • editorGroup.border#FFFFFF0A
  • editorGroup.dropBackground#9B7FCF30
  • editorGroupHeader.tabsBackground#16172CCC
  • editorGroupHeader.tabsBorder#FFFFFF0A
  • editorGutter.addedBackground#6BCB9E80
  • editorGutter.background#1A1B2EF2
  • editorGutter.deletedBackground#E05A5A80
  • editorGutter.modifiedBackground#7EC8E380
  • editorHint.foreground#9B7FCF
  • editorHoverWidget.background#1A1B2EF2
  • editorHoverWidget.border#FFFFFF15
  • editorIndentGuide.activeBackground1#FFFFFF30
  • editorIndentGuide.background1#FFFFFF12
  • editorInfo.foreground#7EC8E3
  • editorLineNumber.activeForeground#9899B0
  • editorLineNumber.foreground#5C5D7A
  • editorLink.activeForeground#7EC8E3
  • editorOverviewRuler.addedForeground#6BCB9E80
  • editorOverviewRuler.border#FFFFFF06
  • editorOverviewRuler.currentContentForeground#6BCB9E
  • editorOverviewRuler.deletedForeground#E05A5A80
  • editorOverviewRuler.errorForeground#E05A5A80
  • editorOverviewRuler.incomingContentForeground#9B7FCF
  • editorOverviewRuler.infoForeground#7EC8E380
  • editorOverviewRuler.modifiedForeground#7EC8E380
  • editorOverviewRuler.selectionHighlightForeground#D4A853
  • editorOverviewRuler.warningForeground#D4A85380
  • editorOverviewRuler.wordHighlightForeground#7EC8E3
  • editorOverviewRuler.wordHighlightStrongForeground#6BCB9E
  • editorRuler.foreground#FFFFFF12
  • editorSuggestWidget.background#1E1F35E6
  • editorSuggestWidget.foreground#EFEFF0
  • editorSuggestWidget.highlightForeground#7EC8E3
  • editorSuggestWidget.selectedBackground#1A1B2EE6
  • editorWarning.foreground#D4A853
  • editorWhitespace.foreground#FFFFFF12
  • editorWidget.background#1E1F35E6
  • editorWidget.border#FFFFFF15
  • errorForeground#E05A5A
  • extensionButton.prominentBackground#6BCB9E90
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#6BCB9E60
  • focusBorder#9B7FCF80
  • foreground#EFEFF0
  • gitDecoration.addedResourceForeground#6BCB9E
  • gitDecoration.conflictingResourceForeground#D4A853
  • gitDecoration.deletedResourceForeground#E05A5A
  • gitDecoration.ignoredResourceForeground#5C5D7A
  • gitDecoration.modifiedResourceForeground#7EC8E3
  • gitDecoration.untrackedResourceForeground#6BCB9E
  • icon.foreground#7EC8E3
  • input.background#1A1B2ECC
  • input.border#FFFFFF15
  • input.foreground#EFEFF0
  • input.placeholderForeground#5C5D7A
  • inputOption.activeBackground#FFFFFF15
  • inputOption.activeBorder#9B7FCF
  • inputOption.activeForeground#EFEFF0
  • inputValidation.errorBorder#E05A5A
  • inputValidation.infoBorder#7EC8E3
  • inputValidation.warningBorder#D4A853
  • list.activeSelectionBackground#E04A7C30
  • list.activeSelectionForeground#EFEFF0
  • list.dropBackground#9B7FCF30
  • list.errorForeground#E05A5A
  • list.focusBackground#9B7FCF30
  • list.focusForeground#EFEFF0
  • list.highlightForeground#7EC8E3
  • list.hoverBackground#FFFFFF0A
  • list.hoverForeground#EFEFF0
  • list.inactiveSelectionBackground#FFFFFF0A
  • list.inactiveSelectionForeground#EFEFF0
  • list.warningForeground#D4A853
  • listFilterWidget.background#1E1F35E6
  • listFilterWidget.noMatchesOutline#E05A5A
  • listFilterWidget.outline#2A2B45
  • merge.border#FFFFFF0A
  • merge.commonContentBackground#1E1F35
  • merge.commonHeaderBackground#FFFFFF0A
  • merge.currentContentBackground#6BCB9E20
  • merge.currentHeaderBackground#6BCB9E50
  • merge.incomingContentBackground#9B7FCF20
  • merge.incomingHeaderBackground#9B7FCF50
  • minimap.errorHighlight#E05A5A
  • minimap.findMatchHighlight#D4A85360
  • minimap.selectionHighlight#9B7FCF30
  • minimap.warningHighlight#D4A853
  • minimapGutter.addedBackground#6BCB9E80
  • minimapGutter.deletedBackground#E05A5A80
  • minimapGutter.modifiedBackground#7EC8E380
  • notificationCenter.border#FFFFFF15
  • notificationCenterHeader.background#1E1F35E6
  • notificationLink.foreground#7EC8E3
  • notifications.background#1E1F35E6
  • notifications.border#FFFFFF0A
  • notifications.foreground#EFEFF0
  • panel.background#1A1B2EF2
  • panel.border#FFFFFF0A
  • panel.dropBackground#9B7FCF30
  • panelTitle.activeBorder#E04A7C
  • panelTitle.activeForeground#EFEFF0
  • panelTitle.inactiveForeground#9899B0
  • peekView.border#FFFFFF0A
  • peekViewEditor.background#1A1B2EF2
  • peekViewEditor.matchHighlightBackground#D4A85340
  • peekViewResult.background#1E1F35D9
  • peekViewResult.fileForeground#EFEFF0
  • peekViewResult.lineForeground#EFEFF0
  • peekViewResult.matchHighlightBackground#D4A85340
  • peekViewResult.selectionBackground#E04A7C30
  • peekViewResult.selectionForeground#EFEFF0
  • peekViewTitle.background#16172CE6
  • peekViewTitleDescription.foreground#9899B0
  • peekViewTitleLabel.foreground#EFEFF0
  • pickerGroup.border#9B7FCF
  • pickerGroup.foreground#7EC8E3
  • problemsErrorIcon.foreground#E05A5A
  • problemsInfoIcon.foreground#7EC8E3
  • problemsWarningIcon.foreground#D4A853
  • progressBar.background#7EC8E3
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7EC8E360
  • scrollbarSlider.background#FFFFFF15
  • scrollbarSlider.hoverBackground#FFFFFF25
  • selection.background#7EC8E340
  • settings.checkboxBackground#1E1F35
  • settings.checkboxBorder#FFFFFF15
  • settings.checkboxForeground#EFEFF0
  • settings.dropdownBackground#1E1F35
  • settings.dropdownBorder#FFFFFF15
  • settings.dropdownForeground#EFEFF0
  • settings.headerForeground#EFEFF0
  • settings.modifiedItemIndicator#D4A853
  • settings.numberInputBackground#1E1F35
  • settings.numberInputBorder#FFFFFF15
  • settings.numberInputForeground#EFEFF0
  • settings.textInputBackground#1E1F35
  • settings.textInputBorder#FFFFFF15
  • settings.textInputForeground#EFEFF0
  • sideBar.background#1E1F35D9
  • sideBar.border#FFFFFF0A
  • sideBar.foreground#EFEFF0
  • sideBarSectionHeader.background#1A1B2ECC
  • sideBarSectionHeader.border#FFFFFF0A
  • sideBarSectionHeader.foreground#EFEFF0
  • sideBarTitle.foreground#EFEFF0
  • statusBar.background#16172CE6
  • statusBar.border#FFFFFF06
  • statusBar.debuggingBackground#E05A5A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EFEFF0
  • statusBar.noFolderBackground#16172CE6
  • statusBar.noFolderForeground#EFEFF0
  • statusBarItem.activeBackground#FFFFFF15
  • statusBarItem.hoverBackground#FFFFFF0A
  • statusBarItem.prominentBackground#E05A5A
  • statusBarItem.prominentHoverBackground#E05A5ACC
  • statusBarItem.remoteBackground#9B7FCF
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#2A2B45D9
  • tab.activeBorderTop#E04A7C
  • tab.activeForeground#EFEFF0
  • tab.activeModifiedBorderTop#D4A853
  • tab.border#FFFFFF0A
  • tab.hoverBackground#2A2B45E6
  • tab.inactiveBackground#1E1F35CC
  • tab.inactiveForeground#9899B0
  • tab.unfocusedActiveBorderTop#E04A7C80
  • terminal.ansiBlack#1E1F35
  • terminal.ansiBlue#7EC8E3
  • terminal.ansiBrightBlack#5C5D7A
  • terminal.ansiBrightBlue#8ED4EF
  • terminal.ansiBrightCyan#7FDBAE
  • terminal.ansiBrightGreen#7FDBAE
  • terminal.ansiBrightMagenta#E8668E
  • terminal.ansiBrightRed#E07070
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#DFB866
  • terminal.ansiCyan#6BCB9E
  • terminal.ansiGreen#6BCB9E
  • terminal.ansiMagenta#E04A7C
  • terminal.ansiRed#E05A5A
  • terminal.ansiWhite#EFEFF0
  • terminal.ansiYellow#D4A853
  • terminal.background#1A1B2EF2
  • terminal.foreground#EFEFF0
  • terminal.selectionBackground#7EC8E340
  • terminalCursor.foreground#7EC8E3
  • textBlockQuote.background#1E1F35E6
  • textBlockQuote.border#9B7FCF
  • textCodeBlock.background#1E1F35B3
  • textLink.activeForeground#6BCB9E
  • textLink.foreground#7EC8E3
  • textPreformat.foreground#D4A853
  • titleBar.activeBackground#16172CE6
  • titleBar.activeForeground#EFEFF0
  • titleBar.border#FFFFFF06
  • titleBar.inactiveBackground#16172CCC
  • titleBar.inactiveForeground#9899B0
  • tree.indentGuidesStroke#FFFFFF12
  • walkThrough.embeddedEditorBackground#1E1F35E6
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9B7FCF
meta.diff, meta.diff.header#5C5D7A
markup.inserted#6BCB9E
markup.deleted#E05A5A
markup.changed#D4A853
invalid#E05A5Aunderline italic
invalid.deprecated#EFEFF0underline italic
entity.name.filename#D4A853
markup.error#E05A5A
markup.underlineunderline
markup.bold#D4A853bold
markup.heading#9B7FCFbold
markup.italic#D4A853italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7EC8E3
markup.inline.raw, markup.raw.restructuredtext#6BCB9E
markup.underline.link, markup.underline.link.image#7EC8E3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#E04A7C
entity.name.directive.restructuredtext, markup.quote#D4A853italic
meta.separator.markdown#5C5D7A
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6BCB9E
entity.name.type.class, entity.name.class#7EC8E3normal
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#9B7FCFitalic
entity.other.inherited-class#7EC8E3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5C5D7A
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#E04A7C
comment.block.documentation entity.name.type#7EC8E3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#7EC8E3
comment.block.documentation variable#D4A853italic
constant, variable.other.constant#9B7FCF
constant.character.escape, constant.character.string.escape, constant.regexp#E04A7C
entity.name.tag#E04A7C
entity.other.attribute-name.parent-selector#E04A7C
entity.other.attribute-name#6BCB9Eitalic
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#6BCB9E
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#D4A853italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6BCB9Eitalic
meta.decorator variable.other.object#6BCB9E
keyword, punctuation.definition.keyword#E04A7C
keyword.control.new, keyword.operator.newbold
meta.selector#E04A7C
support#7EC8E3italic
support.function.magic, support.variable, variable.other.predefined#9B7FCFregular
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#E04A7C
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#EFEFF0
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#E04A7C
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7EC8E3
constant.other.date, constant.other.timestamp#D4A853
variable.other.alias.yaml#6BCB9Eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#E04A7Cregular
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#7EC8E3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#D4A853
storage.modifier#E04A7C
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D4A853
punctuation.definition.group.capture.regexp#E04A7C
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E05A5A
punctuation.definition.character-class.regexp#7EC8E3
punctuation.definition.group.regexp#D4A853
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E05A5A
meta.assertion.look-ahead.regexp#6BCB9E
string#D4A853
punctuation.definition.string.begin, punctuation.definition.string.end#D4A853
variable.other.interpolated, variable.other.readwrite.js, variable.other.object.js, variable.other.property.js, variable.other.object.property.js#E04A7C
constant.numeric#9B7FCF
constant.language.boolean#9B7FCF
constant.language.null#9B7FCF
variable, variable.other#EFEFF0
support.type.property-name.css, support.type.property-name.scss#7EC8E3
support.constant.property-value.css, support.constant.property-value.scss#D4A853
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6BCB9E
support.type.property-name.json#7EC8E3
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.separator.array, punctuation.separator.block, punctuation.separator.container, punctuation.separator.object, punctuation.separator.parameter, punctuation.section.array.begin, punctuation.section.array.end, punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.interpolation.begin, punctuation.section.interpolation.end, punctuation.section.mapping, punctuation.section.sequence.begin, punctuation.section.sequence.end, punctuation.terminator, punctuation.terminator.rule, source.asp punctuation.definition.block, 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#EFEFF0
source.shell variable.other#9B7FCF
log.error#E05A5Abold
log.warning#D4A853bold