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#49cae410
  • activityBar.activeBorder#a093e280
  • activityBar.background#262427
  • activityBar.foreground#fcfcfc
  • activityBar.inactiveForeground#676567
  • activityBarBadge.background#a093e2
  • activityBarBadge.foreground#262427
  • badge.background#3b393c
  • badge.foreground#fcfcfc
  • breadcrumb.activeSelectionForeground#fcfcfc
  • breadcrumb.background#262427
  • breadcrumb.focusForeground#fcfcfc
  • breadcrumb.foreground#676567
  • breadcrumbPicker.background#0f0e10
  • button.background#1e1d1f
  • button.foreground#fcfcfc
  • checkbox.background#1e1d1f
  • checkbox.border#0f0e10
  • checkbox.foreground#fcfcfc
  • contrastBorder#0f0e10
  • debugToolBar.background#1e1d1f
  • diffEditor.insertedTextBackground#bcdf5920
  • diffEditor.removedTextBackground#ff727250
  • dropdown.background#262427
  • dropdown.border#0f0e10
  • dropdown.foreground#fcfcfc
  • editor.background#262427
  • editor.findMatchBackground#fc9d6f80
  • editor.findMatchHighlightBackground#fcfcfc40
  • editor.findRangeHighlightBackground#514f5275
  • editor.foldBackground#1e1d1f
  • editor.foreground#fcfcfc
  • editor.hoverHighlightBackground#0f0e10
  • editor.lineHighlightBorder#3b393c
  • editor.rangeHighlightBackground#49cae415
  • editor.selectionBackground#3b393c
  • editor.selectionHighlightBackground#3b393c
  • editor.snippetFinalTabstopHighlightBackground#262427
  • editor.snippetFinalTabstopHighlightBorder#bcdf59
  • editor.snippetTabstopHighlightBackground#262427
  • editor.snippetTabstopHighlightBorder#676567
  • editor.wordHighlightBackground#aee8f450
  • editor.wordHighlightStrongBackground#bcdf5950
  • editorCodeLens.foreground#676567
  • editorError.foreground#ff7272
  • editorGroup.border#49cae4
  • editorGroup.dropBackground#514f5270
  • editorGroupHeader.tabsBackground#0f0e10
  • editorGutter.addedBackground#bcdf5980
  • editorGutter.deletedBackground#ff727280
  • editorGutter.modifiedBackground#aee8f480
  • editorHoverWidget.background#262427
  • editorHoverWidget.border#676567
  • editorIndentGuide.activeBackground#fcfcfc45
  • editorIndentGuide.background#fcfcfc1A
  • editorLineNumber.foreground#676567
  • editorLink.activeForeground#aee8f4
  • editorMarkerNavigation.background#1e1d1f
  • editorOverviewRuler.addedForeground#bcdf5980
  • editorOverviewRuler.border#0f0e10
  • editorOverviewRuler.currentContentForeground#bcdf59
  • editorOverviewRuler.deletedForeground#ff727280
  • editorOverviewRuler.errorForeground#ff727280
  • editorOverviewRuler.incomingContentForeground#49cae4
  • editorOverviewRuler.infoForeground#aee8f480
  • editorOverviewRuler.modifiedForeground#aee8f480
  • editorOverviewRuler.selectionHighlightForeground#fc9d6f
  • editorOverviewRuler.warningForeground#fc9d6f80
  • editorOverviewRuler.wordHighlightForeground#aee8f4
  • editorOverviewRuler.wordHighlightStrongForeground#bcdf59
  • editorRuler.foreground#fcfcfc1A
  • editorSuggestWidget.background#1e1d1f
  • editorSuggestWidget.foreground#fcfcfc
  • editorSuggestWidget.selectedBackground#3b393c
  • editorWarning.foreground#fc9d6f
  • editorWhitespace.foreground#fcfcfc1A
  • editorWidget.background#1e1d1f
  • errorForeground#ff7272
  • extensionButton.prominentBackground#bcdf5990
  • extensionButton.prominentForeground#fcfcfc
  • extensionButton.prominentHoverBackground#bcdf5960
  • focusBorder#676567
  • foreground#fcfcfc
  • gitDecoration.conflictingResourceForeground#fc9d6f
  • gitDecoration.deletedResourceForeground#ff7272
  • gitDecoration.ignoredResourceForeground#676567
  • gitDecoration.modifiedResourceForeground#aee8f4
  • gitDecoration.untrackedResourceForeground#bcdf59
  • input.background#262427
  • input.border#0f0e10
  • input.foreground#fcfcfc
  • input.placeholderForeground#676567
  • inputOption.activeBorder#49cae4
  • inputValidation.errorBackground#262427
  • inputValidation.errorBorder#ff7272
  • inputValidation.errorForeground#ff7272
  • inputValidation.infoBackground#262427
  • inputValidation.infoBorder#49cae4
  • inputValidation.infoForeground#49cae4
  • inputValidation.warningBackground#262427
  • inputValidation.warningBorder#fc9d6f
  • inputValidation.warningForeground#fc9d6f
  • list.activeSelectionBackground#3b393c
  • list.activeSelectionForeground#fcfcfc
  • list.dropBackground#3b393c
  • list.errorForeground#ff7272
  • list.focusBackground#514f5275
  • list.highlightForeground#aee8f4
  • list.hoverBackground#514f5275
  • list.inactiveSelectionBackground#514f5275
  • list.warningForeground#fc9d6f
  • listFilterWidget.background#262427
  • listFilterWidget.noMatchesOutline#ff7272
  • listFilterWidget.outline#3b393c
  • merge.currentHeaderBackground#bcdf5990
  • merge.incomingHeaderBackground#49cae490
  • notification.background#262427
  • notification.buttonBackground#3b393c
  • notification.buttonForeground#fcfcfc
  • notification.buttonHoverBackground#514f5275
  • notification.errorBackground#ff7272
  • notification.errorForeground#262427
  • notification.foreground#fcfcfc
  • notification.infoBackground#49cae4
  • notification.infoForeground#262427
  • notification.warningBackground#fc9d6f
  • notification.warningForeground#262427
  • notificationCenter.border#1e1d1f
  • notificationCenterHeader.background#262427
  • notificationCenterHeader.foreground#fcfcfc
  • notificationLink.foreground#aee8f4
  • notifications.background#262427
  • notifications.border#1e1d1f
  • notifications.foreground#fcfcfc
  • notificationsErrorIcon.foreground#ff7272
  • notificationsInfoIcon.foreground#49cae4
  • notificationsWarningIcon.foreground#fc9d6f
  • notificationToast.border#1e1d1f
  • panel.background#262427
  • panel.border#49cae4
  • panelInput.border#fcfcfc
  • panelTitle.activeBorder#a093e2
  • panelTitle.activeForeground#fcfcfc
  • panelTitle.inactiveForeground#676567
  • peekView.border#3b393c
  • peekViewEditor.background#262427
  • peekViewEditor.matchHighlightBackground#ffd27180
  • peekViewResult.background#1e1d1f
  • peekViewResult.fileForeground#fcfcfc
  • peekViewResult.lineForeground#fcfcfc
  • peekViewResult.matchHighlightBackground#ffd27180
  • peekViewResult.selectionBackground#3b393c
  • peekViewResult.selectionForeground#fcfcfc
  • peekViewTitle.background#0f0e10
  • peekViewTitleDescription.foreground#676567
  • peekViewTitleLabel.foreground#fcfcfc
  • pickerGroup.border#49cae4
  • pickerGroup.foreground#aee8f4
  • progressBar.background#a093e2
  • scrollbar.shadow#444444
  • selection.background#49cae4
  • settings.checkboxBackground#1e1d1f
  • settings.checkboxBorder#0f0e10
  • settings.checkboxForeground#fcfcfc
  • settings.dropdownBackground#1e1d1f
  • settings.dropdownBorder#0f0e10
  • settings.dropdownForeground#fcfcfc
  • settings.headerForeground#fcfcfc
  • settings.modifiedItemIndicator#fc9d6f
  • settings.numberInputBackground#1e1d1f
  • settings.numberInputBorder#0f0e10
  • settings.numberInputForeground#fcfcfc
  • settings.textInputBackground#1e1d1f
  • settings.textInputBorder#0f0e10
  • settings.textInputForeground#fcfcfc
  • sideBar.background#1e1d1f
  • sideBarSectionHeader.background#262427
  • sideBarSectionHeader.border#0f0e10
  • sideBarTitle.foreground#fcfcfc
  • statusBar.background#0f0e10
  • statusBar.debuggingBackground#ff7272
  • statusBar.debuggingForeground#0f0e10
  • statusBar.foreground#fcfcfc
  • statusBar.noFolderBackground#0f0e10
  • statusBar.noFolderForeground#fcfcfc
  • statusBarItem.prominentBackground#ff7272
  • statusBarItem.prominentHoverBackground#fc9d6f
  • statusBarItem.remoteBackground#49cae4
  • statusBarItem.remoteForeground#262427
  • tab.activeBackground#262427
  • tab.activeBorderTop#a093e280
  • tab.activeForeground#fcfcfc
  • tab.border#0f0e10
  • tab.inactiveBackground#1e1d1f
  • tab.inactiveForeground#676567
  • terminal.ansiBlack#3b393c
  • terminal.ansiBlue#49cae4
  • terminal.ansiBrightBlack#514f52
  • terminal.ansiBrightBlue#64d2e8
  • terminal.ansiBrightCyan#baebf6
  • terminal.ansiBrightGreen#c6e472
  • terminal.ansiBrightMagenta#aea3e6
  • terminal.ansiBrightRed#ff8787
  • terminal.ansiBrightWhite#fcfcfc
  • terminal.ansiBrightYellow#ffd271
  • terminal.ansiCyan#aee8f4
  • terminal.ansiGreen#bcdf59
  • terminal.ansiMagenta#a093e2
  • terminal.ansiRed#ff7272
  • terminal.ansiWhite#eae9eb
  • terminal.ansiYellow#fc9d6f
  • terminal.background#262427
  • terminal.border#fcfcfc
  • terminal.foreground#fcfcfc
  • terminal.selectionBackground#3b393c50
  • textBlockQuote.background#1e1d1f
  • titleBar.activeBackground#1e1d1f
  • titleBar.activeForeground#fcfcfc
  • titleBar.inactiveBackground#0f0e10
  • titleBar.inactiveForeground#676567
  • walkThrough.embeddedEditorBackground#1e1d1f
  • welcomePage.buttonBackground#3b393c
  • welcomePage.buttonHoverBackground#514f5275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#49cae4
