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.

  • actionBar.toggledBackground#76ace52e
  • activityBar.activeBorder#3fa38bff
  • activityBar.activeFocusBorder#76ace547
  • activityBar.background#0d0d0dff
  • activityBar.border#161616ff
  • activityBar.foreground#dde2e8ff
  • activityBar.inactiveForeground#a8aebbff
  • activityBarBadge.background#4d8b7bff
  • activityBarBadge.foreground#ffffffff
  • activityBarTop.activeBorder#3fa38bff
  • activityErrorBadge.background#d17277ff
  • activityErrorBadge.foreground#ffffffff
  • activityWarningBadge.background#dfc07fff
  • activityWarningBadge.foreground#1f1f1fff
  • badge.background#59a28ef0
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#dde2e8ff
  • breadcrumb.background#121212ff
  • breadcrumb.focusForeground#dde2e8ff
  • breadcrumb.foreground#a8aebbff
  • breadcrumbPicker.background#121212ff
  • button.background#569f8bf2
  • button.border#161616ff
  • button.foreground#ffffffff
  • button.hoverBackground#30977fff
  • button.secondaryBackground#00000000
  • button.secondaryForeground#dde2e8ff
  • button.secondaryHoverBackground#a8aebb33
  • charts.blue#76ace5ff
  • charts.foreground#dde2e8ff
  • charts.green#a1c083ff
  • charts.lines#a8aebb80
  • charts.orange#c09568ff
  • charts.purple#b579d0ff
  • charts.red#d17277ff
  • charts.yellow#dfc07fff
  • chat.editedFileForeground#dfc07fff
  • chat.requestBubbleBackground#1b1b1bff
  • chat.requestBubbleHoverBackground#262626ff
  • chat.slashCommandBackground#76ace51a
  • chat.slashCommandForeground#76ace5ff
  • checkbox.background#1b1b1bff
  • checkbox.border#1b1b1bff
  • checkbox.foreground#a8aebbff
  • commandCenter.activeBackground#a8aebb33
  • commandCenter.activeBorder#1b1b1bff
  • commandCenter.activeForeground#dde2e8ff
  • commandCenter.background#121212ff
  • commandCenter.border#1b1b1bff
  • commandCenter.foreground#dde2e8ff
  • debugToolBar.background#0d0d0dff
  • descriptionForeground#a8aebbff
  • diffEditor.insertedLineBackground#dfc07f1a
  • diffEditor.insertedTextBackground#a1c08359
  • diffEditor.removedLineBackground#d172771a
  • diffEditor.removedTextBackground#d17277CC
  • disabledForeground#898b99ff
  • dropdown.background#0d0d0dff
  • dropdown.border#1b1b1bff
  • dropdown.foreground#dde2e8ff
  • dropdown.listBackground#0d0d0dff
  • editor.background#121212ff
  • editor.findMatchBackground#76ace566
  • editor.findMatchHighlightBackground#dfc07f66
  • editor.findRangeHighlightBackground#0d0d0dff
  • editor.foreground#a8aebbff
  • editor.hoverHighlightBackground#0d0d0dff
  • editor.inactiveSelectionBackground#3fa38b3d
  • editor.lineHighlightBackground#dde2e814
  • editor.rangeHighlightBackground#0d0d0dff
  • editor.selectionBackground#3fa38b3d
  • editor.selectionHighlightBackground#3fa38b3d
  • editor.wordHighlightBackground#a1c0831a
  • editor.wordHighlightStrongBackground#76ace552
  • editorBracketHighlight.foreground1#696969ff
  • editorBracketHighlight.foreground2#6f6f6fff
  • editorBracketHighlight.foreground3#747474ff
  • editorBracketHighlight.foreground4#7a7a7aff
  • editorBracketHighlight.foreground5#747474ff
  • editorBracketHighlight.foreground6#6f6f6fff
  • editorBracketHighlight.unexpectedBracket.foreground#d17277ff
  • editorBracketMatch.background#3fa38b3d
  • editorBracketMatch.border#1b1b1bff
  • editorCodeLens.foreground#898b99ff
  • editorCommentsWidget.rangeActiveBackground#3fa38b3d
  • editorCommentsWidget.rangeBackground#76ace51a
  • editorCursor.foreground#dde2e8ff
  • editorGroup.border#1b1b1bff
  • editorGroupHeader.tabsBackground#0d0d0dff
  • editorGroupHeader.tabsBorder#1b1b1bff
  • editorGutter.addedBackground#a1c083ff
  • editorGutter.background#121212ff
  • editorGutter.deletedBackground#d17277ff
  • editorGutter.modifiedBackground#dfc07fff
  • editorHoverWidget.background#121212ff
  • editorHoverWidget.border#1b1b1bff
  • editorIndentGuide.activeBackground1#a8aebb1a
  • editorIndentGuide.background1#a8aebb0d
  • editorLineNumber.activeForeground#d0d4dbff
  • editorLineNumber.foreground#555555ff
  • editorLink.activeForeground#3fa38bff
  • editorOverviewRuler.addedForeground#a1c083ff
  • editorOverviewRuler.border#1b1b1bff
  • editorOverviewRuler.deletedForeground#d17277ff
  • editorOverviewRuler.errorForeground#d17277ff
  • editorOverviewRuler.findMatchForeground#76ace566
  • editorOverviewRuler.modifiedForeground#dfc07fff
  • editorOverviewRuler.warningForeground#dfc07fff
  • editorRuler.foreground#a8aebb0d
  • editorStickyScroll.background#121212ff
  • editorStickyScroll.border#1b1b1bff
  • editorStickyScrollHover.background#0d0d0dff
  • editorSuggestWidget.background#121212ff
  • editorSuggestWidget.border#1b1b1bff
  • editorSuggestWidget.foreground#dde2e8ff
  • editorSuggestWidget.highlightForeground#3fa38bff
  • editorSuggestWidget.selectedBackground#76ace53d
  • editorWhitespace.foreground#898b994d
  • editorWidget.background#121212ff
  • editorWidget.border#1b1b1bff
  • editorWidget.foreground#dde2e8ff
  • errorForeground#d17277ff
  • extensionButton.prominentBackground#3fa38bff
  • extensionButton.prominentForeground#ffffffff
  • extensionButton.prominentHoverBackground#30977fff
  • focusBorder#76ace547
  • foreground#dde2e8ff
  • gitDecoration.addedResourceForeground#a1c083ff
  • gitDecoration.conflictingResourceForeground#d17277ff
  • gitDecoration.deletedResourceForeground#d17277ff
  • gitDecoration.ignoredResourceForeground#898b99ff
  • gitDecoration.modifiedResourceForeground#dfc07fff
  • gitDecoration.stageDeletedResourceForeground#d17277ff
  • gitDecoration.stageModifiedResourceForeground#dfc07fff
  • gitDecoration.untrackedResourceForeground#a1c083ff
  • icon.foreground#dde2e8ff
  • inlineChat.border#00000000
  • input.background#0d0d0dff
  • input.border#1b1b1bff
  • input.foreground#dde2e8ff
  • input.placeholderForeground#898b99ff
  • inputOption.activeBackground#76ace51a
  • inputOption.activeBorder#1b1b1bff
  • inputOption.activeForeground#dde2e8ff
  • inputValidation.errorBackground#d172771a
  • inputValidation.errorBorder#650c1dff
  • inputValidation.errorForeground#dde2e8ff
  • inputValidation.infoBackground#76ace51a
  • inputValidation.infoBorder#003c6cff
  • inputValidation.infoForeground#dde2e8ff
  • inputValidation.warningBackground#dfc07f1a
  • inputValidation.warningBorder#664b00ff
  • inputValidation.warningForeground#dde2e8ff
  • keybindingLabel.foreground#dde2e8ff
  • list.activeSelectionBackground#76ace53d
  • list.activeSelectionForeground#dde2e8ff
  • list.activeSelectionIconForeground#ffffffff
  • list.dropBackground#83899680
  • list.errorForeground#d17277ff
  • list.focusBackground#76ace53d
  • list.focusForeground#dde2e8ff
  • list.focusOutline#76ace547
  • list.highlightForeground#3fa38bff
  • list.hoverBackground#a8aebb33
  • list.hoverForeground#dde2e8ff
  • list.inactiveSelectionBackground#262626ff
  • list.inactiveSelectionForeground#dde2e8ff
  • list.invalidItemForeground#898b99ff
  • list.warningForeground#dfc07fff
  • menu.background#0d0d0dff
  • menu.border#1b1b1bff
  • menu.foreground#dde2e8ff
  • menu.selectionBackground#76ace53d
  • menu.selectionForeground#dde2e8ff
  • menu.separatorBackground#1b1b1bff
  • menubar.selectionBackground#1b1b1bff
  • menubar.selectionForeground#dde2e8ff
  • minimapSlider.activeBackground#898b9954
  • minimapSlider.background#898b9926
  • minimapSlider.hoverBackground#898b9940
  • notificationCenter.border#1b1b1bff
  • notificationCenterHeader.background#121212ff
  • notificationCenterHeader.foreground#dde2e8ff
  • notificationLink.foreground#3fa38bff
  • notifications.background#121212ff
  • notifications.border#1b1b1bff
  • notifications.foreground#dde2e8ff
  • notificationsErrorIcon.foreground#d17277ff
  • notificationsInfoIcon.foreground#76ace5ff
  • notificationsWarningIcon.foreground#dfc07fff
  • notificationToast.border#1b1b1bff
  • panel.background#0d0d0dff
  • panel.border#161616ff
  • panelInput.border#1b1b1bff
  • panelTitle.activeBorder#76ace547
  • panelTitle.activeForeground#dde2e8ff
  • panelTitle.inactiveForeground#a8aebbff
  • peekView.border#161616ff
  • peekViewEditor.background#0d0d0dff
  • peekViewEditor.matchHighlightBackground#76ace566
  • peekViewResult.background#0d0d0dff
  • peekViewResult.fileForeground#dde2e8ff
  • peekViewResult.lineForeground#a8aebbff
  • peekViewResult.matchHighlightBackground#76ace566
  • peekViewResult.selectionBackground#76ace53d
  • peekViewResult.selectionForeground#dde2e8ff
  • peekViewTitle.background#0d0d0dff
  • peekViewTitleDescription.foreground#a8aebbff
  • peekViewTitleLabel.foreground#dde2e8ff
  • pickerGroup.border#1b1b1bff
  • pickerGroup.foreground#dde2e8ff
  • ports.iconRunningProcessForeground#a1c083ff
  • progressBar.background#3fa38bff
  • quickInput.background#121212ff
  • quickInput.foreground#dde2e8ff
  • quickInputList.focusBackground#76ace53d
  • quickInputList.focusForeground#dde2e8ff
  • quickInputList.focusIconForeground#dde2e8ff
  • quickInputTitle.background#121212ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#898b9954
  • scrollbarSlider.background#898b9926
  • scrollbarSlider.hoverBackground#898b9940
  • settings.dropdownBackground#121212ff
  • settings.dropdownBorder#1b1b1bff
  • settings.headerForeground#ffffffff
  • settings.modifiedItemIndicator#dfc07f66
  • sideBar.background#0d0d0dff
  • sideBar.border#161616ff
  • sideBar.foreground#dde2e8ff
  • sideBarSectionHeader.background#0d0d0dff
  • sideBarSectionHeader.border#1b1b1bff
  • sideBarSectionHeader.foreground#dde2e8ff
  • sideBarTitle.foreground#dde2e8ff
  • statusBar.background#0d0d0dff
  • statusBar.border#161616ff
  • statusBar.debuggingBackground#3fa38bff
  • statusBar.debuggingForeground#ffffffff
  • statusBar.focusBorder#76ace547
  • statusBar.foreground#a8aebbff
  • statusBar.noFolderBackground#121212ff
  • statusBar.noFolderForeground#a8aebbff
  • statusBarItem.activeBackground#76ace52e
  • statusBarItem.focusBorder#76ace547
  • statusBarItem.hoverBackground#a8aebb33
  • statusBarItem.hoverForeground#ffffffff
  • statusBarItem.prominentBackground#3fa38bff
  • statusBarItem.prominentForeground#ffffffff
  • statusBarItem.prominentHoverBackground#30977fff
  • statusBarItem.remoteBackground#76ace5ff
  • statusBarItem.remoteForeground#ffffffff
  • tab.activeBackground#0d0d0dff
  • tab.activeBorder#121212ff
  • tab.activeBorderTop#3fa38bff
  • tab.activeForeground#dde2e8ff
  • tab.border#1b1b1bff
  • tab.hoverBackground#121212ff
  • tab.hoverForeground#dde2e8ff
  • tab.inactiveBackground#0d0d0dff
  • tab.inactiveForeground#a8aebbff
  • tab.lastPinnedBorder#1b1b1bff
  • tab.selectedBackground#76ace53d
  • tab.selectedBorderTop#76ace5ff
  • tab.selectedForeground#dde2e8ff
  • tab.unfocusedActiveBackground#121212ff
  • tab.unfocusedActiveBorder#0d0d0dff
  • tab.unfocusedActiveBorderTop#1b1b1bff
  • tab.unfocusedActiveForeground#a8aebbff
  • tab.unfocusedHoverBackground#262626ff
  • tab.unfocusedInactiveBackground#0d0d0dff
  • tab.unfocusedInactiveForeground#898b99ff
  • terminal.ansiBlack#161616ff
  • terminal.ansiBlue#62afeeff
  • terminal.ansiBrightBlack#505050ff
  • terminal.ansiBrightBlue#83c0ffff
  • terminal.ansiBrightCyan#68d4ddff
  • terminal.ansiBrightGreen#a9d480ff
  • terminal.ansiBrightMagenta#b599ecff
  • terminal.ansiBrightRed#e9878dff
  • terminal.ansiBrightWhite#fcfcfcff
  • terminal.ansiBrightYellow#ffd986ff
  • terminal.ansiCyan#57b5c1ff
  • terminal.ansiGreen#99c37aff
  • terminal.ansiMagenta#9477dcff
  • terminal.ansiRed#de6e76ff
  • terminal.ansiWhite#aab1beff
  • terminal.ansiYellow#e4be77ff
  • terminal.background#141414ff
  • terminal.border#1b1b1bff
  • terminal.foreground#aab1beff
  • terminal.inactiveSelectionBackground#76ace552
  • terminal.selectionBackground#3fa38b3d
  • terminal.tab.activeBorder#3fa38bff
  • terminalCursor.background#141414ff
  • terminalCursor.foreground#dde2e8ff
  • textBlockQuote.background#1b1b1bff
  • textBlockQuote.border#1b1b1bff
  • textCodeBlock.background#1b1b1bff
  • textLink.activeForeground#3fa38bff
  • textLink.foreground#3fa38bff
  • textPreformat.background#242424ff
  • textPreformat.foreground#a8aebbff
  • textSeparator.foreground#1b1b1bff
  • titleBar.activeBackground#0d0d0dff
  • titleBar.activeForeground#a8aebbff
  • titleBar.border#161616ff
  • titleBar.inactiveBackground#0d0d0dff
  • titleBar.inactiveForeground#898b99ff
  • toolbar.hoverBackground#a8aebb33
  • welcomePage.progress.foreground#76ace5ff
  • welcomePage.tileBackground#242424ff
  • widget.border#1b1b1bff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language#76ace5ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#a1c083ff
