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#8b87af10
  • activityBar.activeBorder#682e5080
  • activityBar.background#140607
  • activityBar.foreground#5d484e
  • activityBar.inactiveForeground#473438
  • activityBarBadge.background#682e50
  • activityBarBadge.foreground#140607
  • badge.background#2a1a1c
  • badge.foreground#5d484e
  • breadcrumb.activeSelectionForeground#5d484e
  • breadcrumb.background#140607
  • breadcrumb.focusForeground#5d484e
  • breadcrumb.foreground#473438
  • breadcrumbPicker.background#140e0f
  • button.background#281c1e
  • button.foreground#5d484e
  • checkbox.background#281c1e
  • checkbox.border#140e0f
  • checkbox.foreground#5d484e
  • contrastBorder#140e0f
  • debugToolBar.background#281c1e
  • diffEditor.insertedTextBackground#57952320
  • diffEditor.removedTextBackground#90002a50
  • dropdown.background#140607
  • dropdown.border#140e0f
  • dropdown.foreground#5d484e
  • editor.background#140607
  • editor.findMatchBackground#aa301b80
  • editor.findMatchHighlightBackground#af949d40
  • editor.findRangeHighlightBackground#3c2a2e75
  • editor.foldBackground#281c1e
  • editor.foreground#5d484e
  • editor.hoverHighlightBackground#140e0f
  • editor.lineHighlightBorder#2a1a1c
  • editor.rangeHighlightBackground#8b87af15
  • editor.selectionBackground#2a1a1c
  • editor.selectionHighlightBackground#2a1a1c
  • editor.snippetFinalTabstopHighlightBackground#140607
  • editor.snippetFinalTabstopHighlightBorder#579523
  • editor.snippetTabstopHighlightBackground#140607
  • editor.snippetTabstopHighlightBorder#473438
  • editor.wordHighlightBackground#e8a76650
  • editor.wordHighlightStrongBackground#57952350
  • editorCodeLens.foreground#473438
  • editorError.foreground#90002a
  • editorGroup.border#8b87af
  • editorGroup.dropBackground#3c2a2e70
  • editorGroupHeader.tabsBackground#140e0f
  • editorGutter.addedBackground#57952380
  • editorGutter.deletedBackground#90002a80
  • editorGutter.modifiedBackground#e8a76680
  • editorHoverWidget.background#140607
  • editorHoverWidget.border#473438
  • editorIndentGuide.activeBackground#af949d45
  • editorIndentGuide.background#af949d1A
  • editorLineNumber.foreground#473438
  • editorLink.activeForeground#e8a766
  • editorMarkerNavigation.background#281c1e
  • editorOverviewRuler.addedForeground#57952380
  • editorOverviewRuler.border#140e0f
  • editorOverviewRuler.currentContentForeground#579523
  • editorOverviewRuler.deletedForeground#90002a80
  • editorOverviewRuler.errorForeground#90002a80
  • editorOverviewRuler.incomingContentForeground#8b87af
  • editorOverviewRuler.infoForeground#e8a76680
  • editorOverviewRuler.modifiedForeground#e8a76680
  • editorOverviewRuler.selectionHighlightForeground#aa301b
  • editorOverviewRuler.warningForeground#aa301b80
  • editorOverviewRuler.wordHighlightForeground#e8a766
  • editorOverviewRuler.wordHighlightStrongForeground#579523
  • editorRuler.foreground#af949d1A
  • editorSuggestWidget.background#281c1e
  • editorSuggestWidget.foreground#5d484e
  • editorSuggestWidget.selectedBackground#2a1a1c
  • editorWarning.foreground#aa301b
  • editorWhitespace.foreground#af949d1A
  • editorWidget.background#281c1e
  • errorForeground#90002a
  • extensionButton.prominentBackground#57952390
  • extensionButton.prominentForeground#5d484e
  • extensionButton.prominentHoverBackground#57952360
  • focusBorder#473438
  • foreground#5d484e
  • gitDecoration.conflictingResourceForeground#aa301b
  • gitDecoration.deletedResourceForeground#90002a
  • gitDecoration.ignoredResourceForeground#473438
  • gitDecoration.modifiedResourceForeground#e8a766
  • gitDecoration.untrackedResourceForeground#579523
  • input.background#140607
  • input.border#140e0f
  • input.foreground#5d484e
  • input.placeholderForeground#473438
  • inputOption.activeBorder#8b87af
  • inputValidation.errorBackground#140607
  • inputValidation.errorBorder#90002a
  • inputValidation.errorForeground#90002a
  • inputValidation.infoBackground#140607
  • inputValidation.infoBorder#8b87af
  • inputValidation.infoForeground#8b87af
  • inputValidation.warningBackground#140607
  • inputValidation.warningBorder#aa301b
  • inputValidation.warningForeground#aa301b
  • list.activeSelectionBackground#2a1a1c
  • list.activeSelectionForeground#5d484e
  • list.dropBackground#2a1a1c
  • list.errorForeground#90002a
  • list.focusBackground#3c2a2e75
  • list.highlightForeground#e8a766
  • list.hoverBackground#3c2a2e75
  • list.inactiveSelectionBackground#3c2a2e75
  • list.warningForeground#aa301b
  • listFilterWidget.background#140607
  • listFilterWidget.noMatchesOutline#90002a
  • listFilterWidget.outline#2a1a1c
  • merge.currentHeaderBackground#57952390
  • merge.incomingHeaderBackground#8b87af90
  • notification.background#140607
  • notification.buttonBackground#2a1a1c
  • notification.buttonForeground#5d484e
  • notification.buttonHoverBackground#3c2a2e75
  • notification.errorBackground#90002a
  • notification.errorForeground#140607
  • notification.foreground#5d484e
  • notification.infoBackground#8b87af
  • notification.infoForeground#140607
  • notification.warningBackground#aa301b
  • notification.warningForeground#140607
  • notificationCenter.border#281c1e
  • notificationCenterHeader.background#140607
  • notificationCenterHeader.foreground#5d484e
  • notificationLink.foreground#e8a766
  • notifications.background#140607
  • notifications.border#281c1e
  • notifications.foreground#5d484e
  • notificationsErrorIcon.foreground#90002a
  • notificationsInfoIcon.foreground#8b87af
  • notificationsWarningIcon.foreground#aa301b
  • notificationToast.border#281c1e
  • panel.background#140607
  • panel.border#8b87af
  • panelInput.border#5d484e
  • panelTitle.activeBorder#682e50
  • panelTitle.activeForeground#5d484e
  • panelTitle.inactiveForeground#473438
  • peekView.border#2a1a1c
  • peekViewEditor.background#140607
  • peekViewEditor.matchHighlightBackground#c7371d80
  • peekViewResult.background#281c1e
  • peekViewResult.fileForeground#5d484e
  • peekViewResult.lineForeground#5d484e
  • peekViewResult.matchHighlightBackground#c7371d80
  • peekViewResult.selectionBackground#2a1a1c
  • peekViewResult.selectionForeground#5d484e
  • peekViewTitle.background#140e0f
  • peekViewTitleDescription.foreground#473438
  • peekViewTitleLabel.foreground#5d484e
  • pickerGroup.border#8b87af
  • pickerGroup.foreground#e8a766
  • progressBar.background#682e50
  • scrollbar.shadow#444444
  • selection.background#8b87af
  • settings.checkboxBackground#281c1e
  • settings.checkboxBorder#140e0f
  • settings.checkboxForeground#5d484e
  • settings.dropdownBackground#281c1e
  • settings.dropdownBorder#140e0f
  • settings.dropdownForeground#5d484e
  • settings.headerForeground#5d484e
  • settings.modifiedItemIndicator#aa301b
  • settings.numberInputBackground#281c1e
  • settings.numberInputBorder#140e0f
  • settings.numberInputForeground#5d484e
  • settings.textInputBackground#281c1e
  • settings.textInputBorder#140e0f
  • settings.textInputForeground#5d484e
  • sideBar.background#281c1e
  • sideBarSectionHeader.background#140607
  • sideBarSectionHeader.border#140e0f
  • sideBarTitle.foreground#5d484e
  • statusBar.background#140e0f
  • statusBar.debuggingBackground#90002a
  • statusBar.debuggingForeground#140e0f
  • statusBar.foreground#5d484e
  • statusBar.noFolderBackground#140e0f
  • statusBar.noFolderForeground#5d484e
  • statusBarItem.prominentBackground#90002a
  • statusBarItem.prominentHoverBackground#aa301b
  • statusBarItem.remoteBackground#8b87af
  • statusBarItem.remoteForeground#140607
  • tab.activeBackground#140607
  • tab.activeBorderTop#682e5080
  • tab.activeForeground#5d484e
  • tab.border#140e0f
  • tab.inactiveBackground#281c1e
  • tab.inactiveForeground#473438
  • terminal.ansiBlack#2a1a1c
  • terminal.ansiBlue#8b87af
  • terminal.ansiBrightBlack#3c2a2e
  • terminal.ansiBrightBlue#cfc9ff
  • terminal.ansiBrightCyan#ffceae
  • terminal.ansiBrightGreen#8dff56
  • terminal.ansiBrightMagenta#fb6cb9
  • terminal.ansiBrightRed#c5245c
  • terminal.ansiBrightWhite#af949d
  • terminal.ansiBrightYellow#c7371d
  • terminal.ansiCyan#e8a766
  • terminal.ansiGreen#579523
  • terminal.ansiMagenta#682e50
  • terminal.ansiRed#90002a
  • terminal.ansiWhite#685259
  • terminal.ansiYellow#aa301b
  • terminal.background#140607
  • terminal.border#5d484e
  • terminal.foreground#5d484e
  • terminal.selectionBackground#2a1a1c50
  • textBlockQuote.background#281c1e
  • titleBar.activeBackground#281c1e
  • titleBar.activeForeground#5d484e
  • titleBar.inactiveBackground#140e0f
  • titleBar.inactiveForeground#473438
  • walkThrough.embeddedEditorBackground#281c1e
  • welcomePage.buttonBackground#2a1a1c
  • welcomePage.buttonHoverBackground#3c2a2e75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8b87af