source#fcfcfc
meta.diff, meta.diff.header#676567
markup.inserted#bcdf59
markup.deleted#ff7272
markup.changed#fc9d6f
invalid#ff7272underline italic
invalid.deprecated#fcfcfcunderline italic
entity.name.filename#ffd271
markup.error#ff7272
markup.underlineunderline
markup.bold#fc9d6fbold
markup.heading#49cae4bold
markup.italic#ffd271italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#aee8f4
markup.inline.raw, markup.raw.restructuredtext#bcdf59
markup.underline.link, markup.underline.link.image#aee8f4
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a093e2
entity.name.directive.restructuredtext, markup.quote#ffd271italic
meta.separator.markdown#676567
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#bcdf59
punctuation.definition.constant.restructuredtext#49cae4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#49cae4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fcfcfc
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffd271
entity.name.type.class, entity.name.class#aee8f4normal
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#49cae4italic
entity.other.inherited-class#aee8f4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#676567
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a093e2
comment.block.documentation entity.name.type#aee8f4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#aee8f4
comment.block.documentation variable#fc9d6fitalic
constant, variable.other.constant#49cae4
constant.character.escape, constant.character.string.escape, constant.regexp#a093e2
entity.name.tag#a093e2
entity.other.attribute-name.parent-selector#a093e2
entity.other.attribute-name#bcdf59italic
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#bcdf59
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#fc9d6fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#bcdf59italic
meta.decorator variable.other.object#bcdf59
keyword, punctuation.definition.keyword#a093e2
keyword.control.new, keyword.operator.newbold
meta.selector#a093e2
support#aee8f4italic
support.function.magic, support.variable, variable.other.predefined#49cae4regular
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#a093e2
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#fcfcfc
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#a093e2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#aee8f4
constant.other.date, constant.other.timestamp#fc9d6f
variable.other.alias.yaml#bcdf59italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a093e2regular
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#aee8f4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fc9d6f
storage.modifier#a093e2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffd271
punctuation.definition.group.capture.regexp#a093e2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff7272
punctuation.definition.character-class.regexp#aee8f4
punctuation.definition.group.regexp#fc9d6f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff7272
meta.assertion.look-ahead.regexp#bcdf59
string#ffd271
punctuation.definition.string.begin, punctuation.definition.string.end#ffca58
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#49cae4
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#676567
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fcfcfc
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fc9d6fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fcfcfcnormal
meta.selectionset.graphql variable#ffd271
meta.selectionset.graphql meta.arguments variable#fcfcfc
entity.name.fragment.graphql, variable.fragment.graphql#aee8f4
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#fcfcfc
source.shell variable.other#49cae4
support.constant#49cae4normal
meta.scope.prerequisites.makefile#ffd271
meta.attribute-selector.scss#ffd271
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fcfcfc
meta.preprocessor.haskell#676567