entity.other.attribute-name#71b4bfff
punctuation.terminator.statement#9e9e9eff
storage.modifier, keyword.operator.noexcept#76ace5ff
string.regexp#d17277ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#76ace5ff
keyword.other.unit#a1c083ff
variable.language#76ace5ff
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#9e9e9eff
variable.other.constant, variable.other.enummember#74a9e1ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d17277ff
constant.character.escape#bbcfefff
entity.name.label#dde2e8ff
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#dde2e8ff
meta.preprocessor, entity.name.function.preprocessor#76ace5ff
meta.preprocessor.string#adcdf8ff
meta.preprocessor.numeric#a1c083ff
string, meta.embedded.assembly#adcdf8ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#76ace5ff
meta.template.expression#dde2e8ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#76ace5ff
support.function.git-rebase#71b4bfff
constant.sha.git-rebase#a1c083ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#de6e76ff
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#92e876ff
markup.changed, punctuation.definition.changed#c09568ff
markup.ignored, markup.untracked#2c333dff
meta.diff.range#ddbffcffbold
meta.diff.header#74a9e1ff
meta.separator#74a9e1ffbold
meta.output#74a9e1ff
constant.regexp#656794ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#adcdf8ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d17277ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#dcdca6ff
keyword.operator.quantifier.regexp#bbcfefff
constant.character, constant.other.option#76ace5ff
source.regexp, string.regexp#88adaeff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#88adaeff
string.regexp constant.character.escape#92e876ffbold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#9e9e9eff
brackethighlighter.unmatched#de6e76ff
constant.other.reference.link, string.other.link#88adaeff
token.info-token#6695e5ff
token.warn-token#cd9731ff
token.error-token#f54747ff
token.debug-token#b167e5ff
constant.other.placeholder, constant.character#f27168ff
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#74a9e1ff
entity.name, meta.export.default, meta.definition.variable#8f8f8fff
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#8f8f8fff
entity.name.tag, support.class.component#92e876ff
string, string punctuation.section.embedded source#88adaeff
support#74a9e1ff
variable.other#8f8f8fff
emphasisitalic
strongbold
header#000081ff
markup.heading#76ace5ffbold
markup.inserted#a1c083ff
markup.deleted#adcdf8ff
markup.changed#76ace5ff
markup.italic#8f8f8fffitalic
markup.bold#8f8f8fffbold
markup.underlineunderline
markup.strikethroughstrikethrough
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dcdca6ff
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#8cb271ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#68c9b0ff
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#71b4bfff
source, meta.embedded, meta.block, meta.object.member, variable.other, variable.parameter.function#bebebeff
comment, string.comment#7a7d9eff
punctuation.definition.comment#717171ff
keyword, keyword.control#9e9e9eff
storage, storage.type, storage.modifier#9e9e9eff
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type#bebebeffitalic
entity.name.function, support.function#bbcfefffbold
variable, variable.parameter, meta.definition.variable.name#cececeff
meta.property-name, variable.other.property, support.type.property-name, meta.object-literal.key#dededeff
string, string.quoted, string.template#adcdf8ff
constant.numeric#91b978ff
constant, variable.other.constant, variable.other.enummember, entity.name.constant#c8a095ff
keyword.operator, punctuation, meta.brace, meta.delimiter#aeaeaeff
source.regexp, string.regexp, constant.regexp#b89877ff
invalid, invalid.illegal, invalid.broken, invalid.deprecated, message.error#d17277ff
punctuation.cs, punctuation.accessor.cs, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, keyword.operator.arrow.cs#9e9e9eff
storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs#bebebeff
entity.name.tag.css, entity.name.tag.less#bbcfefff
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#bbcfefff
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#71b4bfff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#adcdf8ff
storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go#bebebeff
storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#8cb271ff
entity.name.tag#76ace5ff
punctuation.definition.tag#717171ff
string.tag#adcdf8ff
string.value#adcdf8ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#bebebeff
storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java#bebebeff
support.type.property-name.json#dededeff
markup.heading, markup.heading entity.name#bebebeffbold
markup.quote#c8a095ff
markup.inline.raw#bbcfefff
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#9e9e9eff
meta.structure.dictionary.key.python#71b4bfff
keyword.operator.logical.python#76ace5ff
punctuation.separator.namespace.ruby#68c9b0ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#bebebeff
Window Themes by Andrew Malikov - VS Code Theme