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#134eb210
  • activityBar.activeBorder#55008780
  • activityBar.background#eaeaea
  • activityBar.foreground#c3c3c3
  • activityBar.inactiveForeground#6d6d6d
  • activityBarBadge.background#550087
  • activityBarBadge.foreground#eaeaea
  • badge.background#212121
  • badge.foreground#c3c3c3
  • breadcrumb.activeSelectionForeground#c3c3c3
  • breadcrumb.background#eaeaea
  • breadcrumb.focusForeground#c3c3c3
  • breadcrumb.foreground#6d6d6d
  • breadcrumbPicker.background#161616
  • button.background#2c2c2c
  • button.foreground#c3c3c3
  • checkbox.background#2c2c2c
  • checkbox.border#161616
  • checkbox.foreground#c3c3c3
  • contrastBorder#161616
  • debugToolBar.background#2c2c2c
  • diffEditor.insertedTextBackground#457b2320
  • diffEditor.removedTextBackground#b7141e50
  • dropdown.background#eaeaea
  • dropdown.border#161616
  • dropdown.foreground#c3c3c3
  • editor.background#eaeaea
  • editor.findMatchBackground#f5971d80
  • editor.findMatchHighlightBackground#d8d8d840
  • editor.findRangeHighlightBackground#42424275
  • editor.foldBackground#2c2c2c
  • editor.foreground#c3c3c3
  • editor.hoverHighlightBackground#161616
  • editor.lineHighlightBorder#212121
  • editor.rangeHighlightBackground#134eb215
  • editor.selectionBackground#212121
  • editor.selectionHighlightBackground#212121
  • editor.snippetFinalTabstopHighlightBackground#eaeaea
  • editor.snippetFinalTabstopHighlightBorder#457b23
  • editor.snippetTabstopHighlightBackground#eaeaea
  • editor.snippetTabstopHighlightBorder#6d6d6d
  • editor.wordHighlightBackground#0e707c50
  • editor.wordHighlightStrongBackground#457b2350
  • editorCodeLens.foreground#6d6d6d
  • editorError.foreground#b7141e
  • editorGroup.border#134eb2
  • editorGroup.dropBackground#42424270
  • editorGroupHeader.tabsBackground#161616
  • editorGutter.addedBackground#457b2380
  • editorGutter.deletedBackground#b7141e80
  • editorGutter.modifiedBackground#0e707c80
  • editorHoverWidget.background#eaeaea
  • editorHoverWidget.border#6d6d6d
  • editorIndentGuide.activeBackground#d8d8d845
  • editorIndentGuide.background#d8d8d81A
  • editorLineNumber.foreground#6d6d6d
  • editorLink.activeForeground#0e707c
  • editorMarkerNavigation.background#2c2c2c
  • editorOverviewRuler.addedForeground#457b2380
  • editorOverviewRuler.border#161616
  • editorOverviewRuler.currentContentForeground#457b23
  • editorOverviewRuler.deletedForeground#b7141e80
  • editorOverviewRuler.errorForeground#b7141e80
  • editorOverviewRuler.incomingContentForeground#134eb2
  • editorOverviewRuler.infoForeground#0e707c80
  • editorOverviewRuler.modifiedForeground#0e707c80
  • editorOverviewRuler.selectionHighlightForeground#f5971d
  • editorOverviewRuler.warningForeground#f5971d80
  • editorOverviewRuler.wordHighlightForeground#0e707c
  • editorOverviewRuler.wordHighlightStrongForeground#457b23
  • editorRuler.foreground#d8d8d81A
  • editorSuggestWidget.background#2c2c2c
  • editorSuggestWidget.foreground#c3c3c3
  • editorSuggestWidget.selectedBackground#212121
  • editorWarning.foreground#f5971d
  • editorWhitespace.foreground#d8d8d81A
  • editorWidget.background#2c2c2c
  • errorForeground#b7141e
  • extensionButton.prominentBackground#457b2390
  • extensionButton.prominentForeground#c3c3c3
  • extensionButton.prominentHoverBackground#457b2360
  • focusBorder#6d6d6d
  • foreground#c3c3c3
  • gitDecoration.conflictingResourceForeground#f5971d
  • gitDecoration.deletedResourceForeground#b7141e
  • gitDecoration.ignoredResourceForeground#6d6d6d
  • gitDecoration.modifiedResourceForeground#0e707c
  • gitDecoration.untrackedResourceForeground#457b23
  • input.background#eaeaea
  • input.border#161616
  • input.foreground#c3c3c3
  • input.placeholderForeground#6d6d6d
  • inputOption.activeBorder#134eb2
  • inputValidation.errorBackground#eaeaea
  • inputValidation.errorBorder#b7141e
  • inputValidation.errorForeground#b7141e
  • inputValidation.infoBackground#eaeaea
  • inputValidation.infoBorder#134eb2
  • inputValidation.infoForeground#134eb2
  • inputValidation.warningBackground#eaeaea
  • inputValidation.warningBorder#f5971d
  • inputValidation.warningForeground#f5971d
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#c3c3c3
  • list.dropBackground#212121
  • list.errorForeground#b7141e
  • list.focusBackground#42424275
  • list.highlightForeground#0e707c
  • list.hoverBackground#42424275
  • list.inactiveSelectionBackground#42424275
  • list.warningForeground#f5971d
  • listFilterWidget.background#eaeaea
  • listFilterWidget.noMatchesOutline#b7141e
  • listFilterWidget.outline#212121
  • merge.currentHeaderBackground#457b2390
  • merge.incomingHeaderBackground#134eb290
  • notification.background#eaeaea
  • notification.buttonBackground#212121
  • notification.buttonForeground#c3c3c3
  • notification.buttonHoverBackground#42424275
  • notification.errorBackground#b7141e
  • notification.errorForeground#eaeaea
  • notification.foreground#c3c3c3
  • notification.infoBackground#134eb2
  • notification.infoForeground#eaeaea
  • notification.warningBackground#f5971d
  • notification.warningForeground#eaeaea
  • notificationCenter.border#2c2c2c
  • notificationCenterHeader.background#eaeaea
  • notificationCenterHeader.foreground#c3c3c3
  • notificationLink.foreground#0e707c
  • notifications.background#eaeaea
  • notifications.border#2c2c2c
  • notifications.foreground#c3c3c3
  • notificationsErrorIcon.foreground#b7141e
  • notificationsInfoIcon.foreground#134eb2
  • notificationsWarningIcon.foreground#f5971d
  • notificationToast.border#2c2c2c
  • panel.background#eaeaea
  • panel.border#134eb2
  • panelInput.border#c3c3c3
  • panelTitle.activeBorder#550087
  • panelTitle.activeForeground#c3c3c3
  • panelTitle.inactiveForeground#6d6d6d
  • peekView.border#212121
  • peekViewEditor.background#eaeaea
  • peekViewEditor.matchHighlightBackground#fee92e80
  • peekViewResult.background#2c2c2c
  • peekViewResult.fileForeground#c3c3c3
  • peekViewResult.lineForeground#c3c3c3
  • peekViewResult.matchHighlightBackground#fee92e80
  • peekViewResult.selectionBackground#212121
  • peekViewResult.selectionForeground#c3c3c3
  • peekViewTitle.background#161616
  • peekViewTitleDescription.foreground#6d6d6d
  • peekViewTitleLabel.foreground#c3c3c3
  • pickerGroup.border#134eb2
  • pickerGroup.foreground#0e707c
  • progressBar.background#550087
  • scrollbar.shadow#444444
  • selection.background#134eb2
  • settings.checkboxBackground#2c2c2c
  • settings.checkboxBorder#161616
  • settings.checkboxForeground#c3c3c3
  • settings.dropdownBackground#2c2c2c
  • settings.dropdownBorder#161616
  • settings.dropdownForeground#c3c3c3
  • settings.headerForeground#c3c3c3
  • settings.modifiedItemIndicator#f5971d
  • settings.numberInputBackground#2c2c2c
  • settings.numberInputBorder#161616
  • settings.numberInputForeground#c3c3c3
  • settings.textInputBackground#2c2c2c
  • settings.textInputBorder#161616
  • settings.textInputForeground#c3c3c3
  • sideBar.background#2c2c2c
  • sideBarSectionHeader.background#eaeaea
  • sideBarSectionHeader.border#161616
  • sideBarTitle.foreground#c3c3c3
  • statusBar.background#161616
  • statusBar.debuggingBackground#b7141e
  • statusBar.debuggingForeground#161616
  • statusBar.foreground#c3c3c3
  • statusBar.noFolderBackground#161616
  • statusBar.noFolderForeground#c3c3c3
  • statusBarItem.prominentBackground#b7141e
  • statusBarItem.prominentHoverBackground#f5971d
  • statusBarItem.remoteBackground#134eb2
  • statusBarItem.remoteForeground#eaeaea
  • tab.activeBackground#eaeaea
  • tab.activeBorderTop#55008780
  • tab.activeForeground#c3c3c3
  • tab.border#161616
  • tab.inactiveBackground#2c2c2c
  • tab.inactiveForeground#6d6d6d
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#134eb2
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#53a4f3
  • terminal.ansiBrightCyan#26bad1
  • terminal.ansiBrightGreen#7aba39
  • terminal.ansiBrightMagenta#a94dbb
  • terminal.ansiBrightRed#e83a3f
  • terminal.ansiBrightWhite#d8d8d8
  • terminal.ansiBrightYellow#fee92e
  • terminal.ansiCyan#0e707c
  • terminal.ansiGreen#457b23
  • terminal.ansiMagenta#550087
  • terminal.ansiRed#b7141e
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#f5971d
  • terminal.background#eaeaea
  • terminal.border#c3c3c3
  • terminal.foreground#c3c3c3
  • terminal.selectionBackground#21212150
  • textBlockQuote.background#2c2c2c
  • titleBar.activeBackground#2c2c2c
  • titleBar.activeForeground#c3c3c3
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#6d6d6d
  • walkThrough.embeddedEditorBackground#2c2c2c
  • welcomePage.buttonBackground#212121
  • welcomePage.buttonHoverBackground#42424275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#134eb2
