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#286983
  • activityBar.background#ebe5df
  • activityBar.border#ebe5df
  • activityBar.dropBorder#286983
  • activityBar.foreground#575279
  • activityBar.inactiveForeground#a8a3b3
  • activityBarBadge.background#286983
  • activityBarBadge.foreground#ebe5df
  • badge.background#286983
  • badge.foreground#ebe5df
  • breadcrumb.activeSelectionForeground#4c4769
  • breadcrumb.focusForeground#575279
  • breadcrumb.foreground#a8a3b3
  • breadcrumbPicker.background#ebe5df
  • button.background#286983
  • button.foreground#ebe5df
  • button.hoverBackground#295e73
  • button.secondaryBackground#ebdfe4
  • button.secondaryForeground#575279
  • button.secondaryHoverBackground#bdbfc9
  • charts.blue#286983
  • charts.foreground#575279
  • charts.green#618774
  • charts.lines#bdbfc9
  • charts.orange#d7827e
  • charts.purple#907aa9
  • charts.red#b4637a
  • charts.yellow#ea9d34
  • checkbox.background#ebe0df
  • checkbox.border#bdbfc9
  • checkbox.foreground#575279
  • debugConsole.errorForeground#b4637a
  • debugConsole.infoForeground#625c87
  • debugConsole.sourceForeground#ea9d34
  • debugConsole.warningForeground#ea9d34
  • debugConsoleInputIcon.foreground#618774
  • debugIcon.breakpointDisabledForeground#a8a3b3
  • debugIcon.breakpointForeground#b4637a
  • debugToolBar.background#ebe5df
  • debugToolBar.border#bdbfc9
  • descriptionForeground#a8a3b3
  • diffEditor.diagonalFill#bdbfc9
  • diffEditor.insertedLineBackground#6187741a
  • diffEditor.insertedTextBackground#61877422
  • diffEditor.removedLineBackground#b4637a1a
  • diffEditor.removedTextBackground#b4637a22
  • disabledForeground#a8a3b3
  • dropdown.background#ebe0df
  • dropdown.border#bdbfc9
  • dropdown.foreground#575279
  • dropdown.listBackground#ebe0df
  • editor.background#faf4ed
  • editor.findMatchBackground#ea9d3444
  • editor.findMatchHighlightBackground#ea9d3422
  • editor.findRangeHighlightBackground#d0d8d880
  • editor.focusedStackFrameHighlightBackground#61877422
  • editor.foreground#575279
  • editor.hoverHighlightBackground#28698333
  • editor.inactiveSelectionBackground#d0d8d8
  • editor.lineHighlightBackground#ebe0df
  • editor.rangeHighlightBackground#ebe0df80
  • editor.selectionBackground#b8cece
  • editor.selectionHighlightBackground#d0d8d880
  • editor.stackFrameHighlightBackground#ea9d3422
  • editor.wordHighlightBackground#28698326
  • editor.wordHighlightStrongBackground#56949f26
  • editorBracketHighlight.foreground1#ea9d34
  • editorBracketHighlight.foreground2#286983
  • editorBracketHighlight.foreground3#907aa9
  • editorBracketHighlight.foreground4#56949f
  • editorBracketHighlight.foreground5#618774
  • editorBracketHighlight.foreground6#d7827e
  • editorBracketHighlight.unexpectedBracket.foreground#b4637a
  • editorBracketMatch.background#28698333
  • editorBracketMatch.border#28698300
  • editorCodeLens.foreground#9893a5
  • editorCursor.foreground#a8a3b3
  • editorError.foreground#b4637a
  • editorGhostText.foreground#a8a3b3
  • editorGroup.border#ebe5df
  • editorGroup.dropBackground#28698333
  • editorGroupHeader.noTabsBackground#ebe5df
  • editorGroupHeader.tabsBackground#ebe5df
  • editorGroupHeader.tabsBorder#ebe5df
  • editorGutter.addedBackground#618774
  • editorGutter.background#faf4ed
  • editorGutter.deletedBackground#b4637a
  • editorGutter.modifiedBackground#286983
  • editorHint.foreground#618774
  • editorHoverWidget.background#ebe5df
  • editorHoverWidget.border#bdbfc9
  • editorHoverWidget.foreground#575279
  • editorIndentGuide.activeBackground1#bdbfc9
  • editorIndentGuide.background1#ebe0df
  • editorInfo.foreground#286983
  • editorLineNumber.activeForeground#625c87
  • editorLineNumber.foreground#bdbfc9
  • editorLink.activeForeground#286983
  • editorOverviewRuler.addedForeground#618774
  • editorOverviewRuler.border#ebe5df
  • editorOverviewRuler.deletedForeground#b4637a
  • editorOverviewRuler.errorForeground#b4637a
  • editorOverviewRuler.findMatchForeground#ea9d3488
  • editorOverviewRuler.infoForeground#286983
  • editorOverviewRuler.modifiedForeground#286983
  • editorOverviewRuler.warningForeground#ea9d34
  • editorRuler.foreground#ebe0df
  • editorSuggestWidget.background#ebe5df
  • editorSuggestWidget.border#bdbfc9
  • editorSuggestWidget.foreground#575279
  • editorSuggestWidget.highlightForeground#286983
  • editorSuggestWidget.selectedBackground#d0d8d8
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#ea9d34
  • editorWhitespace.foreground#bdbfc9
  • editorWidget.background#ebe5df
  • editorWidget.border#bdbfc9
  • editorWidget.foreground#575279
  • errorForeground#b4637a
  • extensionBadge.remoteBackground#286983
  • extensionBadge.remoteForeground#ebe5df
  • extensionButton.prominentBackground#286983
  • extensionButton.prominentForeground#ebe5df
  • extensionButton.prominentHoverBackground#295e73
  • extensionIcon.starForeground#ea9d34
  • extensionIcon.verifiedForeground#618774
  • focusBorder#28698300
  • foreground#625c87
  • gitDecoration.conflictingResourceForeground#d7827e
  • gitDecoration.deletedResourceForeground#b4637a
  • gitDecoration.ignoredResourceForeground#a8a3b3
  • gitDecoration.modifiedResourceForeground#286983
  • gitDecoration.stageDeletedResourceForeground#d685af
  • gitDecoration.stageModifiedResourceForeground#56949f
  • gitDecoration.submoduleResourceForeground#56949f
  • gitDecoration.untrackedResourceForeground#618774
  • icon.foreground#625c87
  • input.background#ebe5df
  • input.border#bdbfc9
  • input.foreground#575279
  • input.placeholderForeground#a8a3b3
  • inputOption.activeBackground#28698333
  • inputOption.activeBorder#286983
  • inputOption.activeForeground#4c4769
  • inputValidation.errorBackground#ebe5df
  • inputValidation.errorBorder#b4637a
  • inputValidation.errorForeground#b4637a
  • inputValidation.infoBackground#ebe5df
  • inputValidation.infoBorder#286983
  • inputValidation.infoForeground#286983
  • inputValidation.warningBackground#ebe5df
  • inputValidation.warningBorder#ea9d34
  • inputValidation.warningForeground#ea9d34
  • list.activeSelectionBackground#d0d8d8
  • list.activeSelectionForeground#4c4769
  • list.dropBackground#28698333
  • list.errorForeground#b4637a
  • list.focusBackground#d0d8d8
  • list.focusForeground#4c4769
  • list.highlightForeground#286983
  • list.hoverBackground#ebe0dfcc
  • list.hoverForeground#4c4769
  • list.inactiveSelectionBackground#ebe0df
  • list.inactiveSelectionForeground#575279
  • list.invalidItemForeground#b4637a
  • list.warningForeground#ea9d34
  • listFilterWidget.background#ebe0df
  • listFilterWidget.noMatchesOutline#b4637a
  • listFilterWidget.outline#286983
  • menu.background#ebe5df
  • menu.border#bdbfc9
  • menu.foreground#575279
  • menu.selectionBackground#d0d8d8
  • menu.selectionForeground#4c4769
  • menu.separatorBackground#bdbfc9
  • menubar.selectionBackground#d0d8d8
  • menubar.selectionForeground#4c4769
  • merge.border#bdbfc9
  • merge.currentContentBackground#28698333
  • merge.currentHeaderBackground#28698366
  • merge.incomingContentBackground#61877433
  • merge.incomingHeaderBackground#61877466
  • notificationCenterHeader.background#ebe5df
  • notificationCenterHeader.foreground#575279
  • notificationLink.foreground#286983
  • notifications.background#ebe5df
  • notifications.border#bdbfc9
  • notifications.foreground#575279
  • notificationsErrorIcon.foreground#b4637a
  • notificationsInfoIcon.foreground#286983
  • notificationsWarningIcon.foreground#ea9d34
  • panel.background#faf4ed
  • panel.border#ebe5df
  • panelInput.border#bdbfc9
  • panelTitle.activeBorder#286983
  • panelTitle.activeForeground#4c4769
  • panelTitle.inactiveForeground#a8a3b3
  • peekView.border#286983
  • peekViewEditor.background#ebe5df
  • peekViewEditor.matchHighlightBackground#ea9d3444
  • peekViewResult.background#ebe5df
  • peekViewResult.foreground#625c87
  • peekViewResult.matchHighlightBackground#ea9d3444
  • peekViewResult.selectionBackground#d0d8d8
  • peekViewResult.selectionForeground#4c4769
  • peekViewTitle.background#ebe5df
  • peekViewTitleDescription.foreground#a8a3b3
  • peekViewTitleLabel.foreground#4c4769
  • pickerGroup.border#bdbfc9
  • pickerGroup.foreground#286983
  • problemsErrorIcon.foreground#b4637a
  • problemsInfoIcon.foreground#286983
  • problemsWarningIcon.foreground#ea9d34
  • progressBar.background#286983
  • quickInput.background#ebe5df
  • quickInput.foreground#575279
  • quickInputList.focusBackground#d0d8d8
  • sash.hoverBorder#286983
  • scrollbar.shadow#0000001a
  • scrollbarSlider.activeBackground#bdbfc9cc
  • scrollbarSlider.background#bdbfc966
  • scrollbarSlider.hoverBackground#bdbfc999
  • selection.background#b8cece
  • settings.checkboxBackground#ebe0df
  • settings.dropdownBackground#ebe0df
  • settings.dropdownForeground#575279
  • settings.headerForeground#4c4769
  • settings.modifiedItemIndicator#286983
  • settings.numberInputBackground#ebe5df
  • settings.textInputBackground#ebe5df
  • sideBar.background#ebe5df
  • sideBar.border#ebe5df
  • sideBar.foreground#625c87
  • sideBarSectionHeader.background#ebe5df
  • sideBarSectionHeader.border#ebe5df
  • sideBarSectionHeader.foreground#575279
  • sideBarTitle.foreground#625c87
  • statusBar.background#ebe5df
  • statusBar.border#ebe5df
  • statusBar.debuggingBackground#d7827e
  • statusBar.debuggingForeground#ebe5df
  • statusBar.foreground#625c87
  • statusBar.noFolderBackground#ebe5df
  • statusBar.noFolderForeground#625c87
  • statusBarItem.activeBackground#625c8722
  • statusBarItem.errorBackground#ebe5df
  • statusBarItem.errorForeground#b4637a
  • statusBarItem.hoverBackground#625c871a
  • statusBarItem.prominentBackground#ebe0df
  • statusBarItem.prominentHoverBackground#ebdfe4
  • statusBarItem.remoteBackground#286983
  • statusBarItem.remoteForeground#ebe5df
  • statusBarItem.warningBackground#ebe5df
  • statusBarItem.warningForeground#ea9d34
  • symbolIcon.classForeground#ea9d34
  • symbolIcon.colorForeground#56949f
  • symbolIcon.constantForeground#d7827e
  • symbolIcon.enumeratorForeground#ea9d34
  • symbolIcon.functionForeground#295e73
  • symbolIcon.interfaceForeground#ea9d34
  • symbolIcon.keywordForeground#907aa9
  • symbolIcon.methodForeground#295e73
  • symbolIcon.propertyForeground#56949f
  • symbolIcon.variableForeground#575279
  • tab.activeBackground#faf4ed
  • tab.activeBorder#faf4ed
  • tab.activeBorderTop#286983
  • tab.activeForeground#4c4769
  • tab.activeModifiedBorder#ea9d34
  • tab.border#ebe5df
  • tab.hoverBackground#faf4ed
  • tab.hoverForeground#4c4769
  • tab.inactiveBackground#ebe5df
  • tab.inactiveForeground#a8a3b3
  • tab.inactiveModifiedBorder#ea9d3480
  • tab.lastPinnedBorder#bdbfc9
  • tab.unfocusedActiveForeground#625c87
  • tab.unfocusedInactiveForeground#a8a3b3
  • terminal.ansiBlack#575279
  • terminal.ansiBlue#286983
  • terminal.ansiBrightBlack#5f5695
  • terminal.ansiBrightBlue#2d81a3
  • terminal.ansiBrightCyan#5ca7b4
  • terminal.ansiBrightGreen#629f81
  • terminal.ansiBrightMagenta#9a80b9
  • terminal.ansiBrightRed#c26d85
  • terminal.ansiBrightWhite#e6ebf3
  • terminal.ansiBrightYellow#eea846
  • terminal.ansiCyan#56949f
  • terminal.ansiGreen#618774
  • terminal.ansiMagenta#907aa9
  • terminal.ansiRed#b4637a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ea9d34
  • terminal.background#faf4ed
  • terminal.foreground#575279
  • terminal.selectionBackground#b8cece
  • terminalCursor.foreground#a8a3b3
  • testing.iconErrored#b4637a
  • testing.iconFailed#b4637a
  • testing.iconPassed#618774
  • testing.iconSkipped#ea9d34
  • textBlockQuote.background#ebe5df
  • textBlockQuote.border#bdbfc9
  • textCodeBlock.background#ebe5df
  • textLink.activeForeground#56949f
  • textLink.foreground#286983
  • textPreformat.foreground#d7827e
  • textSeparator.foreground#bdbfc9
  • titleBar.activeBackground#ebe5df
  • titleBar.activeForeground#625c87
  • titleBar.border#ebe5df
  • titleBar.inactiveBackground#ebe5df
  • titleBar.inactiveForeground#a8a3b3
  • tree.indentGuidesStroke#bdbfc9
  • walkThrough.embeddedEditorBackground#ebe5df
  • welcomePage.progress.foreground#286983
  • welcomePage.tileBackground#ebe5df
  • welcomePage.tileHoverBackground#ebe0df
  • widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9893a5italic
