Exo Theme
Publisher: ExoHQThemes in package: 10
A muted, eye-friendly theme family for VS Code
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.background#1a1e28
- activityBar.foreground#b8b8b8
- activityBarBadge.background#e84ada
- activityBarBadge.foreground#1a1e28
- badge.background#e84ada33
- badge.foreground#e84ada
- breadcrumb.activeSelectionForeground#f4ecfc
- breadcrumb.background#1a1e28
- breadcrumb.focusForeground#dcdcdc
- breadcrumb.foreground#b8b8b8
- button.background#e84adae6
- button.foreground#f4ecfc
- button.hoverBackground#e84ada
- button.secondaryBackground#b8b8b833
- button.secondaryForeground#dcdcdc
- button.secondaryHoverBackground#b8b8b880
- button.separator#f4ecfc4d
- chat.requestBackground#1f2430
- chat.requestBorder#b8b8b833
- debugExceptionWidget.background#1f2430
- debugExceptionWidget.border#ff668c
- debugToolBar.background#1f2430
- diffEditor.insertedLineBackground#8bdac12e
- diffEditor.insertedTextBackground#8bdac147
- diffEditor.removedLineBackground#ff668c2e
- diffEditor.removedTextBackground#ff668c47
- dropdown.background#1f2430
- dropdown.border#b8b8b833
- dropdown.listBackground#1f2430
- editor.background#1a1e28
- editor.findMatchBackground#f3a5ed66
- editor.findMatchBorder#f3a5ed66
- editor.findMatchHighlightBackground#f3a5ed40
- editor.findMatchHighlightBorder#f3a5ed40
- editor.findRangeHighlightBackground#f3a5ed33
- editor.focusedStackFrameHighlightBackground#8bdac133
- editor.foreground#dcdcdc
- editor.inactiveSelectionBackground#e84ada33
- editor.lineHighlightBackground#1f2430
- editor.rangeHighlightBackground#f3a5ed33
- editor.selectionBackground#e84ada59
- editor.selectionHighlightBackground#99e6ff33
- editor.selectionHighlightBorder#00000000
- editor.snippetTabstopHighlightBackground#99e6ff33
- editor.stackFrameHighlightBackground#ffcc9933
- editor.wordHighlightBackground#e84ada26
- editor.wordHighlightBorder#e84ada80
- editor.wordHighlightStrongBackground#99e6ff26
- editor.wordHighlightStrongBorder#99e6ff80
- editorBracketMatch.background#a6a6a64d
- editorBracketMatch.border#a6a6a64d
- editorCodeLens.foreground#dcdcdc8c
- editorCursor.foreground#e84ada
- editorError.foreground#ff668c
- editorGroupHeader.noTabsBackground#1a1e28
- editorGroupHeader.tabsBackground#1a1e28
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#8bdac1cc
- editorGutter.background#1a1e28
- editorGutter.deletedBackground#ff668ccc
- editorGutter.modifiedBackground#e84adacc
- editorHoverWidget.background#1f2430
- editorHoverWidget.border#e84ada66
- editorIndentGuide.activeBackground1#a6a6a680
- editorIndentGuide.background1#a6a6a633
- editorLineNumber.activeForeground#a6a6a6e6
- editorLineNumber.foreground#a6a6a64d
- editorLink.activeForeground#e84ada
- editorOverviewRuler.addedForeground#8bdac1
- editorOverviewRuler.bracketMatchForeground#e84ada
- editorOverviewRuler.deletedForeground#ff668c
- editorOverviewRuler.errorForeground#ff668c
- editorOverviewRuler.infoForeground#e84ada
- editorOverviewRuler.modifiedForeground#e84ada
- editorOverviewRuler.warningForeground#ffcc99
- editorRuler.foreground#a6a6a633
- editorWarning.foreground#ffcc99
- editorWhitespace.foreground#a6a6a699
- editorWidget.background#1f2430
- editorWidget.border#e84ada66
- editorWidget.foreground#dcdcdc
- extensionButton.prominentBackground#e84adae6
- extensionButton.prominentForeground#f4ecfc
- extensionButton.prominentHoverBackground#e84ada
- focusBorder#e84ada80
- gitDecoration.conflictingResourceForeground#ffb366
- gitDecoration.deletedResourceForeground#ff668c
- gitDecoration.ignoredResourceForeground#a6a6a680
- gitDecoration.modifiedResourceForeground#7fe6c4
- gitDecoration.untrackedResourceForeground#8bdac1
- icon.foreground#b8b8b8
- input.background#1a1e28
- input.border#b8b8b833
- input.foreground#dcdcdc
- input.placeholderForeground#a6a6a6
- inputOption.activeBorder#e84ada
- inputValidation.errorBackground#ff668c33
- inputValidation.errorBorder#ff668c
- inputValidation.infoBackground#e84ada33
- inputValidation.infoBorder#e84ada
- inputValidation.warningBackground#ffcc9933
- inputValidation.warningBorder#ffcc99
- list.activeSelectionBackground#63759926
- list.activeSelectionForeground#f4ecfc
- list.activeSelectionIconForeground#f4ecfc
- list.deemphasizedForeground#b8b8b8
- list.errorForeground#ff668c
- list.focusBackground#63759926
- list.focusOutline#00000000
- list.hoverBackground#63759926
- list.inactiveFocusBackground#6375991a
- list.inactiveFocusOutline#00000000
- list.inactiveSelectionBackground#6375991a
- list.invalidItemForeground#ff668cb3
- menu.background#1f2430
- menu.border#b8b8b833
- menu.foreground#dcdcdc
- menu.selectionBackground#e84ada4d
- menu.selectionForeground#f4ecfc
- menu.separatorBackground#b8b8b833
- menubar.selectionBackground#e84ada47
- merge.border#b8b8b833
- merge.currentContentBackground#8bdac12e
- merge.currentHeaderBackground#8bdac14d
- merge.incomingContentBackground#e84ada2e
- merge.incomingHeaderBackground#e84ada4d
- minimap.errorHighlight#ff668c
- minimap.findMatchHighlight#f3a5ed80
- minimap.selectionHighlight#e84ada80
- minimap.warningHighlight#ffcc99
- minimapGutter.addedBackground#8bdac1
- minimapGutter.deletedBackground#ff668c
- minimapGutter.modifiedBackground#7fe6c4
- notificationCenterHeader.background#1f2430
- notifications.background#1f2430
- notifications.border#b8b8b833
- panel.background#1a1e28
- panel.border#b8b8b833
- panelTitle.activeForeground#dcdcdc
- panelTitle.inactiveForeground#a6a6a6
- peekView.border#e84ada
- peekViewEditor.background#1a1e28
- peekViewEditor.matchHighlightBackground#f3a5ed4d
- peekViewResult.background#1a1e28
- peekViewResult.fileForeground#f4ecfc
- peekViewResult.lineForeground#dcdcdc
- peekViewResult.matchHighlightBackground#f3a5ed4d
- peekViewResult.selectionBackground#e84ada33
- peekViewResult.selectionForeground#f4ecfc
- peekViewTitle.background#1a1e28
- peekViewTitleDescription.foreground#b8b8b8
- peekViewTitleLabel.foreground#f4ecfc
- pickerGroup.border#b8b8b833
- pickerGroup.foreground#e84ada
- progressBar.background#e84ada
- quickInput.background#1f2430
- quickInput.foreground#dcdcdc
- quickInputList.focusBackground#63759926
- quickInputList.focusForeground#f4ecfc
- quickInputList.focusIconForeground#f4ecfc
- quickInputTitle.background#1f2430
- sash.hoverBorder#e84ada
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#e84ada80
- scrollbarSlider.background#b8b8b847
- scrollbarSlider.hoverBackground#b8b8b866
- settings.headerForeground#f4ecfc
- settings.modifiedItemIndicator#e84ada
- sideBar.background#1a1e28
- sideBar.foreground#b8b8b8
- sideBarSectionHeader.background#1a1e28
- sideBarSectionHeader.foreground#dcdcdc
- sideBarTitle.foreground#dcdcdc
- statusBar.background#1a1e28
- statusBar.border#b8b8b833
- statusBar.debuggingBackground#19805e
- statusBar.debuggingBorder#00000000
- statusBar.debuggingForeground#f4ecfc
- statusBar.foreground#b8b8b8
- statusBar.noFolderBackground#1a1e28
- statusBar.noFolderBorder#b8b8b833
- statusBar.noFolderForeground#b8b8b8
- statusBarItem.activeBackground#b8b8b840
- statusBarItem.hoverBackground#b8b8b826
- statusBarItem.prominentBackground#14171f
- statusBarItem.prominentForeground#dcdcdc
- statusBarItem.prominentHoverBackground#1f2430
- statusBarItem.prominentHoverForeground#dcdcdc
- statusBarItem.remoteBackground#e84ada33
- statusBarItem.remoteForeground#f4ecfc
- tab.activeBackground#1a1e28
- tab.activeBorder#e84ada
- tab.activeForeground#f4ecfc
- tab.border#00000000
- tab.inactiveBackground#1a1e28
- tab.inactiveForeground#a6a6a6
- terminal.ansiBlack#171b24
- terminal.ansiBlue#7fe6c4
- terminal.ansiBrightBlack#a6a6a6
- terminal.ansiBrightBlue#bff3e2
- terminal.ansiBrightCyan#f18ee8
- terminal.ansiBrightGreen#c5ede0
- terminal.ansiBrightMagenta#f6bbf1
- terminal.ansiBrightRed#ffb3c5
- terminal.ansiBrightWhite#f4ecfc
- terminal.ansiBrightYellow#ffd9b3
- terminal.ansiCyan#e84ada
- terminal.ansiGreen#8bdac1
- terminal.ansiMagenta#ed78e4
- terminal.ansiRed#ff668c
- terminal.ansiWhite#dcdcdc
- terminal.ansiYellow#ffb366
- terminal.background#1a1e28
- terminal.foreground#dcdcdc
- textLink.activeForeground#f18ee8
- textLink.foreground#e84ada
- textPreformat.foreground#99e6ff
- titleBar.activeBackground#1a1e28
- titleBar.activeForeground#dcdcdc
- titleBar.inactiveBackground#1a1e28
- titleBar.inactiveForeground#a6a6a6
- tree.indentGuidesStroke#b8b8b833
- welcomePage.buttonBackground#e84ada66
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #a6a6a6 | italic |
| variable, string constant.other.placeholder | #f4ecfc | — |
| variable.other.property, variable.other.object.property, variable.other.readwrite, support.variable.property, support.variable.dom, support.variable | #dcdcdc | — |
| constant.other.color | #f4ecfc | — |
| invalid, invalid.illegal | #ff668c | — |
| keyword, storage.type, storage.modifier | #f3a5ed | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, storage.type.namespace, storage.type.class, storage.type.function, storage.type.type, storage.type.interface, storage.type.enum | #f3a5ed | — |
| constant.other.color, punctuation, meta.tag, 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 | #ccc8d0 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #cc99ff | — |
| entity.name.function, meta.function-call, variable.function, keyword.other.special-method | #cc99ff | — |
| support.other.variable, string.other.link | #e0c2ff | — |
| constant.numeric, variable.parameter, keyword.other.unit | #ffcc99 | — |
| support.constant, constant.character, constant.escape, constant.language, keyword.other | #e0c2ff | — |
| 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 | #99e6ff | — |
| support | #dcdcdc | — |
| entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #8bdac1 | — |
| variable.language | #cc99ff | italic |
| entity.other.attribute-name | #f3a5ed | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #8bdac1 | italic |
| entity.other.attribute-name.class | #8bdac1 | — |
| markup.inserted | #8bdac1 | — |
| markup.deleted | #ff668c | — |
| markup.changed | #f3a5ed | — |
| string.regexp | #ccc8d0 | — |
| constant.character.escape | #ccc8d0 | — |
| *url*, *link*, *uri* | — | underline |
| variable.language.this, variable.language.self, variable.language.super, variable.language | #dcdcdc | italic |
| support.function, support.method | #8bdac1 | — |
| source.js constant.other.object.key.js string.unquoted.label.js | #e0c2ff | italic |
| text.html.markdown, punctuation.definition.list_item.markdown | #dcdcdc | — |
| text.html.markdown markup.inline.raw.markdown | #f3a5ed | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #cc99ff | — |
| markup.italic | #e0c2ff | italic |
| markup.bold, markup.bold string | #e0c2ff | bold |
| markup.underline | #ffcc99 | underline |
| markup.quote punctuation.definition.blockquote.markdown | #a6a6a6 | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #cc99ff | — |
| constant.other.reference.link.markdown | #8bdac1 | — |
| markup.raw.block | #f3a5ed | — |
| punctuation.definition.fenced.markdown | #a6a6a6 | — |
| variable.language.fenced.markdown | #a6a6a6 | — |
| markup.table | #dcdcdc | — |