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#2c56ab10
  • activityBar.activeBorder#af842780
  • activityBar.background#212024
  • activityBar.foreground#7e7789
  • activityBar.inactiveForeground#664b46
  • activityBarBadge.background#af8427
  • activityBarBadge.foreground#212024
  • badge.background#000000
  • badge.foreground#7e7789
  • breadcrumb.activeSelectionForeground#7e7789
  • breadcrumb.background#212024
  • breadcrumb.focusForeground#7e7789
  • breadcrumb.foreground#664b46
  • breadcrumbPicker.background#1e120c
  • button.background#3c2418
  • button.foreground#7e7789
  • checkbox.background#3c2418
  • checkbox.border#1e120c
  • checkbox.foreground#7e7789
  • contrastBorder#1e120c
  • debugToolBar.background#3c2418
  • diffEditor.insertedTextBackground#31ab6020
  • diffEditor.removedTextBackground#ab2e3050
  • dropdown.background#212024
  • dropdown.border#1e120c
  • dropdown.foreground#7e7789
  • editor.background#212024
  • editor.findMatchBackground#ab420080
  • editor.findMatchHighlightBackground#5b6da740
  • editor.findRangeHighlightBackground#5a362575
  • editor.foldBackground#3c2418
  • editor.foreground#7e7789
  • editor.hoverHighlightBackground#1e120c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#2c56ab15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#212024
  • editor.snippetFinalTabstopHighlightBorder#31ab60
  • editor.snippetTabstopHighlightBackground#212024
  • editor.snippetTabstopHighlightBorder#664b46
  • editor.wordHighlightBackground#1fa5ab50
  • editor.wordHighlightStrongBackground#31ab6050
  • editorCodeLens.foreground#664b46
  • editorError.foreground#ab2e30
  • editorGroup.border#2c56ab
  • editorGroup.dropBackground#5a362570
  • editorGroupHeader.tabsBackground#1e120c
  • editorGutter.addedBackground#31ab6080
  • editorGutter.deletedBackground#ab2e3080
  • editorGutter.modifiedBackground#1fa5ab80
  • editorHoverWidget.background#212024
  • editorHoverWidget.border#664b46
  • editorIndentGuide.activeBackground#5b6da745
  • editorIndentGuide.background#5b6da71A
  • editorLineNumber.foreground#664b46
  • editorLink.activeForeground#1fa5ab
  • editorMarkerNavigation.background#3c2418
  • editorOverviewRuler.addedForeground#31ab6080
  • editorOverviewRuler.border#1e120c
  • editorOverviewRuler.currentContentForeground#31ab60
  • editorOverviewRuler.deletedForeground#ab2e3080
  • editorOverviewRuler.errorForeground#ab2e3080
  • editorOverviewRuler.incomingContentForeground#2c56ab
  • editorOverviewRuler.infoForeground#1fa5ab80
  • editorOverviewRuler.modifiedForeground#1fa5ab80
  • editorOverviewRuler.selectionHighlightForeground#ab4200
  • editorOverviewRuler.warningForeground#ab420080
  • editorOverviewRuler.wordHighlightForeground#1fa5ab
  • editorOverviewRuler.wordHighlightStrongForeground#31ab60
  • editorRuler.foreground#5b6da71A
  • editorSuggestWidget.background#3c2418
  • editorSuggestWidget.foreground#7e7789
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#ab4200
  • editorWhitespace.foreground#5b6da71A
  • editorWidget.background#3c2418
  • errorForeground#ab2e30
  • extensionButton.prominentBackground#31ab6090
  • extensionButton.prominentForeground#7e7789
  • extensionButton.prominentHoverBackground#31ab6060
  • focusBorder#664b46
  • foreground#7e7789
  • gitDecoration.conflictingResourceForeground#ab4200
  • gitDecoration.deletedResourceForeground#ab2e30
  • gitDecoration.ignoredResourceForeground#664b46
  • gitDecoration.modifiedResourceForeground#1fa5ab
  • gitDecoration.untrackedResourceForeground#31ab60
  • input.background#212024
  • input.border#1e120c
  • input.foreground#7e7789
  • input.placeholderForeground#664b46
  • inputOption.activeBorder#2c56ab
  • inputValidation.errorBackground#212024
  • inputValidation.errorBorder#ab2e30
  • inputValidation.errorForeground#ab2e30
  • inputValidation.infoBackground#212024
  • inputValidation.infoBorder#2c56ab
  • inputValidation.infoForeground#2c56ab
  • inputValidation.warningBackground#212024
  • inputValidation.warningBorder#ab4200
  • inputValidation.warningForeground#ab4200
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#7e7789
  • list.dropBackground#000000
  • list.errorForeground#ab2e30
  • list.focusBackground#5a362575
  • list.highlightForeground#1fa5ab
  • list.hoverBackground#5a362575
  • list.inactiveSelectionBackground#5a362575
  • list.warningForeground#ab4200
  • listFilterWidget.background#212024
  • listFilterWidget.noMatchesOutline#ab2e30
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#31ab6090
  • merge.incomingHeaderBackground#2c56ab90
  • notification.background#212024
  • notification.buttonBackground#000000
  • notification.buttonForeground#7e7789
  • notification.buttonHoverBackground#5a362575
  • notification.errorBackground#ab2e30
  • notification.errorForeground#212024
  • notification.foreground#7e7789
  • notification.infoBackground#2c56ab
  • notification.infoForeground#212024
  • notification.warningBackground#ab4200
  • notification.warningForeground#212024
  • notificationCenter.border#3c2418
  • notificationCenterHeader.background#212024
  • notificationCenterHeader.foreground#7e7789
  • notificationLink.foreground#1fa5ab
  • notifications.background#212024
  • notifications.border#3c2418
  • notifications.foreground#7e7789
  • notificationsErrorIcon.foreground#ab2e30
  • notificationsInfoIcon.foreground#2c56ab
  • notificationsWarningIcon.foreground#ab4200
  • notificationToast.border#3c2418
  • panel.background#212024
  • panel.border#2c56ab
  • panelInput.border#7e7789
  • panelTitle.activeBorder#af8427
  • panelTitle.activeForeground#7e7789
  • panelTitle.inactiveForeground#664b46
  • peekView.border#000000
  • peekViewEditor.background#212024
  • peekViewEditor.matchHighlightBackground#ff5e1e80
  • peekViewResult.background#3c2418
  • peekViewResult.fileForeground#7e7789
  • peekViewResult.lineForeground#7e7789
  • peekViewResult.matchHighlightBackground#ff5e1e80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#7e7789
  • peekViewTitle.background#1e120c
  • peekViewTitleDescription.foreground#664b46
  • peekViewTitleLabel.foreground#7e7789
  • pickerGroup.border#2c56ab
  • pickerGroup.foreground#1fa5ab
  • progressBar.background#af8427
  • scrollbar.shadow#444444
  • selection.background#2c56ab
  • settings.checkboxBackground#3c2418
  • settings.checkboxBorder#1e120c
  • settings.checkboxForeground#7e7789
  • settings.dropdownBackground#3c2418
  • settings.dropdownBorder#1e120c
  • settings.dropdownForeground#7e7789
  • settings.headerForeground#7e7789
  • settings.modifiedItemIndicator#ab4200
  • settings.numberInputBackground#3c2418
  • settings.numberInputBorder#1e120c
  • settings.numberInputForeground#7e7789
  • settings.textInputBackground#3c2418
  • settings.textInputBorder#1e120c
  • settings.textInputForeground#7e7789
  • sideBar.background#3c2418
  • sideBarSectionHeader.background#212024
  • sideBarSectionHeader.border#1e120c
  • sideBarTitle.foreground#7e7789
  • statusBar.background#1e120c
  • statusBar.debuggingBackground#ab2e30
  • statusBar.debuggingForeground#1e120c
  • statusBar.foreground#7e7789
  • statusBar.noFolderBackground#1e120c
  • statusBar.noFolderForeground#7e7789
  • statusBarItem.prominentBackground#ab2e30
  • statusBarItem.prominentHoverBackground#ab4200
  • statusBarItem.remoteBackground#2c56ab
  • statusBarItem.remoteForeground#212024
  • tab.activeBackground#212024
  • tab.activeBorderTop#af842780
  • tab.activeForeground#7e7789
  • tab.border#1e120c
  • tab.inactiveBackground#3c2418
  • tab.inactiveForeground#664b46
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2c56ab
  • terminal.ansiBrightBlack#5a3625
  • terminal.ansiBrightBlue#4487ff
  • terminal.ansiBrightCyan#1efaff
  • terminal.ansiBrightGreen#3bff99
  • terminal.ansiBrightMagenta#ffc21c
  • terminal.ansiBrightRed#ff3d48
  • terminal.ansiBrightWhite#5b6da7
  • terminal.ansiBrightYellow#ff5e1e
  • terminal.ansiCyan#1fa5ab
  • terminal.ansiGreen#31ab60
  • terminal.ansiMagenta#af8427
  • terminal.ansiRed#ab2e30
  • terminal.ansiWhite#8a8dab
  • terminal.ansiYellow#ab4200
  • terminal.background#212024
  • terminal.border#7e7789
  • terminal.foreground#7e7789
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#3c2418
  • titleBar.activeBackground#3c2418
  • titleBar.activeForeground#7e7789
  • titleBar.inactiveBackground#1e120c
  • titleBar.inactiveForeground#664b46
  • walkThrough.embeddedEditorBackground#3c2418
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#5a362575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2c56ab
source#7e7789
meta.diff, meta.diff.header#664b46
markup.inserted#31ab60
markup.deleted#ab2e30
markup.changed#ab4200
invalid#ab2e30underline italic
invalid.deprecated#7e7789underline italic
entity.name.filename#ff5e1e
markup.error#ab2e30
markup.underlineunderline
markup.bold#ab4200bold
markup.heading#2c56abbold
markup.italic#ff5e1eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1fa5ab
markup.inline.raw, markup.raw.restructuredtext#31ab60
markup.underline.link, markup.underline.link.image#1fa5ab
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#af8427
entity.name.directive.restructuredtext, markup.quote#ff5e1eitalic
meta.separator.markdown#664b46
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#31ab60
punctuation.definition.constant.restructuredtext#2c56ab
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2c56ab
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#7e7789
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ff5e1e
entity.name.type.class, entity.name.class#1fa5abnormal
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#2c56abitalic
entity.other.inherited-class#1fa5abitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#664b46
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#af8427
comment.block.documentation entity.name.type#1fa5abitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#1fa5ab
comment.block.documentation variable#ab4200italic
constant, variable.other.constant#2c56ab
constant.character.escape, constant.character.string.escape, constant.regexp#af8427
entity.name.tag#af8427
entity.other.attribute-name.parent-selector#af8427
entity.other.attribute-name#31ab60italic
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#31ab60
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#ab4200italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#31ab60italic
meta.decorator variable.other.object#31ab60
keyword, punctuation.definition.keyword#af8427
keyword.control.new, keyword.operator.newbold
meta.selector#af8427
support#1fa5abitalic
support.function.magic, support.variable, variable.other.predefined#2c56abregular
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#af8427
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#7e7789
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#af8427
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#1fa5ab
constant.other.date, constant.other.timestamp#ab4200
variable.other.alias.yaml#31ab60italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#af8427regular
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#1fa5abitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ab4200
storage.modifier#af8427
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ff5e1e
punctuation.definition.group.capture.regexp#af8427
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ab2e30
punctuation.definition.character-class.regexp#1fa5ab
punctuation.definition.group.regexp#ab4200
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ab2e30
meta.assertion.look-ahead.regexp#31ab60
string#ff5e1e
punctuation.definition.string.begin, punctuation.definition.string.end#4487ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2c56ab
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#664b46
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#7e7789
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ab4200italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#7e7789normal
meta.selectionset.graphql variable#ff5e1e
meta.selectionset.graphql meta.arguments variable#7e7789
entity.name.fragment.graphql, variable.fragment.graphql#1fa5ab
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#7e7789
source.shell variable.other#2c56ab
support.constant#2c56abnormal
meta.scope.prerequisites.makefile#ff5e1e
meta.attribute-selector.scss#ff5e1e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#7e7789
meta.preprocessor.haskell#664b46