source#c3c3c3
meta.diff, meta.diff.header#6d6d6d
markup.inserted#457b23
markup.deleted#b7141e
markup.changed#f5971d
invalid#b7141eunderline italic
invalid.deprecated#c3c3c3underline italic
entity.name.filename#fee92e
markup.error#b7141e
markup.underlineunderline
markup.bold#f5971dbold
markup.heading#134eb2bold
markup.italic#fee92eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0e707c
markup.inline.raw, markup.raw.restructuredtext#457b23
markup.underline.link, markup.underline.link.image#0e707c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#550087
entity.name.directive.restructuredtext, markup.quote#fee92eitalic
meta.separator.markdown#6d6d6d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#457b23
punctuation.definition.constant.restructuredtext#134eb2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#134eb2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c3c3c3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fee92e
entity.name.type.class, entity.name.class#0e707cnormal
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#134eb2italic
entity.other.inherited-class#0e707citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6d6d6d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#550087
comment.block.documentation entity.name.type#0e707citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#0e707c
comment.block.documentation variable#f5971ditalic
constant, variable.other.constant#134eb2
constant.character.escape, constant.character.string.escape, constant.regexp#550087
entity.name.tag#550087
entity.other.attribute-name.parent-selector#550087
entity.other.attribute-name#457b23italic
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#457b23
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#f5971ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#457b23italic
meta.decorator variable.other.object#457b23
keyword, punctuation.definition.keyword#550087
keyword.control.new, keyword.operator.newbold
meta.selector#550087
support#0e707citalic
support.function.magic, support.variable, variable.other.predefined#134eb2regular
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#550087
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#c3c3c3
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#550087
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0e707c
constant.other.date, constant.other.timestamp#f5971d
variable.other.alias.yaml#457b23italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#550087regular
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#0e707citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f5971d
storage.modifier#550087
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fee92e
punctuation.definition.group.capture.regexp#550087
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b7141e
punctuation.definition.character-class.regexp#0e707c
punctuation.definition.group.regexp#f5971d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b7141e
meta.assertion.look-ahead.regexp#457b23
string#fee92e
punctuation.definition.string.begin, punctuation.definition.string.end#53a4f3
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#134eb2
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#6d6d6d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c3c3c3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f5971ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c3c3c3normal
meta.selectionset.graphql variable#fee92e
meta.selectionset.graphql meta.arguments variable#c3c3c3
entity.name.fragment.graphql, variable.fragment.graphql#0e707c
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#c3c3c3
source.shell variable.other#134eb2
support.constant#134eb2normal
meta.scope.prerequisites.makefile#fee92e
meta.attribute-selector.scss#fee92e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c3c3c3
meta.preprocessor.haskell#6d6d6d