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—