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#78adc410
  • activityBar.activeBorder#bfa6d480
  • activityBar.background#151613
  • activityBar.foreground#e0e5da
  • activityBar.inactiveForeground#899282
  • activityBarBadge.background#bfa6d4
  • activityBarBadge.foreground#151613
  • badge.background#1c1e1a
  • badge.foreground#e0e5da
  • breadcrumb.activeSelectionForeground#e0e5da
  • breadcrumb.background#151613
  • breadcrumb.focusForeground#e0e5da
  • breadcrumb.foreground#899282
  • breadcrumbPicker.background#0a0b09
  • button.background#10110e
  • button.foreground#e0e5da
  • checkbox.background#10110e
  • checkbox.border#0a0b09
  • checkbox.foreground#e0e5da
  • contrastBorder#0a0b09
  • debugToolBar.background#10110e
  • diffEditor.insertedTextBackground#83bda520
  • diffEditor.removedTextBackground#e28b8250
  • dropdown.background#151613
  • dropdown.border#0a0b09
  • dropdown.foreground#e0e5da
  • editor.background#151613
  • editor.findMatchBackground#d5ad7380
  • editor.findMatchHighlightBackground#fcfcfa40
  • editor.findRangeHighlightBackground#3e512375
  • editor.foldBackground#10110e
  • editor.foreground#e0e5da
  • editor.hoverHighlightBackground#0a0b09
  • editor.lineHighlightBorder#1c1e1a
  • editor.rangeHighlightBackground#78adc415
  • editor.selectionBackground#1c1e1a
  • editor.selectionHighlightBackground#1c1e1a
  • editor.snippetFinalTabstopHighlightBackground#151613
  • editor.snippetFinalTabstopHighlightBorder#83bda5
  • editor.snippetTabstopHighlightBackground#151613
  • editor.snippetTabstopHighlightBorder#899282
  • editor.wordHighlightBackground#9cc6c950
  • editor.wordHighlightStrongBackground#83bda550
  • editorCodeLens.foreground#899282
  • editorError.foreground#e28b82
  • editorGroup.border#78adc4
  • editorGroup.dropBackground#3e512370
  • editorGroupHeader.tabsBackground#0a0b09
  • editorGutter.addedBackground#83bda580
  • editorGutter.deletedBackground#e28b8280
  • editorGutter.modifiedBackground#9cc6c980
  • editorHoverWidget.background#151613
  • editorHoverWidget.border#899282
  • editorIndentGuide.activeBackground#fcfcfa45
  • editorIndentGuide.background#fcfcfa1A
  • editorLineNumber.foreground#899282
  • editorLink.activeForeground#9cc6c9
  • editorMarkerNavigation.background#10110e
  • editorOverviewRuler.addedForeground#83bda580
  • editorOverviewRuler.border#0a0b09
  • editorOverviewRuler.currentContentForeground#83bda5
  • editorOverviewRuler.deletedForeground#e28b8280
  • editorOverviewRuler.errorForeground#e28b8280
  • editorOverviewRuler.incomingContentForeground#78adc4
  • editorOverviewRuler.infoForeground#9cc6c980
  • editorOverviewRuler.modifiedForeground#9cc6c980
  • editorOverviewRuler.selectionHighlightForeground#d5ad73
  • editorOverviewRuler.warningForeground#d5ad7380
  • editorOverviewRuler.wordHighlightForeground#9cc6c9
  • editorOverviewRuler.wordHighlightStrongForeground#83bda5
  • editorRuler.foreground#fcfcfa1A
  • editorSuggestWidget.background#10110e
  • editorSuggestWidget.foreground#e0e5da
  • editorSuggestWidget.selectedBackground#1c1e1a
  • editorWarning.foreground#d5ad73
  • editorWhitespace.foreground#fcfcfa1A
  • editorWidget.background#10110e
  • errorForeground#e28b82
  • extensionButton.prominentBackground#83bda590
  • extensionButton.prominentForeground#e0e5da
  • extensionButton.prominentHoverBackground#83bda560
  • focusBorder#899282
  • foreground#e0e5da
  • gitDecoration.conflictingResourceForeground#d5ad73
  • gitDecoration.deletedResourceForeground#e28b82
  • gitDecoration.ignoredResourceForeground#899282
  • gitDecoration.modifiedResourceForeground#9cc6c9
  • gitDecoration.untrackedResourceForeground#83bda5
  • input.background#151613
  • input.border#0a0b09
  • input.foreground#e0e5da
  • input.placeholderForeground#899282
  • inputOption.activeBorder#78adc4
  • inputValidation.errorBackground#151613
  • inputValidation.errorBorder#e28b82
  • inputValidation.errorForeground#e28b82
  • inputValidation.infoBackground#151613
  • inputValidation.infoBorder#78adc4
  • inputValidation.infoForeground#78adc4
  • inputValidation.warningBackground#151613
  • inputValidation.warningBorder#d5ad73
  • inputValidation.warningForeground#d5ad73
  • list.activeSelectionBackground#1c1e1a
  • list.activeSelectionForeground#e0e5da
  • list.dropBackground#1c1e1a
  • list.errorForeground#e28b82
  • list.focusBackground#3e512375
  • list.highlightForeground#9cc6c9
  • list.hoverBackground#3e512375
  • list.inactiveSelectionBackground#3e512375
  • list.warningForeground#d5ad73
  • listFilterWidget.background#151613
  • listFilterWidget.noMatchesOutline#e28b82
  • listFilterWidget.outline#1c1e1a
  • merge.currentHeaderBackground#83bda590
  • merge.incomingHeaderBackground#78adc490
  • notification.background#151613
  • notification.buttonBackground#1c1e1a
  • notification.buttonForeground#e0e5da
  • notification.buttonHoverBackground#3e512375
  • notification.errorBackground#e28b82
  • notification.errorForeground#151613
  • notification.foreground#e0e5da
  • notification.infoBackground#78adc4
  • notification.infoForeground#151613
  • notification.warningBackground#d5ad73
  • notification.warningForeground#151613
  • notificationCenter.border#10110e
  • notificationCenterHeader.background#151613
  • notificationCenterHeader.foreground#e0e5da
  • notificationLink.foreground#9cc6c9
  • notifications.background#151613
  • notifications.border#10110e
  • notifications.foreground#e0e5da
  • notificationsErrorIcon.foreground#e28b82
  • notificationsInfoIcon.foreground#78adc4
  • notificationsWarningIcon.foreground#d5ad73
  • notificationToast.border#10110e
  • panel.background#151613
  • panel.border#78adc4
  • panelInput.border#e0e5da
  • panelTitle.activeBorder#bfa6d4
  • panelTitle.activeForeground#e0e5da
  • panelTitle.inactiveForeground#899282
  • peekView.border#1c1e1a
  • peekViewEditor.background#151613
  • peekViewEditor.matchHighlightBackground#d5ad7380
  • peekViewResult.background#10110e
  • peekViewResult.fileForeground#e0e5da
  • peekViewResult.lineForeground#e0e5da
  • peekViewResult.matchHighlightBackground#d5ad7380
  • peekViewResult.selectionBackground#1c1e1a
  • peekViewResult.selectionForeground#e0e5da
  • peekViewTitle.background#0a0b09
  • peekViewTitleDescription.foreground#899282
  • peekViewTitleLabel.foreground#e0e5da
  • pickerGroup.border#78adc4
  • pickerGroup.foreground#9cc6c9
  • progressBar.background#bfa6d4
  • scrollbar.shadow#444444
  • selection.background#78adc4
  • settings.checkboxBackground#10110e
  • settings.checkboxBorder#0a0b09
  • settings.checkboxForeground#e0e5da
  • settings.dropdownBackground#10110e
  • settings.dropdownBorder#0a0b09
  • settings.dropdownForeground#e0e5da
  • settings.headerForeground#e0e5da
  • settings.modifiedItemIndicator#d5ad73
  • settings.numberInputBackground#10110e
  • settings.numberInputBorder#0a0b09
  • settings.numberInputForeground#e0e5da
  • settings.textInputBackground#10110e
  • settings.textInputBorder#0a0b09
  • settings.textInputForeground#e0e5da
  • sideBar.background#10110e
  • sideBarSectionHeader.background#151613
  • sideBarSectionHeader.border#0a0b09
  • sideBarTitle.foreground#e0e5da
  • statusBar.background#0a0b09
  • statusBar.debuggingBackground#e28b82
  • statusBar.debuggingForeground#0a0b09
  • statusBar.foreground#e0e5da
  • statusBar.noFolderBackground#0a0b09
  • statusBar.noFolderForeground#e0e5da
  • statusBarItem.prominentBackground#e28b82
  • statusBarItem.prominentHoverBackground#d5ad73
  • statusBarItem.remoteBackground#78adc4
  • statusBarItem.remoteForeground#151613
  • tab.activeBackground#151613
  • tab.activeBorderTop#bfa6d480
  • tab.activeForeground#e0e5da
  • tab.border#0a0b09
  • tab.inactiveBackground#10110e
  • tab.inactiveForeground#899282
  • terminal.ansiBlack#1c1e1a
  • terminal.ansiBlue#78adc4
  • terminal.ansiBrightBlack#3e5123
  • terminal.ansiBrightBlue#a3b8c2
  • terminal.ansiBrightCyan#97c9c9
  • terminal.ansiBrightGreen#cfe4ae
  • terminal.ansiBrightMagenta#d2a0b2
  • terminal.ansiBrightRed#e28b82
  • terminal.ansiBrightWhite#fcfcfa
  • terminal.ansiBrightYellow#d5ad73
  • terminal.ansiCyan#9cc6c9
  • terminal.ansiGreen#83bda5
  • terminal.ansiMagenta#bfa6d4
  • terminal.ansiRed#e28b82
  • terminal.ansiWhite#ecefe7
  • terminal.ansiYellow#d5ad73
  • terminal.background#151613
  • terminal.border#e0e5da
  • terminal.foreground#e0e5da
  • terminal.selectionBackground#1c1e1a50
  • textBlockQuote.background#10110e
  • titleBar.activeBackground#10110e
  • titleBar.activeForeground#e0e5da
  • titleBar.inactiveBackground#0a0b09
  • titleBar.inactiveForeground#899282
  • walkThrough.embeddedEditorBackground#10110e
  • welcomePage.buttonBackground#1c1e1a
  • welcomePage.buttonHoverBackground#3e512375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#78adc4
