Zen Dark Theme
Publisher: Olivier CuenotThemes in package: 1
Dark theme with lots of zen
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#0000
- activityBar.activeBorder#0000
- activityBar.activeFocusBorder#084d8d
- activityBar.background#050505
- activityBar.border#0000
- activityBar.dropBorder#084d8d
- activityBar.foreground#666
- activityBar.inactiveForeground#333
- activityBarBadge.background#777
- activityBarBadge.foreground#000
- badge.background#fff5
- badge.foreground#000
- debugToolBar.background#381900
- descriptionForeground#444
- dropdown.background#0000
- dropdown.border#444
- dropdown.foreground#888
- dropdown.listBackground#111
- editor.background#161616
- editor.lineHighlightBackground#ffffff05
- editorGroup.border#0a0a0a
- editorGroup.emptyBackground#0a0a0a
- editorGroupHeader.noTabsBackground#111
- editorGroupHeader.tabsBackground#0a0a0a
- editorGroupHeader.tabsBorder#0000
- editorHoverWidget.background#202020
- editorHoverWidget.border#1e1e1e
- editorHoverWidget.foreground#777
- editorHoverWidget.statusBarBackground#eee
- editorIndentGuide.activeBackground#fff2
- editorIndentGuide.background#8881
- editorLineNumber.activeForeground#fff9
- editorLineNumber.foreground#fff2
- editorPane.background#0a0a0a
- editorSuggestWidget.background#202020
- editorSuggestWidget.border#1e1e1e
- editorSuggestWidget.foreground#fff8
- editorSuggestWidget.highlightForeground#fff8
- editorSuggestWidget.selectedBackground#ffffff08
- editorWidget.background#202020
- editorWidget.border#1e1e1e
- editorWidget.foreground#777
- editorWidget.resizeBorder#0000
- errorForeground#f56262
- focusBorder#0000
- foreground#555
- gitDecoration.addedResourceForeground#b4c973
- gitDecoration.conflictingResourceForeground#ff0000
- gitDecoration.deletedResourceForeground#90516b
- gitDecoration.ignoredResourceForeground#999999
- gitDecoration.modifiedResourceForeground#cc7732
- gitDecoration.stageDeletedResourceForeground#ff0000
- gitDecoration.stageModifiedResourceForeground#ff0000
- gitDecoration.submoduleResourceForeground#888
- gitDecoration.untrackedResourceForeground#cccccc
- icon.foreground#fff6
- input.background#0000
- input.border#8884
- input.foreground#fff8
- input.placeholderForeground#fff4
- list.activeSelectionBackground#0000
- list.activeSelectionForeground#aaa
- list.deemphasizedForeground#ff0000
- list.errorForeground#f56262
- list.focusBackground#fff1
- list.focusForeground#fffc
- list.highlightForeground#fff
- list.hoverBackground#fff1
- list.hoverForeground#fffc
- list.inactiveSelectionBackground#0000
- list.inactiveSelectionForeground#aaa
- menu.background#084d8d
- menu.border#084d8d
- menu.foreground#fffc
- menu.selectionBackground#fff2
- menu.selectionForeground#fff
- menu.separatorBackground#fff4
- menubar.selectionBackground#084d8d
- menubar.selectionBorder#0000
- menubar.selectionForeground#fff
- notificationCenter.border#0000
- notificationCenterHeader.background#222
- notificationCenterHeader.foreground#fff4
- notificationLink.foreground#ffffff
- notifications.background#222
- notifications.border#0000
- notifications.foreground#fff9
- notificationsErrorIcon.foreground#e05e5e
- notificationsInfoIcon.foreground#3d9ef8
- notificationsWarningIcon.foreground#d4c53d
- notificationToast.border#0000
- panel.background#111
- panel.border#0000
- panelTitle.activeForeground#888
- pickerGroup.border#fff4
- pickerGroup.foreground#fff6
- progressBar.background#084d8d
- quickInput.background#084d8d
- quickInput.foreground#fff
- quickInputTitle.background#084d8d
- sash.hoverBorder#084d8d
- scrollbar.shadow#0000
- scrollbarSlider.activeBackground#fff3
- scrollbarSlider.background#fff1
- scrollbarSlider.hoverBackground#fff2
- selection.background#084d8d44
- settings.dropdownBackground#0000
- settings.dropdownBorder#fff3
- settings.dropdownForeground#fff
- settings.focusedRowBackground#3334
- settings.headerForeground#ccc
- settings.modifiedItemIndicator#4444
- settings.numberInputBackground#0000
- settings.numberInputBorder#fff3
- settings.numberInputForeground#fff
- settings.textInputBackground#0000
- settings.textInputBorder#fff3
- settings.textInputForeground#fff
- sideBar.background#0a0a0a
- sideBar.border#0000
- sideBar.dropBackground#084d8d11
- sideBar.foreground#777
- sideBarSectionHeader.background#0000
- sideBarSectionHeader.border#191919
- sideBarSectionHeader.foreground#999
- sideBarTitle.foreground#666
- statusBar.background#050505
- statusBar.debuggingBackground#793600
- statusBar.debuggingForeground#fff8
- statusBar.foreground#555
- statusBar.noFolderForeground#fff8
- tab.activeBackground#161616
- tab.activeBorder#161616
- tab.activeBorderTop#222
- tab.activeForeground#aaa
- tab.border#0000
- tab.inactiveBackground#0a0a0a
- tab.inactiveForeground#666
- tab.unfocusedActiveForeground#aaa
- tab.unfocusedInactiveBackground#0a0a0a
- tab.unfocusedInactiveForeground#666
- terminal.ansiBlack#555
- terminal.ansiWhite#888
- terminal.background#111
- terminal.foreground#fff
- terminal.selectionBackground#dcecfa
- textBlockQuote.background#4d91d111
- textBlockQuote.border#233e57
- textCodeBlock.background#fff2
- textLink.activeForeground#4d91d1
- textLink.foreground#557ca0
- textPreformat.foreground#aaa
- textSeparator.foreground#ddd
- titleBar.activeBackground#000
- titleBar.activeForeground#555
- titleBar.inactiveBackground#000
- titleBar.inactiveForeground#555
- tree.indentGuidesStroke#fff1
- walkThrough.embeddedEditorBackground#0003
- welcomePage.background#161616
- welcomePage.buttonBackground#202020
- welcomePage.buttonHoverBackground#242424
- widget.shadow#0000
- window.activeBorder#000
- window.inactiveBorder#000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #808080 | — |
| comment | #4f4e4eff | italic |
| keyword, storage | #5E6C83 | — |
| constant.numeric | #B35BA6 | — |
| constant | #BDA274 | — |
| constant.language | #D4B774 | — |
| variable.language, variable.other | #804B5E | — |
| string | #6B764E | — |
| constant.character.escape, string source | #8e7541ff | — |
| entity.name.function | #96926A | — |
| entity.name.type | #3B5D87 | — |
| entity.other.inherited-class | #71685eff | — |
| variable.parameter | #6f948bff | — |
| storage.type.method | #45464dff | |
| meta.section entity.name.section, declaration.section entity.name.section | #71685eff | |
| support.function | #383d2fff | — |
| support.class, support.type | #9E9473 | — |
| support.constant | #A66A5E | — |
| support.variable | #FCF9F9 | — |
| invalid | #FC0000C4 | — |
| invalid.deprecated | — | underline italic |
| invalid.deprecated.trailing-whitespace | #870c27ff | — |
| meta.tag.preprocessor.xml | #95B7CC | italic |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string | #5697B0 | italic |
| text.html.mt meta.tag.sgml.html meta.tag.sgml.doctype.html | #7ed0e6ff | — |
| string.quoted.docinfo.doctype.DTD | #7D403A | italic |
| meta.tag, declaration.tag | #8C7A7287 | — |
| entity.name.tag | #B0A099 | — |
| entity.other.attribute-name | #7587A6 | — |
| text.html.mt meta.tag.any.html string.quoted.double.html | #6B764E | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #6B764EA1 | — |
| meta.attribute.unrecognized.*ngIf.html, meta.attribute.unrecognized.*ngFor.html | — | bold |
| text.html.derivative | #C7BA6D | — |
| entity.other.attribute-name.id.css | #CDA869 | bold |
| entity.other.attribute-name.class.css | #9B703F | bold |
| entity.other.less.mixin | #226A84 | — |
| entity.other.attribute-name.pseudo-element.css | #9B703FED | — |
| entity.name.tag.css | #CC7832 | bold |
| entity.other.attribute-name.pseudo-class.css | #9B703F | — |
| meta.preprocessor.at-rule keyword.control.at-rule | #2F6652 | — |
| meta.property-value support.constant.named-color.css, meta.property-value constant | #79B08C | — |
| meta.constructor.argument.css | #358C6B | — |
| support.constant.property-value.css | #6B764E | — |
| constant.other.color.rgb-value.hex.css punctuation.definition.constant.css | #99B5809E | — |
| constant.other.color.rgb-value.hex.css | #609e2eff | — |
| meta.attribute-selector.css string | #3ad40fff | — |
| 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 | #3F4040 | — |
| punctuation.terminator.rule, punctuation.terminator.rule.css | #323333 | — |
| support.type.property-name.css | #7587A6 | — |
| support.function.url.css | #838dd6ff | — |
| punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css | #53706D | — |
| variable.parameter.url.css | #2f3ebdff | 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 | #615555 | — |
| punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css | #6e186b9e | bold |
| entity.name.tag.reference.scss | #B3A354 | bold |
| variable.scss | #c20288ff | italic |
| text.xml | #7587A6 | — |
| entity.name.tag.localname.xml | #6B764E | — |
| punctuation.definition.tag.xml | #6B764EA1 | — |
| support.type.property-name.json, support.type.property-name.json.comments | #787669 | — |
| punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json.comments, punctuation.support.type.property-name.end.json | #4A473D | — |
| string.quoted.double.json, string.quoted.double.json.comments | #65732F | — |
| punctuation.definition.string.begin.json, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json, punctuation.definition.string.end.json.comments | #3F452C | — |
| punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.key-value.json.comments | #545453 | — |
| punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.pair.json.comments | #666665 | — |
| constant.language.json, constant.language.json.comments | #7587A6 | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json | #8C1A81 | — |
| punctuation.separator.array.json | #5C1756 | — |
| #D48620CC | — | |
| punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.pair.json.comments | #694111C4 | — |
| constant.numeric.json | #BF5A35 | — |
| #B09D9D | — | |
| source.js | #B0ACA9 | — |
| keyword.operator.js | #7C5887 | — |
| meta.brace.curly.js | #91677dff | — |
| keyword.control.js | #9F70A1 | — |
| meta.brace.round.js | #B5830E | — |
| punctuation.terminator.statement.js | #B5AAA1CC | — |
| support.function.js | #64B396 | — |
| support.constant.dom.js | #6CCBEB | — |
| meta.class.instance.constructor entity.name.type.instance.js | #32A4D1 | — |
| support.type.primitive.js, support.type.primitive.ts | #82B5E8 | — |
| variable.object.property.js, variable.object.property.ts | #F0E8BD | — |
| storage.modifier.js, storage.modifier.ts | #B0AEAE | — |
| meta.decorator.ts, meta.decorator.ts meta.function-call.ts entity.name.function | #B5B017 | — |
| keyword.control.conditional | #AB8748 | — |
| variable.language.this | #870483 | — |
| meta.definition.method.ts | #DBD8DB | bold |
| meta.function-call.ts entity.name.function | #A37CA2 | — |
| entity.name.type.ts | #6DA2ED | — |
| source.ts string.quoted.single | #548F32 | — |
| variable.parameter.js, variable.parameter.ts | #D4C9D6 | — |
| variable.other.readwrite.ts | #C6BBC7 | — |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts | #6DA2EDB0 | — |
| new.expr.ts entity.name.function.ts, new.expr.ts meta.function-call.ts support.class.builtin.ts | #4C95ED | — |
| source.ts meta.class.ts meta.method.declaration.ts storage.type.ts | #FFFFFF | — |
| punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts | #548F32C4 | — |
| entity.name.type.class.ts | #FFFFFF | bold |
| storage.type.class.ts | #fff | — |
| keyword.operator.new.ts | #78DEF5 | — |
| source.ts meta.import.ts string.quoted.single.ts | #888888 | — |
| meta.import.ts variable.other.readwrite.alias.ts | #999999 | — |
| keyword.control.import.ts, keyword.control.from.ts, meta.import.ts punctuation.definition.block.ts | #777777 | — |
| meta.decorator.ts string.quoted.single.ts | #DECA18 | — |
| meta.decorator.ts punctuation.definition.string.begin.ts, meta.decorator.ts punctuation.definition.string.end.ts | #DECA189E | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...