Zen Themes
Publisher: Olivier CuenotThemes in package: 3
Themes with lots of zen
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.activeBackground#fff0
- activityBar.activeBorder#fff
- activityBar.activeFocusBorder#000
- activityBar.background#fff
- activityBar.border#f5f5f5
- activityBar.dropBorder#0866bd
- activityBar.foreground#555
- activityBar.inactiveForeground#aaa
- activityBarBadge.background#eee
- activityBarBadge.foreground#000
- badge.background#eee
- badge.foreground#000
- descriptionForeground#000
- dropdown.background#fff
- dropdown.border#eee
- dropdown.foreground#000
- dropdown.listBackground#fff
- editor.background#fff
- editor.lineHighlightBackground#e8e8e888
- editorGroup.border#ddd
- editorGroup.emptyBackground#fff
- editorGroupHeader.noTabsBackground#fff
- editorGroupHeader.tabsBackground#fff
- editorGroupHeader.tabsBorder#ddd
- editorHoverWidget.background#fff
- editorHoverWidget.border#ccc
- editorHoverWidget.foreground#666
- editorHoverWidget.statusBarBackground#eee
- editorIndentGuide.activeBackground#eee
- editorIndentGuide.background#f5f5f5
- editorLineNumber.activeForeground#888
- editorLineNumber.foreground#ddd
- editorPane.background#fff
- editorSuggestWidget.background#fff
- editorSuggestWidget.border#ccc
- editorSuggestWidget.foreground#444
- editorSuggestWidget.highlightForeground#000
- editorSuggestWidget.selectedBackground#0002
- editorWidget.background#fff
- editorWidget.border#222
- editorWidget.foreground#222
- editorWidget.resizeBorder#2c92f1
- errorForeground#f56262
- focusBorder#2c92f1
- foreground#666
- icon.foreground#666
- input.background#0000
- input.border#eee
- input.foreground#000c
- input.placeholderForeground#0004
- list.activeSelectionBackground#0000
- list.activeSelectionForeground#0a7ae2
- list.focusBackground#0000000c
- list.focusForeground#000
- list.highlightForeground#000
- list.hoverBackground#0000000c
- list.hoverForeground#222
- list.inactiveSelectionBackground#0000
- list.inactiveSelectionForeground#0a7ae2
- menu.background#0866bd
- menu.border#0866bd
- menu.foreground#fff
- menu.selectionBackground#fff2
- menu.selectionForeground#fff
- menu.separatorBackground#fff4
- menubar.selectionBackground#0866bd
- menubar.selectionBorder#0000
- menubar.selectionForeground#fff
- panel.background#fff
- panel.border#eee
- panelTitle.activeForeground#000
- pickerGroup.border#0004
- pickerGroup.foreground#0006
- progressBar.background#0866bd
- quickInput.background#fff
- quickInput.foreground#000d
- quickInputTitle.background#2c92f1
- sash.hoverBorder#2c92f1
- scrollbar.shadow#0000
- scrollbarSlider.activeBackground#0006
- scrollbarSlider.background#0002
- scrollbarSlider.hoverBackground#0004
- selection.background#0866bd46
- settings.dropdownBackground#fff
- settings.dropdownBorder#0003
- settings.dropdownForeground#000
- settings.focusedRowBackground#eee
- settings.headerForeground#000
- settings.modifiedItemIndicator#eee
- settings.numberInputBackground#fff
- settings.numberInputBorder#0003
- settings.numberInputForeground#000
- settings.textInputBackground#fff
- settings.textInputBorder#0003
- settings.textInputForeground#000
- sideBar.background#fff
- sideBar.border#ddd
- sideBar.dropBackground#0866bd44
- sideBar.foreground#666
- sideBarSectionHeader.background#0000
- sideBarSectionHeader.border#f6f6f6
- sideBarSectionHeader.foreground#000
- sideBarTitle.foreground#222
- statusBar.background#000
- statusBar.foreground#fff
- tab.activeBackground#fff
- tab.activeBorder#fff
- tab.activeBorderTop#fff
- tab.activeForeground#000
- tab.border#ddd
- tab.inactiveBackground#fff
- tab.inactiveForeground#888
- tab.unfocusedActiveBackground#fff
- tab.unfocusedActiveBorder#fff
- tab.unfocusedActiveBorderTop#fff
- tab.unfocusedActiveForeground#000
- tab.unfocusedInactiveBackground#fff
- tab.unfocusedInactiveForeground#888
- terminal.ansiWhite#777
- terminal.background#fff
- terminal.foreground#000
- terminal.selectionBackground#62809b
- textBlockQuote.background#0001
- textBlockQuote.border#0002
- textCodeBlock.background#fff
- textLink.activeForeground#0866bd
- textLink.foreground#2c92f1
- textPreformat.foreground#000
- textSeparator.foreground#ddd
- titleBar.activeBackground#000
- titleBar.activeForeground#fff
- titleBar.inactiveBackground#000
- titleBar.inactiveForeground#eee
- tree.indentGuidesStroke#0000000c
- walkThrough.embeddedEditorBackground#f8f8f8
- welcomePage.background#fff
- welcomePage.buttonBackground#f5f5f5
- welcomePage.buttonHoverBackground#f8f8f8
- widget.shadow#0003
- window.activeBorder#000
- window.inactiveBorder#000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #474746 | — |
| comment | #CFCDCD | italic |
| keyword, storage | #6E877E | — |
| constant.numeric | #91187B | — |
| constant | #772F29 | — |
| constant.language | #C43E12 | italic |
| variable.language, variable.other | #B51444 | — |
| string | #76AD28 | — |
| constant.character.escape, string source | #8e7541ff | — |
| entity.name.function | #000000 | — |
| entity.name.type | #3B5D87 | — |
| entity.other.inherited-class | #71685eff | — |
| variable.parameter | #6F948B | — |
| storage.type.method | #45464dff | |
| meta.section entity.name.section, declaration.section entity.name.section | #71685eff | |
| support.function | #383d2fff | — |
| support.class, support.type | #777058 | — |
| support.constant | #682f22ff | — |
| support.variable | #000000ff | — |
| keyword.operator.js | #A271B0 | — |
| invalid | #FCF9F9C4 | — |
| invalid.deprecated.trailing-whitespace | #870C27 | — |
| meta.tag.preprocessor.xml | #3f3f3fff | italic |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string | #55B6E0 | italic |
| string.quoted.docinfo.doctype.DTD | #7d403aff | italic |
| meta.tag, declaration.tag | #137E91 | — |
| entity.name.tag | #197387 | — |
| entity.other.attribute-name | #917C55 | — |
| entity.other.attribute-name.id.css | #373B40 | bold |
| entity.other.attribute-name.class.css | #226a84ff | bold |
| entity.other.less.mixin | #226a84ff | — |
| meta.attribute-selector.css string | #3AD40F | — |
| entity.name.tag.css | #1597BF | bold |
| entity.other.attribute-name.pseudo-class.css | #6E186B | bold |
| meta.preprocessor.at-rule keyword.control.at-rule | #405950 | — |
| meta.property-value support.constant.named-color.css, meta.property-value constant | #117534 | — |
| meta.constructor.argument.css | #689987 | — |
| source.js meta.brace.curly.js | #91677D | — |
| source.js keyword.control.js | #9B5C9C | — |
| source.js meta.brace.round.js | #B5830E | — |
| punctuation.terminator.statement.js | #B5AAA1 | — |
| source.js support.function.js | #176E51 | — |
| source.js support.constant.dom.js | #1B9FCF | — |
| support.constant.property-value.css | #1FABB5 | — |
| constant.other.color.rgb-value.hex.css | #609E2E | — |
| keyword.other.unit, keyword.other.unit.css, keyword.other.unit.scss | #BF5A35A3 | — |
| constant.numeric.css | #BF5A35 | — |
| punctuation.separator.key-value, punctuation.separator.key-value.css | #C7C9C9 | — |
| punctuation.terminator.rule, punctuation.terminator.rule.css | #D2D4D4 | — |
| source.js meta.brace.square.js | #DE7518 | — |
| source.js meta.class.instance.constructor entity.name.type.instance.js | #279DCF | — |
| text.html.mt meta.tag.any.html string.quoted.double.html | #76AD28 | — |
| text.html.mt meta.tag.sgml.html meta.tag.sgml.doctype.html | #7ED0E6 | — |
| invalid.deprecated | — | underline italic |
| support.type.property-name.css | #777058 | — |
| variable.scss | #C20288 | italic |
| support.function.url.css | #838DD6 | — |
| punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css | #B2B6D9 | — |
| variable.parameter.url.css | #2F3EBD | underline |
| punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.scss | #D6C5C6 | — |
| meta.attribute.unrecognized.*ngIf.html, meta.attribute.unrecognized.*ngFor.html | — | bold |
| text.html.derivative | #E8CD21 | — |
| constant.other.color.rgb-value.hex.css punctuation.definition.constant.css | #609E2E9E | — |
| punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css | #6E186B9E | bold |
| entity.name.tag.reference.scss | #E819E5 | bold |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...