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.activeBorder#2c3135ff
  • activityBar.activeFocusBorder#3e94baB3
  • activityBar.background#f5f5f5ff
  • activityBar.border#d5dce0ff
  • activityBar.foreground#2c3135ff
  • activityBar.inactiveForeground#727b86ff
  • activityBarBadge.background#3e94baff
  • activityBarBadge.foreground#ffffffff
  • activityBarTop.activeBorder#2c3135ff
  • activityErrorBadge.background#507fa7ff
  • activityErrorBadge.foreground#ffffffff
  • activityWarningBadge.background#7da6cbff
  • activityWarningBadge.foreground#2c3135ff
  • agentStatusIndicator.background#ffffffff
  • badge.background#3e94baff
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#2c3135ff
  • breadcrumb.background#ffffffff
  • breadcrumb.focusForeground#2c3135ff
  • breadcrumb.foreground#727b86ff
  • breadcrumbPicker.background#f5f5f5ff
  • button.background#3e94baff
  • button.border#e2e9eeff
  • button.foreground#ffffffff
  • button.hoverBackground#459ac1ff
  • button.secondaryBackground#ebebebff
  • button.secondaryForeground#2c3135ff
  • button.secondaryHoverBackground#f2f2f2ff
  • charts.blue#53a1f9ff
  • charts.foreground#2c3135ff
  • charts.green#4c9569ff
  • charts.lines#2c313566
  • charts.orange#338bb1ff
  • charts.purple#8a6eaeff
  • charts.red#507fa7ff
  • charts.yellow#338bb1ff
  • chat.editedFileForeground#6488a5ff
  • chat.requestBubbleBackground#f5f5f5ff
  • chat.requestBubbleHoverBackground#ebebebff
  • chat.slashCommandBackground#3e94ba24
  • chat.slashCommandForeground#3088aeff
  • chat.thinkingShimmer#8b97a1ff
  • checkbox.background#ebebebff
  • checkbox.border#cbd2d7ff
  • checkbox.foreground#727b86ff
  • commandCenter.activeBackground#8b97a12e
  • commandCenter.activeBorder#cbd2d7ff
  • commandCenter.activeForeground#2c3135ff
  • commandCenter.background#f5f5f5ff
  • commandCenter.border#cbd2d7ff
  • commandCenter.foreground#2c3135ff
  • descriptionForeground#727b86ff
  • diffEditor.insertedTextBackground#4c956926
  • diffEditor.removedTextBackground#507fa740
  • disabledForeground#a7b3bdff
  • dropdown.background#ffffffff
  • dropdown.border#cbd2d7ff
  • dropdown.foreground#2c3135ff
  • dropdown.listBackground#ffffffff
  • editor.background#ffffffff
  • editor.findMatchBackground#3e94ba40
  • editor.findMatchHighlightBackground#3e94ba1a
  • editor.findRangeHighlightBackground#ebebebff
  • editor.foreground#2c3135ff
  • editor.hoverHighlightBackground#ebebebff
  • editor.inactiveSelectionBackground#3e94ba1a
  • editor.lineHighlightBackground#ebebeb66
  • editor.rangeHighlightBackground#ebebebff
  • editor.selectionBackground#3e94ba40
  • editor.selectionHighlightBackground#3e94ba14
  • editor.wordHighlightBackground#3e94ba26
  • editor.wordHighlightStrongBackground#3e94ba26
  • editorBracketHighlight.foreground1#9e9e9eff
  • editorBracketHighlight.foreground2#a4a4a4ff
  • editorBracketHighlight.foreground3#abababff
  • editorBracketHighlight.foreground4#b1b1b1ff
  • editorBracketHighlight.foreground5#abababff
  • editorBracketHighlight.foreground6#a4a4a4ff
  • editorBracketMatch.background#3e94ba40
  • editorCodeLens.foreground#727b86ff
  • editorCommentsWidget.rangeActiveBackground#ebebebff
  • editorCommentsWidget.rangeBackground#f5f5f5ff
  • editorCursor.foreground#2c3135ff
  • editorGroup.border#d5dce0ff
  • editorGroupHeader.tabsBackground#f5f5f5ff
  • editorGroupHeader.tabsBorder#d5dce0ff
  • editorGutter.addedBackground#4c9569ff
  • editorGutter.background#ffffffff
  • editorGutter.deletedBackground#507fa7ff
  • editorGutter.modifiedBackground#3088aeff
  • editorHoverWidget.background#f5f5f5ff
  • editorHoverWidget.border#d1d9ddff
  • editorIndentGuide.activeBackground1#e2e9eeff
  • editorIndentGuide.background1#e2e9ee40
  • editorLineNumber.activeForeground#2c3135ff
  • editorLineNumber.foreground#727b86ff
  • editorLink.activeForeground#3e94baff
  • editorOverviewRuler.addedForeground#4c9569ff
  • editorOverviewRuler.border#d5dce0ff
  • editorOverviewRuler.deletedForeground#507fa7ff
  • editorOverviewRuler.errorForeground#507fa7ff
  • editorOverviewRuler.findMatchForeground#3e94ba99
  • editorOverviewRuler.modifiedForeground#3e94baff
  • editorOverviewRuler.warningForeground#338bb1ff
  • editorRuler.foreground#e2e9eeff
  • editorStickyScroll.border#d5dce0ff
  • editorStickyScroll.shadow#00000000
  • editorStickyScrollHover.background#eeeeeeff
  • editorSuggestWidget.background#f5f5f5ff
  • editorSuggestWidget.border#d1d9ddff
  • editorSuggestWidget.foreground#2c3135ff
  • editorSuggestWidget.highlightForeground#3e94baff
  • editorSuggestWidget.selectedBackground#3e94ba26
  • editorWhitespace.foreground#727b8640
  • editorWidget.background#f5f5f5ff
  • editorWidget.border#d1d9ddff
  • editorWidget.foreground#2c3135ff
  • errorForeground#507fa7ff
  • extensionButton.prominentBackground#3e94baff
  • extensionButton.prominentForeground#ffffffff
  • extensionButton.prominentHoverBackground#459ac1ff
  • focusBorder#3e94baB3
  • foreground#2c3135ff
  • gitDecoration.addedResourceForeground#4c9569ff
  • gitDecoration.conflictingResourceForeground#507fa7ff
  • gitDecoration.deletedResourceForeground#507fa7ff
  • gitDecoration.ignoredResourceForeground#8b97a1ff
  • gitDecoration.modifiedResourceForeground#338bb1ff
  • gitDecoration.stageDeletedResourceForeground#507fa700
  • gitDecoration.stageModifiedResourceForeground#5c85a800
  • gitDecoration.untrackedResourceForeground#4c9569ff
  • icon.foreground#727b86ff
  • inlineChat.border#00000000
  • input.background#ffffffff
  • input.border#cbd2d766
  • input.foreground#2c3135ff
  • input.placeholderForeground#8b97a1ff
  • inputOption.activeBackground#3e94ba26
  • inputOption.activeBorder#d5dce0ff
  • inputOption.activeForeground#2c3135ff
  • inputValidation.errorBackground#f8e7e2ff
  • inputValidation.errorBorder#507fa7ff
  • inputValidation.errorForeground#2c3135ff
  • inputValidation.infoBackground#3e94ba1a
  • inputValidation.infoBorder#3e94baff
  • inputValidation.infoForeground#2c3135ff
  • inputValidation.warningBackground#f7eed8ff
  • inputValidation.warningBorder#628baeff
  • inputValidation.warningForeground#2c3135ff
  • keybindingLabel.foreground#43484dff
  • list.activeSelectionBackground#3e94ba1a
  • list.activeSelectionForeground#2c3135ff
  • list.activeSelectionIconForeground#2c3135ff
  • list.dropBackground#3e94ba14
  • list.errorForeground#507fa7ff
  • list.focusAndSelectionOutline#3088aeff
  • list.focusBackground#3e94ba1a
  • list.focusForeground#2c3135ff
  • list.focusOutline#3e94baB3
  • list.highlightForeground#3e94baff
  • list.hoverBackground#8b97a12e
  • list.hoverForeground#2c3135ff
  • list.inactiveSelectionBackground#8b97a12e
  • list.inactiveSelectionForeground#2c3135ff
  • list.invalidItemForeground#a7b3bdff
  • list.warningForeground#338bb1ff
  • listFilterWidget.shadow#00000000
  • menu.background#f5f5f5ff
  • menu.border#d1d9ddff
  • menu.foreground#2c3135ff
  • menu.selectionBackground#3e94ba1a
  • menu.selectionForeground#2c3135ff
  • menu.separatorBackground#e2e9eeff
  • menubar.selectionBackground#ebebebff
  • menubar.selectionForeground#2c3135ff
  • minimapSlider.activeBackground#8b97a154
  • minimapSlider.background#8b97a126
  • minimapSlider.hoverBackground#8b97a140
  • notebook.cellBorderColor#d5dce0ff
  • notebook.selectedCellBackground#c7e0ea4f
  • notificationCenter.border#d5dce0ff
  • notificationCenterHeader.background#f5f5f5ff
  • notificationCenterHeader.foreground#2c3135ff
  • notificationLink.foreground#3e94baff
  • notifications.background#f5f5f5ff
  • notifications.border#d5dce0ff
  • notifications.foreground#2c3135ff
  • notificationsErrorIcon.foreground#507fa7ff
  • notificationsInfoIcon.foreground#3e94baff
  • notificationsWarningIcon.foreground#628baeff
  • notificationToast.border#d5dce0ff
  • panel.background#f5f5f5ff
  • panel.border#d5dce0ff
  • panelInput.border#d5dce0ff
  • panelStickyScroll.shadow#00000000
  • panelTitle.activeBorder#2c3135ff
  • panelTitle.activeForeground#2c3135ff
  • panelTitle.inactiveForeground#727b86ff
  • peekView.border#3e94baff
  • peekViewEditor.background#f5f5f5ff
  • peekViewEditor.matchHighlightBackground#3e94ba33
  • peekViewResult.background#f5f5f5ff
  • peekViewResult.fileForeground#2c3135ff
  • peekViewResult.lineForeground#727b86ff
  • peekViewResult.matchHighlightBackground#3e94ba33
  • peekViewResult.selectionBackground#3e94ba26
  • peekViewResult.selectionForeground#2c3135ff
  • peekViewTitle.background#f5f5f5ff
  • peekViewTitleDescription.foreground#727b86ff
  • peekViewTitleLabel.foreground#2c3135ff
  • pickerGroup.border#e2e9eeff
  • pickerGroup.foreground#2c3135ff
  • ports.iconRunningProcessForeground#4c9569ff
  • progressBar.background#3e94baff
  • quickInput.background#f5f5f5ff
  • quickInput.foreground#2c3135ff
  • quickInputList.focusBackground#3e94ba1a
  • quickInputList.focusForeground#2c3135ff
  • quickInputList.focusIconForeground#2c3135ff
  • quickInputTitle.background#f5f5f5ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#8b97a154
  • scrollbarSlider.background#8b97a126
  • scrollbarSlider.hoverBackground#8b97a140
  • searchEditor.textInputBorder#cbd2d7ff
  • settings.dropdownBackground#ffffffff
  • settings.dropdownBorder#cbd2d7ff
  • settings.headerForeground#2c3135ff
  • settings.modifiedItemIndicator#b0892666
  • settings.numberInputBorder#cbd2d7ff
  • settings.textInputBorder#cbd2d7ff
  • sideBar.background#f5f5f5ff
  • sideBar.border#d5dce0ff
  • sideBar.foreground#2c3135ff
  • sideBarSectionHeader.background#f5f5f5ff
  • sideBarSectionHeader.border#d5dce0ff
  • sideBarSectionHeader.foreground#2c3135ff
  • sideBarStickyScroll.shadow#00000000
  • sideBarTitle.foreground#2c3135ff
  • statusBar.background#f5f5f5ff
  • statusBar.border#d5dce0ff
  • statusBar.debuggingBackground#3e94baff
  • statusBar.debuggingForeground#ffffffff
  • statusBar.focusBorder#3e94baB3
  • statusBar.foreground#727b86ff
  • statusBar.noFolderBackground#eeeeeeff
  • statusBar.noFolderForeground#727b86ff
  • statusBarItem.activeBackground#e2e9eeff
  • statusBarItem.compactHoverBackground#d2d8deff
  • statusBarItem.errorBackground#507fa7ff
  • statusBarItem.focusBorder#3e94baB3
  • statusBarItem.hoverBackground#8b97a12e
  • statusBarItem.hoverForeground#2c3135ff
  • statusBarItem.prominentBackground#3e94baD9
  • statusBarItem.prominentForeground#ffffffff
  • statusBarItem.prominentHoverBackground#3e94baff
  • statusBarItem.prominentHoverForeground#ffffffff
  • statusBarItem.remoteBackground#3088aeff
  • statusBarItem.remoteForeground#ffffffff
  • tab.activeBackground#ffffffff
  • tab.activeBorder#ffffffff
  • tab.activeBorderTop#2c3135ff
  • tab.activeForeground#2c3135ff
  • tab.border#d5dce0ff
  • tab.hoverBackground#ffffffff
  • tab.hoverForeground#2c3135ff
  • tab.inactiveBackground#f5f5f5ff
  • tab.inactiveForeground#727b86ff
  • tab.lastPinnedBorder#d5dce0ff
  • tab.selectedBorderTop#5cb0d8ff
  • tab.unfocusedActiveBackground#f5f5f5ff
  • tab.unfocusedActiveBorder#f2f2f2ff
  • tab.unfocusedActiveBorderTop#d5dce0ff
  • tab.unfocusedActiveForeground#727b86ff
  • tab.unfocusedHoverBackground#f2f2f2ff
  • tab.unfocusedInactiveBackground#f5f5f5ff
  • tab.unfocusedInactiveForeground#a7b3bdff
  • terminal.foreground#43484dff
  • terminal.inactiveSelectionBackground#daebf2ff
  • terminal.selectionBackground#3e94ba26
  • terminal.tab.activeBorder#3187aeff
  • terminalCursor.background#ffffffff
  • terminalCursor.foreground#2c3135ff
  • textBlockQuote.background#ebebebff
  • textBlockQuote.border#d5dce0ff
  • textCodeBlock.background#ebebebff
  • textLink.activeForeground#3e94baff
  • textLink.foreground#3e94baff
  • textPreformat.background#eeeeeeff
  • textPreformat.foreground#727b86ff
  • textSeparator.foreground#e2e9eeff
  • titleBar.activeBackground#f5f5f5ff
  • titleBar.activeForeground#727b86ff
  • titleBar.border#d5dce0ff
  • titleBar.inactiveBackground#f5f5f5ff
  • titleBar.inactiveForeground#727b86ff
  • toolbar.hoverBackground#2c31350f
  • welcomePage.tileBackground#eeeeeeff
  • widget.border#d1d9ddff
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.embedded#636363ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#8d5950ff
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#4c9569ff
markup.changed, punctuation.definition.changed#74814aff
markup.ignored, markup.untracked#ecf3f8ff
meta.diff.range#636363ffbold
meta.diff.header#636363ff
meta.separator#636363ffbold
meta.output#636363ff
source.regexp, string.regexp#3187aeff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#3187aeff
string.regexp constant.character.escape#4c9569ffbold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#636363ff
brackethighlighter.unmatched#8d5950ff
constant.other.reference.link, string.other.link#3187aeff
carriage-return#f8f8f8ffitalic underline
string variable#4c667eff
support.constant#3187aeff
support.variable#484848ff
meta.module-reference#636363ff
constant.other.placeholder, constant.character#74814aff
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#3187aeff
entity.name, meta.export.default, meta.definition.variable#303030ff
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#303030ff
entity.name.tag, support.class.component#4c9569ff
string, string punctuation.section.embedded source#4c667eff
support#636363ff
variable.other#303030ff
markup.italic#303030ffitalic
markup.bold#303030ffbold
markup.underlineunderline
markup.strikethroughstrikethrough
comment, string.comment#7a7a7aff
punctuation.definition.comment#636363ff
keyword, keyword.control#636363ff
storage, storage.type, storage.modifier#7d7d7dff
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type#555555ff
entity.name.function, support.function#303030ff
variable, variable.parameter, meta.definition.variable.name#303030ff
meta.property-name, variable.other.property, support.type.property-name, meta.object-literal.key#484848ff
string, string.quoted, string.template#4c667eff
constant.numeric#74814aff
constant, variable.other.constant, variable.other.enummember, entity.name.constant#3187aeff
keyword.operator, punctuation, meta.brace, meta.delimiter#7d7d7dff
source.regexp, string.regexp, constant.regexp#3187aeff
invalid, invalid.illegal, invalid.broken, invalid.deprecated, message.error#8d5950ff
punctuation.cs, punctuation.accessor.cs, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, keyword.operator.arrow.cs#636363ff
storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs#555555ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#303030ff
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#555555ff
support.type.property-name.json#484848ff
markup.heading, markup.heading entity.name#484848ffbold
markup.quote#4c9569ff
markup.inline.raw#484848ff
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#636363ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#555555ff