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
emphasis—italic
strong—bold
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.underline—underline
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.new—bold
meta.selector#DC6BAD—
support#64ABBBitalic
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
support.function, support.type.property-name—regular
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
Astronomer Theme by Halcolo - VS Code Theme