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#2848a9
  • activityBar.background#e4dcd4
  • activityBar.border#e4dcd4
  • activityBar.dropBorder#2848a9
  • activityBar.foreground#3d2b5a
  • activityBar.inactiveForeground#824d5b
  • activityBarBadge.background#2848a9
  • activityBarBadge.foreground#e4dcd4
  • badge.background#2848a9
  • badge.foreground#e4dcd4
  • breadcrumb.activeSelectionForeground#302b5d
  • breadcrumb.focusForeground#3d2b5a
  • breadcrumb.foreground#824d5b
  • breadcrumbPicker.background#e4dcd4
  • button.background#2848a9
  • button.foreground#e4dcd4
  • button.hoverBackground#223d90
  • button.secondaryBackground#d3c7bb
  • button.secondaryForeground#3d2b5a
  • button.secondaryHoverBackground#aab0ad
  • charts.blue#2848a9
  • charts.foreground#3d2b5a
  • charts.green#396847
  • charts.lines#aab0ad
  • charts.orange#955f61
  • charts.purple#6e33ce
  • charts.red#a5222f
  • charts.yellow#ac5402
  • checkbox.background#dbd1dd
  • checkbox.border#aab0ad
  • checkbox.foreground#3d2b5a
  • debugConsole.errorForeground#a5222f
  • debugConsole.infoForeground#643f61
  • debugConsole.sourceForeground#ac5402
  • debugConsole.warningForeground#ac5402
  • debugConsoleInputIcon.foreground#396847
  • debugIcon.breakpointDisabledForeground#824d5b
  • debugIcon.breakpointForeground#a5222f
  • debugToolBar.background#e4dcd4
  • debugToolBar.border#aab0ad
  • descriptionForeground#824d5b
  • diffEditor.diagonalFill#aab0ad
  • diffEditor.insertedLineBackground#3968471a
  • diffEditor.insertedTextBackground#39684722
  • diffEditor.removedLineBackground#a5222f1a
  • diffEditor.removedTextBackground#a5222f22
  • disabledForeground#824d5b
  • dropdown.background#dbd1dd
  • dropdown.border#aab0ad
  • dropdown.foreground#3d2b5a
  • dropdown.listBackground#dbd1dd
  • editor.background#f6f2ee
  • editor.findMatchBackground#ac540244
  • editor.findMatchHighlightBackground#ac540222
  • editor.findRangeHighlightBackground#e7d2be80
  • editor.focusedStackFrameHighlightBackground#39684722
  • editor.foreground#3d2b5a
  • editor.hoverHighlightBackground#2848a933
  • editor.inactiveSelectionBackground#e7d2be
  • editor.lineHighlightBackground#dbd1dd
  • editor.rangeHighlightBackground#dbd1dd80
  • editor.selectionBackground#a4c1c2
  • editor.selectionHighlightBackground#e7d2be80
  • editor.stackFrameHighlightBackground#ac540222
  • editor.wordHighlightBackground#2848a926
  • editor.wordHighlightStrongBackground#28798026
  • editorBracketHighlight.foreground1#ac5402
  • editorBracketHighlight.foreground2#2848a9
  • editorBracketHighlight.foreground3#6e33ce
  • editorBracketHighlight.foreground4#287980
  • editorBracketHighlight.foreground5#396847
  • editorBracketHighlight.foreground6#955f61
  • editorBracketHighlight.unexpectedBracket.foreground#a5222f
  • editorBracketMatch.background#2848a933
  • editorBracketMatch.border#2848a900
  • editorCodeLens.foreground#837a72
  • editorCursor.foreground#824d5b
  • editorError.foreground#a5222f
  • editorGhostText.foreground#824d5b
  • editorGroup.border#e4dcd4
  • editorGroup.dropBackground#2848a933
  • editorGroupHeader.noTabsBackground#e4dcd4
  • editorGroupHeader.tabsBackground#e4dcd4
  • editorGroupHeader.tabsBorder#e4dcd4
  • editorGutter.addedBackground#396847
  • editorGutter.background#f6f2ee
  • editorGutter.deletedBackground#a5222f
  • editorGutter.modifiedBackground#2848a9
  • editorHint.foreground#396847
  • editorHoverWidget.background#e4dcd4
  • editorHoverWidget.border#aab0ad
  • editorHoverWidget.foreground#3d2b5a
  • editorIndentGuide.activeBackground1#aab0ad
  • editorIndentGuide.background1#dbd1dd
  • editorInfo.foreground#2848a9
  • editorLineNumber.activeForeground#643f61
  • editorLineNumber.foreground#aab0ad
  • editorLink.activeForeground#2848a9
  • editorOverviewRuler.addedForeground#396847
  • editorOverviewRuler.border#e4dcd4
  • editorOverviewRuler.deletedForeground#a5222f
  • editorOverviewRuler.errorForeground#a5222f
  • editorOverviewRuler.findMatchForeground#ac540288
  • editorOverviewRuler.infoForeground#2848a9
  • editorOverviewRuler.modifiedForeground#2848a9
  • editorOverviewRuler.warningForeground#ac5402
  • editorRuler.foreground#dbd1dd
  • editorSuggestWidget.background#e4dcd4
  • editorSuggestWidget.border#aab0ad
  • editorSuggestWidget.foreground#3d2b5a
  • editorSuggestWidget.highlightForeground#2848a9
  • editorSuggestWidget.selectedBackground#e7d2be
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#ac5402
  • editorWhitespace.foreground#aab0ad
  • editorWidget.background#e4dcd4
  • editorWidget.border#aab0ad
  • editorWidget.foreground#3d2b5a
  • errorForeground#a5222f
  • extensionBadge.remoteBackground#2848a9
  • extensionBadge.remoteForeground#e4dcd4
  • extensionButton.prominentBackground#2848a9
  • extensionButton.prominentForeground#e4dcd4
  • extensionButton.prominentHoverBackground#223d90
  • extensionIcon.starForeground#ac5402
  • extensionIcon.verifiedForeground#396847
  • focusBorder#2848a900
  • foreground#643f61
  • gitDecoration.conflictingResourceForeground#955f61
  • gitDecoration.deletedResourceForeground#a5222f
  • gitDecoration.ignoredResourceForeground#824d5b
  • gitDecoration.modifiedResourceForeground#2848a9
  • gitDecoration.stageDeletedResourceForeground#a440b5
  • gitDecoration.stageModifiedResourceForeground#287980
  • gitDecoration.submoduleResourceForeground#287980
  • gitDecoration.untrackedResourceForeground#396847
  • icon.foreground#643f61
  • input.background#e4dcd4
  • input.border#aab0ad
  • input.foreground#3d2b5a
  • input.placeholderForeground#824d5b
  • inputOption.activeBackground#2848a933
  • inputOption.activeBorder#2848a9
  • inputOption.activeForeground#302b5d
  • inputValidation.errorBackground#e4dcd4
  • inputValidation.errorBorder#a5222f
  • inputValidation.errorForeground#a5222f
  • inputValidation.infoBackground#e4dcd4
  • inputValidation.infoBorder#2848a9
  • inputValidation.infoForeground#2848a9
  • inputValidation.warningBackground#e4dcd4
  • inputValidation.warningBorder#ac5402
  • inputValidation.warningForeground#ac5402
  • list.activeSelectionBackground#e7d2be
  • list.activeSelectionForeground#302b5d
  • list.dropBackground#2848a933
  • list.errorForeground#a5222f
  • list.focusBackground#e7d2be
  • list.focusForeground#302b5d
  • list.highlightForeground#2848a9
  • list.hoverBackground#dbd1ddcc
  • list.hoverForeground#302b5d
  • list.inactiveSelectionBackground#dbd1dd
  • list.inactiveSelectionForeground#3d2b5a
  • list.invalidItemForeground#a5222f
  • list.warningForeground#ac5402
  • listFilterWidget.background#dbd1dd
  • listFilterWidget.noMatchesOutline#a5222f
  • listFilterWidget.outline#2848a9
  • menu.background#e4dcd4
  • menu.border#aab0ad
  • menu.foreground#3d2b5a
  • menu.selectionBackground#e7d2be
  • menu.selectionForeground#302b5d
  • menu.separatorBackground#aab0ad
  • menubar.selectionBackground#e7d2be
  • menubar.selectionForeground#302b5d
  • merge.border#aab0ad
  • merge.currentContentBackground#2848a933
  • merge.currentHeaderBackground#2848a966
  • merge.incomingContentBackground#39684733
  • merge.incomingHeaderBackground#39684766
  • notificationCenterHeader.background#e4dcd4
  • notificationCenterHeader.foreground#3d2b5a
  • notificationLink.foreground#2848a9
  • notifications.background#e4dcd4
  • notifications.border#aab0ad
  • notifications.foreground#3d2b5a
  • notificationsErrorIcon.foreground#a5222f
  • notificationsInfoIcon.foreground#2848a9
  • notificationsWarningIcon.foreground#ac5402
  • panel.background#f6f2ee
  • panel.border#e4dcd4
  • panelInput.border#aab0ad
  • panelTitle.activeBorder#2848a9
  • panelTitle.activeForeground#302b5d
  • panelTitle.inactiveForeground#824d5b
  • peekView.border#2848a9
  • peekViewEditor.background#e4dcd4
  • peekViewEditor.matchHighlightBackground#ac540244
  • peekViewResult.background#e4dcd4
  • peekViewResult.foreground#643f61
  • peekViewResult.matchHighlightBackground#ac540244
  • peekViewResult.selectionBackground#e7d2be
  • peekViewResult.selectionForeground#302b5d
  • peekViewTitle.background#e4dcd4
  • peekViewTitleDescription.foreground#824d5b
  • peekViewTitleLabel.foreground#302b5d
  • pickerGroup.border#aab0ad
  • pickerGroup.foreground#2848a9
  • problemsErrorIcon.foreground#a5222f
  • problemsInfoIcon.foreground#2848a9
  • problemsWarningIcon.foreground#ac5402
  • progressBar.background#2848a9
  • quickInput.background#e4dcd4
  • quickInput.foreground#3d2b5a
  • quickInputList.focusBackground#e7d2be
  • sash.hoverBorder#2848a9
  • scrollbar.shadow#0000001a
  • scrollbarSlider.activeBackground#aab0adcc
  • scrollbarSlider.background#aab0ad66
  • scrollbarSlider.hoverBackground#aab0ad99
  • selection.background#a4c1c2
  • settings.checkboxBackground#dbd1dd
  • settings.dropdownBackground#dbd1dd
  • settings.dropdownForeground#3d2b5a
  • settings.headerForeground#302b5d
  • settings.modifiedItemIndicator#2848a9
  • settings.numberInputBackground#e4dcd4
  • settings.textInputBackground#e4dcd4
  • sideBar.background#e4dcd4
  • sideBar.border#e4dcd4
  • sideBar.foreground#643f61
  • sideBarSectionHeader.background#e4dcd4
  • sideBarSectionHeader.border#e4dcd4
  • sideBarSectionHeader.foreground#3d2b5a
  • sideBarTitle.foreground#643f61
  • statusBar.background#e4dcd4
  • statusBar.border#e4dcd4
  • statusBar.debuggingBackground#955f61
  • statusBar.debuggingForeground#e4dcd4
  • statusBar.foreground#643f61
  • statusBar.noFolderBackground#e4dcd4
  • statusBar.noFolderForeground#643f61
  • statusBarItem.activeBackground#643f6122
  • statusBarItem.errorBackground#e4dcd4
  • statusBarItem.errorForeground#a5222f
  • statusBarItem.hoverBackground#643f611a
  • statusBarItem.prominentBackground#dbd1dd
  • statusBarItem.prominentHoverBackground#d3c7bb
  • statusBarItem.remoteBackground#2848a9
  • statusBarItem.remoteForeground#e4dcd4
  • statusBarItem.warningBackground#e4dcd4
  • statusBarItem.warningForeground#ac5402
  • symbolIcon.classForeground#ac5402
  • symbolIcon.colorForeground#287980
  • symbolIcon.constantForeground#955f61
  • symbolIcon.enumeratorForeground#ac5402
  • symbolIcon.functionForeground#223d90
  • symbolIcon.interfaceForeground#ac5402
  • symbolIcon.keywordForeground#6e33ce
  • symbolIcon.methodForeground#223d90
  • symbolIcon.propertyForeground#287980
  • symbolIcon.variableForeground#3d2b5a
  • tab.activeBackground#f6f2ee
  • tab.activeBorder#f6f2ee
  • tab.activeBorderTop#2848a9
  • tab.activeForeground#302b5d
  • tab.activeModifiedBorder#ac5402
  • tab.border#e4dcd4
  • tab.hoverBackground#f6f2ee
  • tab.hoverForeground#302b5d
  • tab.inactiveBackground#e4dcd4
  • tab.inactiveForeground#824d5b
  • tab.inactiveModifiedBorder#ac540280
  • tab.lastPinnedBorder#aab0ad
  • tab.unfocusedActiveForeground#643f61
  • tab.unfocusedInactiveForeground#824d5b
  • terminal.ansiBlack#352c24
  • terminal.ansiBlue#2848a9
  • terminal.ansiBrightBlack#4d453b
  • terminal.ansiBrightBlue#3355bd
  • terminal.ansiBrightCyan#328a90
  • terminal.ansiBrightGreen#40794f
  • terminal.ansiBrightMagenta#7d40dd
  • terminal.ansiBrightRed#b3283a
  • terminal.ansiBrightWhite#f4ede6
  • terminal.ansiBrightYellow#bd5f0b
  • terminal.ansiCyan#287980
  • terminal.ansiGreen#396847
  • terminal.ansiMagenta#6e33ce
  • terminal.ansiRed#a5222f
  • terminal.ansiWhite#f2e9e1
  • terminal.ansiYellow#ac5402
  • terminal.background#f6f2ee
  • terminal.foreground#3d2b5a
  • terminal.selectionBackground#a4c1c2
  • terminalCursor.foreground#824d5b
  • testing.iconErrored#a5222f
  • testing.iconFailed#a5222f
  • testing.iconPassed#396847
  • testing.iconSkipped#ac5402
  • textBlockQuote.background#e4dcd4
  • textBlockQuote.border#aab0ad
  • textCodeBlock.background#e4dcd4
  • textLink.activeForeground#287980
  • textLink.foreground#2848a9
  • textPreformat.foreground#955f61
  • textSeparator.foreground#aab0ad
  • titleBar.activeBackground#e4dcd4
  • titleBar.activeForeground#643f61
  • titleBar.border#e4dcd4
  • titleBar.inactiveBackground#e4dcd4
  • titleBar.inactiveForeground#824d5b
  • tree.indentGuidesStroke#aab0ad
  • walkThrough.embeddedEditorBackground#e4dcd4
  • welcomePage.progress.foreground#2848a9
  • welcomePage.tileBackground#e4dcd4
  • welcomePage.tileHoverBackground#dbd1dd
  • widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#837a72italic
