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#053a8c10
  • activityBar.activeBorder#e4003880
  • activityBar.background#181818
  • activityBar.foreground#c5c5c5
  • activityBar.inactiveForeground#737373
  • activityBarBadge.background#e40038
  • activityBarBadge.foreground#181818
  • badge.background#242424
  • badge.foreground#c5c5c5
  • breadcrumb.activeSelectionForeground#c5c5c5
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#c5c5c5
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#181818
  • button.background#313131
  • button.foreground#c5c5c5
  • checkbox.background#313131
  • checkbox.border#181818
  • checkbox.foreground#c5c5c5
  • contrastBorder#181818
  • debugToolBar.background#313131
  • diffEditor.insertedTextBackground#59a41320
  • diffEditor.removedTextBackground#d61b1550
  • dropdown.background#181818
  • dropdown.border#181818
  • dropdown.foreground#c5c5c5
  • editor.background#181818
  • editor.findMatchBackground#fdb40b80
  • editor.findMatchHighlightBackground#8c00eb40
  • editor.findRangeHighlightBackground#4a4a4a75
  • editor.foldBackground#313131
  • editor.foreground#c5c5c5
  • editor.hoverHighlightBackground#181818
  • editor.lineHighlightBorder#242424
  • editor.rangeHighlightBackground#053a8c15
  • editor.selectionBackground#242424
  • editor.selectionHighlightBackground#242424
  • editor.snippetFinalTabstopHighlightBackground#181818
  • editor.snippetFinalTabstopHighlightBorder#59a413
  • editor.snippetTabstopHighlightBackground#181818
  • editor.snippetTabstopHighlightBorder#737373
  • editor.wordHighlightBackground#2594e050
  • editor.wordHighlightStrongBackground#59a41350
  • editorCodeLens.foreground#737373
  • editorError.foreground#d61b15
  • editorGroup.border#053a8c
  • editorGroup.dropBackground#4a4a4a70
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#59a41380
  • editorGutter.deletedBackground#d61b1580
  • editorGutter.modifiedBackground#2594e080
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#737373
  • editorIndentGuide.activeBackground#8c00eb45
  • editorIndentGuide.background#8c00eb1A
  • editorLineNumber.foreground#737373
  • editorLink.activeForeground#2594e0
  • editorMarkerNavigation.background#313131
  • editorOverviewRuler.addedForeground#59a41380
  • editorOverviewRuler.border#181818
  • editorOverviewRuler.currentContentForeground#59a413
  • editorOverviewRuler.deletedForeground#d61b1580
  • editorOverviewRuler.errorForeground#d61b1580
  • editorOverviewRuler.incomingContentForeground#053a8c
  • editorOverviewRuler.infoForeground#2594e080
  • editorOverviewRuler.modifiedForeground#2594e080
  • editorOverviewRuler.selectionHighlightForeground#fdb40b
  • editorOverviewRuler.warningForeground#fdb40b80
  • editorOverviewRuler.wordHighlightForeground#2594e0
  • editorOverviewRuler.wordHighlightStrongForeground#59a413
  • editorRuler.foreground#8c00eb1A
  • editorSuggestWidget.background#313131
  • editorSuggestWidget.foreground#c5c5c5
  • editorSuggestWidget.selectedBackground#242424
  • editorWarning.foreground#fdb40b
  • editorWhitespace.foreground#8c00eb1A
  • editorWidget.background#313131
  • errorForeground#d61b15
  • extensionButton.prominentBackground#59a41390
  • extensionButton.prominentForeground#c5c5c5
  • extensionButton.prominentHoverBackground#59a41360
  • focusBorder#737373
  • foreground#c5c5c5
  • gitDecoration.conflictingResourceForeground#fdb40b
  • gitDecoration.deletedResourceForeground#d61b15
  • gitDecoration.ignoredResourceForeground#737373
  • gitDecoration.modifiedResourceForeground#2594e0
  • gitDecoration.untrackedResourceForeground#59a413
  • input.background#181818
  • input.border#181818
  • input.foreground#c5c5c5
  • input.placeholderForeground#737373
  • inputOption.activeBorder#053a8c
  • inputValidation.errorBackground#181818
  • inputValidation.errorBorder#d61b15
  • inputValidation.errorForeground#d61b15
  • inputValidation.infoBackground#181818
  • inputValidation.infoBorder#053a8c
  • inputValidation.infoForeground#053a8c
  • inputValidation.warningBackground#181818
  • inputValidation.warningBorder#fdb40b
  • inputValidation.warningForeground#fdb40b
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#c5c5c5
  • list.dropBackground#242424
  • list.errorForeground#d61b15
  • list.focusBackground#4a4a4a75
  • list.highlightForeground#2594e0
  • list.hoverBackground#4a4a4a75
  • list.inactiveSelectionBackground#4a4a4a75
  • list.warningForeground#fdb40b
  • listFilterWidget.background#181818
  • listFilterWidget.noMatchesOutline#d61b15
  • listFilterWidget.outline#242424
  • merge.currentHeaderBackground#59a41390
  • merge.incomingHeaderBackground#053a8c90
  • notification.background#181818
  • notification.buttonBackground#242424
  • notification.buttonForeground#c5c5c5
  • notification.buttonHoverBackground#4a4a4a75
  • notification.errorBackground#d61b15
  • notification.errorForeground#181818
  • notification.foreground#c5c5c5
  • notification.infoBackground#053a8c
  • notification.infoForeground#181818
  • notification.warningBackground#fdb40b
  • notification.warningForeground#181818
  • notificationCenter.border#313131
  • notificationCenterHeader.background#181818
  • notificationCenterHeader.foreground#c5c5c5
  • notificationLink.foreground#2594e0
  • notifications.background#181818
  • notifications.border#313131
  • notifications.foreground#c5c5c5
  • notificationsErrorIcon.foreground#d61b15
  • notificationsInfoIcon.foreground#053a8c
  • notificationsWarningIcon.foreground#fdb40b
  • notificationToast.border#313131
  • panel.background#181818
  • panel.border#053a8c
  • panelInput.border#c5c5c5
  • panelTitle.activeBorder#e40038
  • panelTitle.activeForeground#c5c5c5
  • panelTitle.inactiveForeground#737373
  • peekView.border#242424
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#fdc70e80
  • peekViewResult.background#313131
  • peekViewResult.fileForeground#c5c5c5
  • peekViewResult.lineForeground#c5c5c5
  • peekViewResult.matchHighlightBackground#fdc70e80
  • peekViewResult.selectionBackground#242424
  • peekViewResult.selectionForeground#c5c5c5
  • peekViewTitle.background#181818
  • peekViewTitleDescription.foreground#737373
  • peekViewTitleLabel.foreground#c5c5c5
  • pickerGroup.border#053a8c
  • pickerGroup.foreground#2594e0
  • progressBar.background#e40038
  • scrollbar.shadow#444444
  • selection.background#053a8c
  • settings.checkboxBackground#313131
  • settings.checkboxBorder#181818
  • settings.checkboxForeground#c5c5c5
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#181818
  • settings.dropdownForeground#c5c5c5
  • settings.headerForeground#c5c5c5
  • settings.modifiedItemIndicator#fdb40b
  • settings.numberInputBackground#313131
  • settings.numberInputBorder#181818
  • settings.numberInputForeground#c5c5c5
  • settings.textInputBackground#313131
  • settings.textInputBorder#181818
  • settings.textInputForeground#c5c5c5
  • sideBar.background#313131
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#181818
  • sideBarTitle.foreground#c5c5c5
  • statusBar.background#181818
  • statusBar.debuggingBackground#d61b15
  • statusBar.debuggingForeground#181818
  • statusBar.foreground#c5c5c5
  • statusBar.noFolderBackground#181818
  • statusBar.noFolderForeground#c5c5c5
  • statusBarItem.prominentBackground#d61b15
  • statusBarItem.prominentHoverBackground#fdb40b
  • statusBarItem.remoteBackground#053a8c
  • statusBarItem.remoteForeground#181818
  • tab.activeBackground#181818
  • tab.activeBorderTop#e4003880
  • tab.activeForeground#c5c5c5
  • tab.border#181818
  • tab.inactiveBackground#313131
  • tab.inactiveForeground#737373
  • terminal.ansiBlack#242424
  • terminal.ansiBlue#053a8c
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#0855fe
  • terminal.ansiBrightCyan#3ea7fc
  • terminal.ansiBrightGreen#6ac118
  • terminal.ansiBrightMagenta#fb004f
  • terminal.ansiBrightRed#fb1b18
  • terminal.ansiBrightWhite#8c00eb
  • terminal.ansiBrightYellow#fdc70e
  • terminal.ansiCyan#2594e0
  • terminal.ansiGreen#59a413
  • terminal.ansiMagenta#e40038
  • terminal.ansiRed#d61b15
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#fdb40b
  • terminal.background#181818
  • terminal.border#c5c5c5
  • terminal.foreground#c5c5c5
  • terminal.selectionBackground#24242450
  • textBlockQuote.background#313131
  • titleBar.activeBackground#313131
  • titleBar.activeForeground#c5c5c5
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#737373
  • walkThrough.embeddedEditorBackground#313131
  • welcomePage.buttonBackground#242424
  • welcomePage.buttonHoverBackground#4a4a4a75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#053a8c
