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#BD93F910
  • activityBar.activeBorder#DC6BAD80
  • activityBar.background#343746
  • activityBar.foreground#D9EBF1
  • activityBar.inactiveForeground#839199
  • activityBarBadge.background#DC6BAD
  • activityBarBadge.foreground#D9EBF1
  • badge.background#1F5470
  • badge.foreground#D9EBF1
  • breadcrumb.activeSelectionForeground#D9EBF1
  • breadcrumb.background#303048
  • breadcrumb.focusForeground#D9EBF1
  • breadcrumb.foreground#839199
  • breadcrumbPicker.background#21222C
  • button.background#1F5470
  • button.foreground#D9EBF1
  • button.secondaryBackground#303048
  • button.secondaryForeground#D9EBF1
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#2A2D3C
  • diffEditor.insertedTextBackground#88CC6720
  • diffEditor.removedTextBackground#F2647C50
  • dropdown.background#343746
  • dropdown.border#21222C
  • dropdown.foreground#D9EBF1
  • editor.background#303048
  • editor.findMatchBackground#A0713E80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#2A2D3C80
  • editor.foreground#D9EBF1
  • editor.hoverHighlightBackground#64ABBB50
  • editor.lineHighlightBorder#1F5470
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#1F5470
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#303048
  • editor.snippetFinalTabstopHighlightBorder#88CC67
  • editor.snippetTabstopHighlightBackground#303048
  • editor.snippetTabstopHighlightBorder#839199
  • editor.wordHighlightBackground#64ABBB50
  • editor.wordHighlightStrongBackground#88CC6750
  • editorBracketHighlight.foreground1#D9EBF1
  • editorBracketHighlight.foreground2#DC6BAD
  • editorBracketHighlight.foreground3#64ABBB
  • editorBracketHighlight.foreground4#88CC67
  • editorBracketHighlight.foreground5#BD93F9
  • editorBracketHighlight.foreground6#A0713E
  • editorBracketHighlight.unexpectedBracket.foreground#F2647C
  • editorCodeLens.foreground#839199
  • editorError.foreground#F2647C
  • editorGroup.border#BD93F9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#21222C
  • editorGutter.addedBackground#88CC6780
  • editorGutter.deletedBackground#F2647C80
  • editorGutter.modifiedBackground#64ABBB80
  • editorHoverWidget.background#303048
  • editorHoverWidget.border#839199
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#839199
  • editorLink.activeForeground#64ABBB
  • editorMarkerNavigation.background#2A2D3C
  • editorOverviewRuler.addedForeground#88CC6780
  • editorOverviewRuler.border#21222C
  • editorOverviewRuler.currentContentForeground#88CC67
  • editorOverviewRuler.deletedForeground#F2647C80
  • editorOverviewRuler.errorForeground#F2647C80
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#64ABBB80
  • editorOverviewRuler.modifiedForeground#64ABBB80
  • editorOverviewRuler.selectionHighlightForeground#A0713E
  • editorOverviewRuler.warningForeground#A0713E80
  • editorOverviewRuler.wordHighlightForeground#64ABBB
  • editorOverviewRuler.wordHighlightStrongForeground#88CC67
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#2A2D3C
  • editorSuggestWidget.foreground#D9EBF1
  • editorSuggestWidget.selectedBackground#1F5470
  • editorWarning.foreground#64ABBB
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#2A2D3C
  • errorForeground#F2647C
  • extensionButton.prominentBackground#88CC6790
  • extensionButton.prominentForeground#D9EBF1
  • extensionButton.prominentHoverBackground#88CC6760
  • focusBorder#839199
  • foreground#D9EBF1
  • gitDecoration.conflictingResourceForeground#A0713E
  • gitDecoration.deletedResourceForeground#F2647C
  • gitDecoration.ignoredResourceForeground#839199
  • gitDecoration.modifiedResourceForeground#64ABBB
  • gitDecoration.untrackedResourceForeground#88CC67
  • inlineChat.regionHighlight#343746
  • input.background#303048
  • input.border#21222C
  • input.foreground#D9EBF1
  • input.placeholderForeground#839199
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#F2647C
  • inputValidation.infoBorder#DC6BAD
  • inputValidation.warningBorder#A0713E
  • list.activeSelectionBackground#1F5470
  • list.activeSelectionForeground#D9EBF1
  • list.dropBackground#1F5470
  • list.errorForeground#F2647C
  • list.focusBackground#44475A75
  • list.highlightForeground#64ABBB
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#A0713E
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#F2647C
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#88CC6790
  • merge.incomingHeaderBackground#BD93F990
  • panel.background#303048
  • panel.border#BD93F9
  • panelTitle.activeBorder#DC6BAD
  • panelTitle.activeForeground#D9EBF1
  • panelTitle.inactiveForeground#839199
  • peekView.border#1F5470
  • peekViewEditor.background#303048
  • peekViewEditor.matchHighlightBackground#EDCB7980
  • peekViewResult.background#2A2D3C
  • peekViewResult.fileForeground#D9EBF1
  • peekViewResult.lineForeground#D9EBF1
  • peekViewResult.matchHighlightBackground#EDCB7980
  • peekViewResult.selectionBackground#1F5470
  • peekViewResult.selectionForeground#D9EBF1
  • peekViewTitle.background#21222C
  • peekViewTitleDescription.foreground#839199
  • peekViewTitleLabel.foreground#D9EBF1
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#64ABBB
  • progressBar.background#DC6BAD
  • selection.background#BD93F9
  • settings.checkboxBackground#2A2D3C
  • settings.checkboxBorder#21222C
  • settings.checkboxForeground#D9EBF1
  • settings.dropdownBackground#2A2D3C
  • settings.dropdownBorder#21222C
  • settings.dropdownForeground#D9EBF1
  • settings.headerForeground#D9EBF1
  • settings.modifiedItemIndicator#A0713E
  • settings.numberInputBackground#2A2D3C
  • settings.numberInputBorder#21222C
  • settings.numberInputForeground#D9EBF1
  • settings.textInputBackground#2A2D3C
  • settings.textInputBorder#21222C
  • settings.textInputForeground#D9EBF1
  • sideBar.background#2A2D3C
  • sideBarSectionHeader.background#303048
  • sideBarSectionHeader.border#21222C
  • sideBarTitle.foreground#D9EBF1
  • statusBar.background#21222C
  • statusBar.debuggingBackground#F2647C
  • statusBar.debuggingForeground#21222C
  • statusBar.foreground#D9EBF1
  • statusBar.noFolderBackground#21222C
  • statusBar.noFolderForeground#D9EBF1
  • statusBarItem.prominentBackground#F2647C
  • statusBarItem.prominentHoverBackground#A0713E
  • statusBarItem.remoteBackground#BD93F9
  • statusBarItem.remoteForeground#303048
  • tab.activeBackground#303048
  • tab.activeBorderTop#DC6BAD80
  • tab.activeForeground#D9EBF1
  • tab.border#21222C
  • tab.inactiveBackground#2A2D3C
  • tab.inactiveForeground#839199
  • terminal.ansiBlack#272727
  • terminal.ansiBlue#70a3da
  • terminal.ansiBrightBlack#2d596c
  • terminal.ansiBrightBlue#8fb4dd
  • terminal.ansiBrightCyan#8fe0b3
  • terminal.ansiBrightGreen#b9df87
  • terminal.ansiBrightMagenta#b988dd
  • terminal.ansiBrightRed#e787b3
  • terminal.ansiBrightWhite#f2f0ef
  • terminal.ansiBrightYellow#e6b486
  • terminal.ansiCyan#70dca1
  • terminal.ansiGreen#a7db68
  • terminal.ansiMagenta#a76ad9
  • terminal.ansiRed#e369a1
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e3a367
  • terminal.background#303048
  • terminal.foreground#D9EBF1
  • titleBar.activeBackground#2A2D3C
  • titleBar.activeForeground#D9EBF1
  • titleBar.inactiveBackground#21222C
  • titleBar.inactiveForeground#839199
  • walkThrough.embeddedEditorBackground#2A2D3C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#839199