variable, string constant.other.placeholder#3d2b5a
constant.other.color#3d2b5a
invalid, invalid.illegal#a5222f
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#6e33ce
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#6e33ce
keyword.operator, punctuation.accessor, punctuation.definition.generic#287980
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#223d90
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#223d90italic
meta.block variable.other#3d2b5a
support.other.variable, string.other.link#3d2b5a
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#955f61
constant.language.boolean#ac5402
constant.numeric, variable.other.constant, entity.name.constant#ac5402
variable.parameter, meta.function.parameters#8b369aitalic
constant.language, support.function.builtin, variable.language.this#a5222f
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#396847
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#ac5402italic
meta.type, support.type, entity.name.type#ac5402italic
storage.type#6e33ce
entity.name.enum#ac5402italic
meta.enum variable.other.readwrite, variable.other.enummember#287980
meta.property.object, variable.object.property, variable.other.object.property#287980
punctuation.definition.typeparameters, meta.type.parameters#488d93
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#ac5402
entity.name.namespace#ac5402
keyword.control.directive, punctuation.definition.directive#ac5402
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a5222f
variable.language#a5222fitalic
entity.name.method.js#223d90italic
meta.class-method.js entity.name.function.js, variable.function.constructor#223d90
entity.other.attribute-name#ac5402
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ac5402italic
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#287980
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#287980
source.css entity.other.attribute-name.class.css#ac5402
support.type.primitive, entity.name.type.numeric#6e33ce
support.type.object, support.constant#6e33ce
markup.inserted#396847
markup.deleted#a5222f
markup.changed#ac5402
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#223d90
string.regexp#287980
constant.character.escape#643f61
*url*, *link*, *uri*#3d2b5aunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#223d90italic
source.js constant.other.object.key.js string.unquoted.label.js#6e33ce
source.json meta.structure.dictionary.json support.type.property-name.json#223d90
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#6e33ce
text.html.markdown, punctuation.definition.list_item.markdown#3d2b5a
text.html.markdown markup.inline.raw.markdown#396847
text.html.markdown meta.dummy.line-break#837a72
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#223d90
markup.italic#a5222fitalic
markup.bold, markup.bold string#a5222fbold
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#a5222fbold
markup.underline#955f61underline
markup.quote punctuation.definition.blockquote.markdown#643f61
markup.quote#643f61italic
string.other.link.title.markdown#2848a9
string.other.link.description.title.markdown#6e33ce
constant.other.reference.link.markdown#ac5402
markup.raw.block#6e33ce
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#396847
meta.separator.markdown#287980
punctuation.definition.list.begin.markdown, markup.list#287980