source#e0e5da
meta.diff, meta.diff.header#899282
markup.inserted#83bda5
markup.deleted#e28b82
markup.changed#d5ad73
invalid#e28b82underline italic
invalid.deprecated#e0e5daunderline italic
entity.name.filename#d5ad73
markup.error#e28b82
markup.underlineunderline
markup.bold#d5ad73bold
markup.heading#78adc4bold
markup.italic#d5ad73italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9cc6c9
markup.inline.raw, markup.raw.restructuredtext#83bda5
markup.underline.link, markup.underline.link.image#9cc6c9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bfa6d4
entity.name.directive.restructuredtext, markup.quote#d5ad73italic
meta.separator.markdown#899282
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#83bda5
punctuation.definition.constant.restructuredtext#78adc4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#78adc4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e0e5da
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d5ad73
entity.name.type.class, entity.name.class#9cc6c9normal
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#78adc4italic
entity.other.inherited-class#9cc6c9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#899282
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bfa6d4
comment.block.documentation entity.name.type#9cc6c9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#9cc6c9
comment.block.documentation variable#d5ad73italic
constant, variable.other.constant#78adc4
constant.character.escape, constant.character.string.escape, constant.regexp#bfa6d4
entity.name.tag#bfa6d4
entity.other.attribute-name.parent-selector#bfa6d4
entity.other.attribute-name#83bda5italic
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#83bda5
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#d5ad73italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#83bda5italic
meta.decorator variable.other.object#83bda5
keyword, punctuation.definition.keyword#bfa6d4
keyword.control.new, keyword.operator.newbold
meta.selector#bfa6d4
support#9cc6c9italic
support.function.magic, support.variable, variable.other.predefined#78adc4regular
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#bfa6d4
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#e0e5da
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#bfa6d4
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#9cc6c9
constant.other.date, constant.other.timestamp#d5ad73
variable.other.alias.yaml#83bda5italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bfa6d4regular
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#9cc6c9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d5ad73
storage.modifier#bfa6d4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d5ad73
punctuation.definition.group.capture.regexp#bfa6d4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e28b82
punctuation.definition.character-class.regexp#9cc6c9
punctuation.definition.group.regexp#d5ad73
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e28b82
meta.assertion.look-ahead.regexp#83bda5
string#d5ad73
punctuation.definition.string.begin, punctuation.definition.string.end#b2d084
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#78adc4
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#899282
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e0e5da
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d5ad73italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e0e5danormal
meta.selectionset.graphql variable#d5ad73
meta.selectionset.graphql meta.arguments variable#e0e5da
entity.name.fragment.graphql, variable.fragment.graphql#9cc6c9
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#e0e5da
source.shell variable.other#78adc4
support.constant#78adc4normal
meta.scope.prerequisites.makefile#d5ad73
meta.attribute-selector.scss#d5ad73
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e0e5da
meta.preprocessor.haskell#899282