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#76ace53d
  • editor.lineHighlightBackground#76ace51f
  • editor.rangeHighlightBackground#0d0d0dff
  • editor.selectionBackground#76ace53d
  • editor.selectionHighlightBackground#76ace53d
  • editor.wordHighlightBackground#a1c0831a
  • editor.wordHighlightStrongBackground#76ace552
  • editorBracketHighlight.foreground1#696969ff
  • editorBracketHighlight.foreground2#5d5d5dff
  • editorBracketHighlight.foreground3#555555ff
  • editorBracketHighlight.foreground4#484848ff
  • editorBracketHighlight.foreground5#454545ff
  • editorBracketHighlight.foreground6#5b5b5bff
  • editorBracketHighlight.unexpectedBracket.foreground#d17277ff
  • editorBracketMatch.background#76ace566
  • editorBracketMatch.border#1b1b1bff
  • editorCodeLens.foreground#898b99ff
  • editorCommentsWidget.rangeActiveBackground#76ace53d
  • 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.activeBackground#a8aebb1a
  • editorIndentGuide.activeBackground1#a8aebb1a
  • editorIndentGuide.background#a8aebb0d
  • 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
  • gauge.background#76ace51a
  • gauge.border#003c6cff
  • gauge.errorBackground#d172771a
  • gauge.errorForeground#d17277ff
  • gauge.foreground#76ace5ff
  • gauge.warningBackground#dfc07f1a
  • gauge.warningForeground#dfc07fff
  • 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.border#1b1b1bff
  • quickInput.foreground#dde2e8ff
  • quickInputList.focusBackground#76ace53d
  • quickInputList.focusForeground#dde2e8ff
  • quickInputList.focusIconForeground#dde2e8ff
  • quickInputList.hoverBackground#a8aebb33
  • 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#76ace53d
  • 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#74ade8
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#a1c181
entity.other.attribute-name#6eb4bf
punctuation.terminator.statement#999999
storage.modifier, keyword.operator.noexcept#74ade8
string.regexp#d07277
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#74ade8
keyword.other.unit#a1c181
variable.language#74ade8
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#696969
variable.other.constant, variable.other.enummember#77AAE0
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d07277
constant.character.escape#ADD1F7
entity.name.label#dce0e5
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#dce0e5
meta.preprocessor, entity.name.function.preprocessor#74ade8
meta.preprocessor.string#BBD4A5
meta.preprocessor.numeric#a1c181
string, meta.embedded.assembly#BBD4A5
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#74ade8
meta.template.expression#dce0e5
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#74ade8
support.function.git-rebase#6eb4bf
constant.sha.git-rebase#a1c181
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#e06c75
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#91E874
markup.changed, punctuation.definition.changed#bf956a
markup.ignored, markup.untracked#2D333B
meta.diff.range#DCBDFBbold
meta.diff.header#77AAE0
meta.separator#77AAE0bold
meta.output#77AAE0
constant.regexp#646695
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#BBD4A5
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d07277
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#ADD1F7
constant.character, constant.other.option#74ade8
source.regexp, string.regexp#87ACAD
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#87ACAD
string.regexp constant.character.escape#91E874bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#768390
brackethighlighter.unmatched#e06c75
constant.other.reference.link, string.other.link#87ACAD
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
constant.other.placeholder, constant.character#F47067
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#77AAE0
entity.name, meta.export.default, meta.definition.variable#F69D50
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#a9afbc
entity.name.tag, support.class.component#91E874
string, string punctuation.section.embedded source#87ACAD
support#77AAE0
variable.other#a9afbc
emphasisitalic
strongbold
header#000080
markup.heading#74ade8bold
markup.inserted#a1c181
markup.deleted#BBD4A5
markup.changed#74ade8
markup.italic#a9afbcitalic
markup.bold#a9afbcbold
markup.underlineunderline
markup.strikethroughstrikethrough
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
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#8DB372
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#69C9B0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#6eb4bf
source, meta.embedded, meta.block, meta.object.member, variable.other, variable.parameter.function#acb2be
comment, string.comment#919191
punctuation.definition.comment#B3B3B3
keyword, keyword.control#999999
storage, storage.type, storage.modifier#696969
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type#84BDCF
entity.name.function, support.function#ADD1F7
variable, variable.parameter, meta.definition.variable.name#acb2be
meta.property-name, variable.other.property, support.type.property-name, meta.object-literal.key#D6C9CA
string, string.quoted, string.template#BBD4A5
constant.numeric#6ABF88
constant, variable.other.constant, variable.other.enummember, entity.name.constant#DF9884
keyword.operator, punctuation, meta.brace, meta.delimiter#ADADAD
source.regexp, string.regexp, constant.regexp#bf956a
invalid, invalid.illegal, invalid.broken, invalid.deprecated, message.error#d07277
punctuation.cs, punctuation.accessor.cs, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, keyword.operator.arrow.cs#999999
storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs#84BDCF
entity.name.tag.css, entity.name.tag.less#ADD1F7
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#ADD1F7
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#6eb4bf
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#BBD4A5
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#8DB372
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#8DB372
entity.name.tag#74ade8
punctuation.definition.tag#B3B3B3
string.tag#BBD4A5
string.value#BBD4A5
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#acb2be
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#84BDCF
support.type.property-name.json#D6C9CA
markup.heading, markup.heading entity.name#acb2bebold
markup.quote#DF9884
markup.inline.raw#ADD1F7
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#999999
meta.structure.dictionary.key.python#6eb4bf
keyword.operator.logical.python#74ade8
punctuation.separator.namespace.ruby#69C9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#84BDCF