source#c5c5c5
meta.diff, meta.diff.header#737373
markup.inserted#59a413
markup.deleted#d61b15
markup.changed#fdb40b
invalid#d61b15underline italic
invalid.deprecated#c5c5c5underline italic
entity.name.filename#fdc70e
markup.error#d61b15
markup.underlineunderline
markup.bold#fdb40bbold
markup.heading#053a8cbold
markup.italic#fdc70eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2594e0
markup.inline.raw, markup.raw.restructuredtext#59a413
markup.underline.link, markup.underline.link.image#2594e0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#e40038
entity.name.directive.restructuredtext, markup.quote#fdc70eitalic
meta.separator.markdown#737373
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#59a413
punctuation.definition.constant.restructuredtext#053a8c
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#053a8c
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5c5c5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fdc70e
entity.name.type.class, entity.name.class#2594e0normal
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#053a8citalic
entity.other.inherited-class#2594e0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#737373
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#e40038
comment.block.documentation entity.name.type#2594e0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#2594e0
comment.block.documentation variable#fdb40bitalic
constant, variable.other.constant#053a8c
constant.character.escape, constant.character.string.escape, constant.regexp#e40038
entity.name.tag#e40038
entity.other.attribute-name.parent-selector#e40038
entity.other.attribute-name#59a413italic
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#59a413
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#fdb40bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#59a413italic
meta.decorator variable.other.object#59a413
keyword, punctuation.definition.keyword#e40038
keyword.control.new, keyword.operator.newbold
meta.selector#e40038
support#2594e0italic
support.function.magic, support.variable, variable.other.predefined#053a8cregular
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#e40038
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#c5c5c5
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#e40038
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2594e0
constant.other.date, constant.other.timestamp#fdb40b
variable.other.alias.yaml#59a413italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e40038regular
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#2594e0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fdb40b
storage.modifier#e40038
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fdc70e
punctuation.definition.group.capture.regexp#e40038
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d61b15
punctuation.definition.character-class.regexp#2594e0
punctuation.definition.group.regexp#fdb40b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d61b15
meta.assertion.look-ahead.regexp#59a413
string#fdc70e
punctuation.definition.string.begin, punctuation.definition.string.end#0855fe
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#053a8c
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#737373
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5c5c5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fdb40bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5c5c5normal
meta.selectionset.graphql variable#fdc70e
meta.selectionset.graphql meta.arguments variable#c5c5c5
entity.name.fragment.graphql, variable.fragment.graphql#2594e0
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#c5c5c5
source.shell variable.other#053a8c
support.constant#053a8cnormal
meta.scope.prerequisites.makefile#fdc70e
meta.attribute-selector.scss#fdc70e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5c5c5
meta.preprocessor.haskell#737373