source#5d484e
meta.diff, meta.diff.header#473438
markup.inserted#579523
markup.deleted#90002a
markup.changed#aa301b
invalid#90002aunderline italic
invalid.deprecated#5d484eunderline italic
entity.name.filename#c7371d
markup.error#90002a
markup.underlineunderline
markup.bold#aa301bbold
markup.heading#8b87afbold
markup.italic#c7371ditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#e8a766
markup.inline.raw, markup.raw.restructuredtext#579523
markup.underline.link, markup.underline.link.image#e8a766
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#682e50
entity.name.directive.restructuredtext, markup.quote#c7371ditalic
meta.separator.markdown#473438
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#579523
punctuation.definition.constant.restructuredtext#8b87af
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8b87af
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#5d484e
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c7371d
entity.name.type.class, entity.name.class#e8a766normal
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#8b87afitalic
entity.other.inherited-class#e8a766italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#473438
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#682e50
comment.block.documentation entity.name.type#e8a766italic
comment.block.documentation entity.name.type punctuation.definition.bracket#e8a766
comment.block.documentation variable#aa301bitalic
constant, variable.other.constant#8b87af
constant.character.escape, constant.character.string.escape, constant.regexp#682e50
entity.name.tag#682e50
entity.other.attribute-name.parent-selector#682e50
entity.other.attribute-name#579523italic
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#579523
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#aa301bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#579523italic
meta.decorator variable.other.object#579523
keyword, punctuation.definition.keyword#682e50
keyword.control.new, keyword.operator.newbold
meta.selector#682e50
support#e8a766italic
support.function.magic, support.variable, variable.other.predefined#8b87afregular
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#682e50
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#5d484e
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#682e50
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#e8a766
constant.other.date, constant.other.timestamp#aa301b
variable.other.alias.yaml#579523italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#682e50regular
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#e8a766italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#aa301b
storage.modifier#682e50
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c7371d
punctuation.definition.group.capture.regexp#682e50
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#90002a
punctuation.definition.character-class.regexp#e8a766
punctuation.definition.group.regexp#aa301b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#90002a
meta.assertion.look-ahead.regexp#579523
string#c7371d
punctuation.definition.string.begin, punctuation.definition.string.end#cfc9ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8b87af
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#473438
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#5d484e
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#aa301bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#5d484enormal
meta.selectionset.graphql variable#c7371d
meta.selectionset.graphql meta.arguments variable#5d484e
entity.name.fragment.graphql, variable.fragment.graphql#e8a766
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#5d484e
source.shell variable.other#8b87af
support.constant#8b87afnormal
meta.scope.prerequisites.makefile#c7371d
meta.attribute-selector.scss#c7371d
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#5d484e
meta.preprocessor.haskell#473438