variable, string constant.other.placeholder#575279
constant.other.color#575279
invalid, invalid.illegal#b4637a
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#907aa9
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#907aa9
keyword.operator, punctuation.accessor, punctuation.definition.generic#56949f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#295e73
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#295e73italic
meta.block variable.other#575279
support.other.variable, string.other.link#575279
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#d7827e
constant.language.boolean#ea9d34
constant.numeric, variable.other.constant, entity.name.constant#ea9d34
variable.parameter, meta.function.parameters#c9709eitalic
constant.language, support.function.builtin, variable.language.this#b4637a
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#618774
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ea9d34italic
meta.type, support.type, entity.name.type#ea9d34italic
storage.type#907aa9
entity.name.enum#ea9d34italic
meta.enum variable.other.readwrite, variable.other.enummember#56949f
meta.property.object, variable.object.property, variable.other.object.property#56949f
punctuation.definition.typeparameters, meta.type.parameters#5ca7b4
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#ea9d34
entity.name.namespace#ea9d34
keyword.control.directive, punctuation.definition.directive#ea9d34
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b4637a
variable.language#b4637aitalic
entity.name.method.js#295e73italic
meta.class-method.js entity.name.function.js, variable.function.constructor#295e73
entity.other.attribute-name#ea9d34
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ea9d34italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#56949f
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#56949f
source.css entity.other.attribute-name.class.css#ea9d34
support.type.primitive, entity.name.type.numeric#907aa9
support.type.object, support.constant#907aa9
markup.inserted#618774
markup.deleted#b4637a
markup.changed#ea9d34
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#295e73
string.regexp#56949f
constant.character.escape#625c87
*url*, *link*, *uri*#575279underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#295e73italic
source.js constant.other.object.key.js string.unquoted.label.js#907aa9
source.json meta.structure.dictionary.json support.type.property-name.json#295e73
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#907aa9
text.html.markdown, punctuation.definition.list_item.markdown#575279
text.html.markdown markup.inline.raw.markdown#618774
text.html.markdown meta.dummy.line-break#9893a5
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#295e73
markup.italic#b4637aitalic
markup.bold, markup.bold string#b4637abold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#b4637abold
markup.underline#d7827eunderline
markup.quote punctuation.definition.blockquote.markdown#625c87
markup.quote#625c87italic
string.other.link.title.markdown#286983
string.other.link.description.title.markdown#907aa9
constant.other.reference.link.markdown#ea9d34
markup.raw.block#907aa9
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#618774
meta.separator.markdown#56949f
punctuation.definition.list.begin.markdown, markup.list#56949f