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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#85678f
support#5e8d87italic
support.function.magic, support.variable, variable.other.predefined#b294bbregular
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#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