markup.inserted#88CC67
markup.deleted#F2647C
markup.changed#A0713E
invalid#F2647Cunderline italic
invalid.deprecated#D9EBF1underline italic
entity.name.filename#EDCB79
markup.error#F2647C
markup.underlineunderline
markup.bold#A0713Ebold
markup.heading#BD93F9bold
markup.italic#EDCB79italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#64ABBB
markup.inline.raw, markup.raw.restructuredtext#88CC67
markup.underline.link, markup.underline.link.image#64ABBB
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#DC6BAD
entity.name.directive.restructuredtext, markup.quote#EDCB79italic
meta.separator.markdown#839199
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#88CC67
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#D9EBF1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#EDCB79
entity.name.type.class, entity.name.class#64ABBBnormal
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#64ABBBitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#839199
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#DC6BAD
comment.block.documentation entity.name.type#64ABBBitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#64ABBB
comment.block.documentation variable#A0713Eitalic
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#DC6BAD
entity.name.tag#DC6BAD
entity.other.attribute-name.parent-selector#DC6BAD
entity.other.attribute-name#88CC67italic
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#88CC67
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#A0713Eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#88CC67italic
meta.decorator variable.other.object#88CC67
keyword, punctuation.definition.keyword#DC6BAD
keyword.control.new, keyword.operator.newbold
meta.selector#DC6BAD
support#64ABBBitalic
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#DC6BAD
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#D9EBF1
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#DC6BAD
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#64ABBB
constant.other.date, constant.other.timestamp#A0713E
variable.other.alias.yaml#88CC67italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#DC6BADregular
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#64ABBBitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A0713E
storage.modifier#DC6BAD
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#EDCB79
punctuation.definition.group.capture.regexp#DC6BAD
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F2647C
punctuation.definition.character-class.regexp#64ABBB
punctuation.definition.group.regexp#A0713E
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F2647C
meta.assertion.look-ahead.regexp#88CC67
string#EDCB79
punctuation.definition.string.begin, punctuation.definition.string.end#b7c055
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#839199
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#D9EBF1
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#A0713Eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D9EBF1normal
meta.selectionset.graphql variable#EDCB79
meta.selectionset.graphql meta.arguments variable#D9EBF1
entity.name.fragment.graphql, variable.fragment.graphql#64ABBB
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#D9EBF1
source.shell variable.other#BD93F9
support.constant#BD93F9normal
meta.scope.prerequisites.makefile#EDCB79
meta.attribute-selector.scss#EDCB79
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D9EBF1
meta.preprocessor.haskell#839199
log.error#F2647Cbold
log.warning#EDCB79bold