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#b294bb10
  • activityBar.activeBorder#85678f80
  • activityBar.background#343746
  • activityBar.foreground#c5c8c6
  • activityBar.inactiveForeground#555b65
  • activityBarBadge.background#85678f
  • activityBarBadge.foreground#c5c8c6
  • badge.background#44475A
  • badge.foreground#c5c8c6
  • breadcrumb.activeSelectionForeground#c5c8c6
  • breadcrumb.background#1d1f21
  • breadcrumb.focusForeground#c5c8c6
  • breadcrumb.foreground#555b65
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#c5c8c6
  • contrastBorder#191A21
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#8c944020
  • diffEditor.removedTextBackground#cc666650
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#c5c8c6
  • editor.background#1d1f21
  • editor.findMatchBackground#de935f80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C
  • editor.foreground#c5c8c6
  • editor.hoverHighlightBackground#5e8d8750
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#b294bb15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#1d1f21
  • editor.snippetFinalTabstopHighlightBorder#8c9440
  • editor.snippetTabstopHighlightBackground#1d1f21
  • editor.snippetTabstopHighlightBorder#555b65
  • editor.wordHighlightBackground#5e8d8750
  • editor.wordHighlightStrongBackground#8c944050
  • editorCodeLens.foreground#555b65
  • editorError.foreground#cc6666
  • editorGroup.border#b294bb
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#8c944080
  • editorGutter.deletedBackground#cc666680
  • editorGutter.modifiedBackground#5e8d8780
  • editorHoverWidget.background#1d1f21
  • editorHoverWidget.border#555b65
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#555b65
  • editorLink.activeForeground#5e8d87
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#8c944080
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#8c9440
  • editorOverviewRuler.deletedForeground#cc666680
  • editorOverviewRuler.errorForeground#cc666680
  • editorOverviewRuler.incomingContentForeground#b294bb
  • editorOverviewRuler.infoForeground#5e8d8780
  • editorOverviewRuler.modifiedForeground#5e8d8780
  • editorOverviewRuler.selectionHighlightForeground#de935f
  • editorOverviewRuler.warningForeground#de935f80
  • editorOverviewRuler.wordHighlightForeground#5e8d87
  • editorOverviewRuler.wordHighlightStrongForeground#8c9440
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#c5c8c6
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#5e8d87
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#cc6666
  • extensionButton.prominentBackground#8c944090
  • extensionButton.prominentForeground#c5c8c6
  • extensionButton.prominentHoverBackground#8c944060
  • focusBorder#555b65
  • foreground#c5c8c6
  • gitDecoration.conflictingResourceForeground#de935f
  • gitDecoration.deletedResourceForeground#cc6666
  • gitDecoration.ignoredResourceForeground#555b65
  • gitDecoration.modifiedResourceForeground#5e8d87
  • gitDecoration.untrackedResourceForeground#8c9440
  • input.background#1d1f21
  • input.border#191A21
  • input.foreground#c5c8c6
  • input.placeholderForeground#555b65
  • inputOption.activeBorder#b294bb
  • inputValidation.errorBorder#cc6666
  • inputValidation.infoBorder#85678f
  • inputValidation.warningBorder#de935f
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#c5c8c6
  • list.dropBackground#44475A
  • list.errorForeground#cc6666
  • list.focusBackground#44475A75
  • list.highlightForeground#5e8d87
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#de935f
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#cc6666
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#8c944090
  • merge.incomingHeaderBackground#b294bb90
  • notification.background#1d1f21
  • notification.buttonBackground#44475A
  • notification.buttonForeground#c5c8c6
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#cc6666
  • notification.errorForeground#c5c8c6
  • notification.foreground#c5c8c6
  • notification.infoBackground#5e8d87
  • notification.infoForeground#1d1f21
  • notification.warningBackground#de935f
  • notification.warningForeground#1d1f21
  • panel.background#1d1f21
  • panel.border#b294bb
  • panelTitle.activeBorder#85678f
  • panelTitle.activeForeground#c5c8c6
  • panelTitle.inactiveForeground#555b65
  • peekView.border#44475A
  • peekViewEditor.background#1d1f21
  • peekViewEditor.matchHighlightBackground#ffeac380
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#c5c8c6
  • peekViewResult.lineForeground#c5c8c6
  • peekViewResult.matchHighlightBackground#ffeac380
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#c5c8c6
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#555b65
  • peekViewTitleLabel.foreground#c5c8c6
  • pickerGroup.border#b294bb
  • pickerGroup.foreground#5e8d87
  • progressBar.background#85678f
  • selection.background#b294bb
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#c5c8c6
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#c5c8c6
  • settings.headerForeground#c5c8c6
  • settings.modifiedItemForeground#de935f
  • settings.modifiedItemIndicator#de935f
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#c5c8c6
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#c5c8c6
  • sideBar.background#21222C
  • sideBarSectionHeader.background#1d1f21
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#c5c8c6
  • statusBar.background#191A21
  • statusBar.debuggingBackground#cc6666
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#c5c8c6
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#c5c8c6
  • statusBarItem.prominentBackground#cc6666
  • statusBarItem.prominentHoverBackground#de935f
  • statusBarItem.remoteBackground#b294bb
  • statusBarItem.remoteForeground#c5c8c6
  • tab.activeBackground#1d1f21
  • tab.activeBorderTop#85678f80
  • tab.activeForeground#c5c8c6
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#555b65
  • terminal.ansiBlack#282a2e
  • terminal.ansiBlue#5f819d
  • terminal.ansiBrightBlack#555b65
  • terminal.ansiBrightBlue#de935f
  • terminal.ansiBrightCyan#ffeac3
  • terminal.ansiBrightGreen#b5bd68
  • terminal.ansiBrightMagenta#b294bb
  • terminal.ansiBrightRed#cc6666
  • terminal.ansiBrightWhite#c5c8c6
  • terminal.ansiBrightYellow#ffeac3
  • terminal.ansiCyan#5e8d87
  • terminal.ansiGreen#8c9440
  • terminal.ansiMagenta#85678f
  • terminal.ansiRed#b294bb
  • terminal.ansiWhite#707880
  • terminal.ansiYellow#5f819d
  • terminal.background#1d1f21
  • terminal.foreground#c5c8c6
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#c5c8c6
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#555b65
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#b294bb—
source#c5c8c6—
meta.diff, meta.diff.header#555b65—
markup.inserted#8c9440—
markup.deleted#cc6666—
markup.changed#de935f—
invalid#cc6666underline italic
invalid.deprecated#c5c8c6underline italic
entity.name.filename#ffeac3—
markup.error#cc6666—
markup.underline—underline
markup.bold#de935fbold
markup.heading#b294bbbold
markup.italic#ffeac3italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5e8d87—
markup.inline.raw, markup.raw.restructuredtext#8c9440—
markup.underline.link, markup.underline.link.image#5e8d87—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#85678f—
entity.name.directive.restructuredtext, markup.quote#ffeac3italic
meta.separator.markdown#555b65—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8c9440—
punctuation.definition.constant.restructuredtext#b294bb—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b294bb—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5c8c6—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffeac3—
entity.name.type.class, entity.name.class#5e8d87normal
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#b294bbitalic
entity.other.inherited-class#5e8d87italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#555b65—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#85678f—
comment.block.documentation entity.name.type#5e8d87italic
comment.block.documentation entity.name.type punctuation.definition.bracket#5e8d87—
comment.block.documentation variable#de935fitalic
constant, variable.other.constant#b294bb—
constant.character.escape, constant.character.string.escape, constant.regexp#85678f—
entity.name.tag#85678f—
entity.other.attribute-name.parent-selector#85678f—
entity.other.attribute-name#8c9440italic
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#8c9440—
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#de935fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8c9440italic
meta.decorator variable.other.object#8c9440—
keyword, punctuation.definition.keyword#85678f—
keyword.control.new, keyword.operator.new—bold
meta.selector#85678f—
support#5e8d87italic
support.function.magic, support.variable, variable.other.predefined#b294bbregular
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#85678f—
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#c5c8c6—
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#85678f—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5e8d87—
constant.other.date, constant.other.timestamp#de935f—
variable.other.alias.yaml#8c9440italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#85678fregular
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#5e8d87italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#de935f—
storage.modifier#85678f—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffeac3—
punctuation.definition.group.capture.regexp#85678f—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc6666—
punctuation.definition.character-class.regexp#5e8d87—
punctuation.definition.group.regexp#de935f—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc6666—
meta.assertion.look-ahead.regexp#8c9440—
string#ffeac3—
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE—
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#555b65—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5c8c6—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#de935fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5c8c6normal
meta.selectionset.graphql variable#ffeac3—
meta.selectionset.graphql meta.arguments variable#c5c8c6—
entity.name.fragment.graphql, variable.fragment.graphql#5e8d87—
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#c5c8c6—
source.shell variable.other#b294bb—
support.constant#b294bbnormal
meta.scope.prerequisites.makefile#ffeac3—
meta.attribute-selector.scss#ffeac3—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5c8c6—
meta.preprocessor.haskell#555b65—
Gravel Pit by Beat Scherrer - VS Code Theme