Yoru
Publisher: Kah Kit ZhengThemes in package: 1
A dark theme for VS Code
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#0f1118
- activityBar.foreground#92b4df
- activityBar.inactiveForeground#3e4b64
- activityBarBadge.background#a6c4e9
- activityBarBadge.foreground#000000
- banner.background#344a7a
- banner.foreground#d7d7d7
- banner.iconForeground#ffd483
- button.background#1e2235
- button.foreground#ffffff
- button.hoverBackground#2a2f4b
- diffEditor.diagonalFill#3a4364
- diffEditor.insertedLineBackground#0b203aff
- diffEditor.insertedTextBackground#142a46ff
- diffEditor.removedLineBackground#411a27ff
- diffEditor.removedTextBackground#532233ff
- dropdown.background#1a1d27
- dropdown.border#4169e1
- dropdown.foreground#ffffff
- dropdown.listBackground#1a1d27
- editor.background#181a23
- editor.findMatchBackground#3b4d66a8
- editor.findMatchBorder#d6c73d
- editor.findMatchHighlightBackground#234475a8
- editor.foreground#ccd4dcff
- editor.lineHighlightBackground#243041
- editor.lineHighlightBorder#243041
- editor.selectionBackground#243041
- editor.selectionHighlightBackground#243041
- editor.symbolHighlightBackground#d7d7d7
- editorCursor.foreground#b0d2ff
- editorGroupHeader.tabsBackground#181a23
- editorGutter.addedBackground#5ebe86
- editorGutter.deletedBackground#f3495d
- editorGutter.foldingControlForeground#d7d7d7
- editorGutter.modifiedBackground#e9b76c
- editorIndentGuide.activeBackground#52546e
- editorIndentGuide.background#2d2f49
- editorLineNumber.activeForeground#cce6ffff
- editorLineNumber.foreground#465563
- editorOverviewRuler.border#181a23
- editorSuggestWidget.background#2d3146
- editorSuggestWidget.foreground#ccd9ff
- editorSuggestWidget.highlightForeground#ccd9ff
- editorWidget.background#26293b
- extensionButton.prominentBackground#3c4870
- extensionIcon.starForeground#f1c83e
- focusBorder#14161f
- gitDecoration.ignoredResourceForeground#3e4563
- gitDecoration.modifiedResourceForeground#e9b76c
- gitDecoration.untrackedResourceForeground#5ebe86
- input.background#1a1d27
- input.foreground#ffffff
- input.placeholderForeground#7e8aa5
- inputValidation.errorBackground#963340
- inputValidation.errorBorder#3d1a1f
- inputValidation.errorForeground#dadada
- list.activeSelectionBackground#181a23
- list.activeSelectionForeground#dee6fc
- list.dropBackground#2e3247
- list.errorForeground#d67272
- list.filterMatchBackground#263d83
- list.highlightForeground#459bd4
- list.hoverBackground#181a23
- list.hoverForeground#dee6fc
- list.inactiveSelectionBackground#181a23
- list.inactiveSelectionForeground#dee6fc
- listFilterWidget.background#1a1d27
- listFilterWidget.noMatchesOutline#d67272
- listFilterWidget.outline#4169e1
- menu.background#0f1118
- menu.foreground#7e8aa5
- menu.separatorBackground#2e3247
- notificationCenter.border#1f2835
- notificationCenterHeader.background#23263a
- notificationToast.border#202835
- panel.border#465563
- panelTitle.activeForeground#d7d7d7
- panelTitle.inactiveForeground#8c99a5
- peekView.border#4d5c6e
- peekViewEditor.background#202635
- peekViewEditor.matchHighlightBackground#4f498b
- peekViewEditorGutter.background#202635
- peekViewResult.background#181a23
- peekViewResult.lineForeground#d7d7d7
- peekViewResult.matchHighlightBackground#4f498b
- peekViewResult.selectionBackground#495b86
- peekViewTitle.background#363c5e
- peekViewTitleDescription.foreground#cccccc
- quickInputList.focusForeground#d7d7d7
- quickInputTitle.background#2e3247
- scrollbar.shadow#14161f
- scrollbarSlider.activeBackground#586386
- scrollbarSlider.background#3a425c
- scrollbarSlider.hoverBackground#4b5472
- selection.background#5e7aa1a8
- settings.checkboxBorder#6b707a
- settings.dropdownBackground#1a1d27
- settings.dropdownBorder#131822
- settings.focusedRowBackground#1a1d27
- settings.rowHoverBackground#2c3144
- sideBar.background#14161f
- sideBar.foreground#7e8aa5
- sideBarSectionHeader.background#14161f
- sideBarTitle.foreground#7e8aa5
- statusBar.background#0f1118
- statusBar.foreground#5e667a
- statusBar.noFolderBackground#14161f
- statusBar.noFolderForeground#5e667a
- tab.activeBackground#181a23
- tab.activeBorder#f9ee98
- tab.border#181a23
- tab.inactiveBackground#181a23
- tab.inactiveForeground#95a2c0
- textLink.activeForeground#f9ee98
- textLink.foreground#f9ee98
- titleBar.activeBackground#0f1118
- titleBar.activeForeground#7e8aa5
- titleBar.inactiveBackground#0f1118
- titleBar.inactiveForeground#5c5c72
- tree.indentGuidesStroke#353756
- welcomePage.background#1c1f2c
- welcomePage.progress.background#3a3e52
- welcomePage.progress.foreground#f9ee98
- welcomePage.tileBackground#23283d
- welcomePage.tileHoverBackground#2b2f44
- window.activeBorder#14161f
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #515e6aff | italic |
| constant.other.color | #ffffff | — |
| storage, storage.type, storage.modifier | #f9ee98 | italic |
| variable, string constant.other.placeholder, meta.delimiter.comma.js | #b3cae8ff | — |
| meta.block variable.other | #76c5a4 | — |
| support.other.variable, string.other.link | #b3cae8ff | — |
| support.type | #b3cae8ff | — |
| 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 | #fb7da7 | — |
| keyword | #fb7da7 | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #76c5a4 | — |
| constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other | #c5a0f0 | — |
| variable.parameter | #d7d7d7 | — |
| keyword.control, 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 | #c8a15dff | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #fb7da7 | — |
| 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 | #a6d885 | italic |
| string.regexp | #89ddff | — |
| constant.character.escape | #89ddff | — |
| *url*, *link*, *uri* | — | underline |
| invalid, invalid.illegal | #ff5370 | — |
| entity.other.attribute-name | #4ac2d4 | italic |
| variable.language | #fb7da7 | italic |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.jsx | #596369 | — |
| JSXNested, text.html.derivative | #d7d7d7 | — |
| entity.other.attribute-name.html | #f9ee98 | — |
| source.sass keyword.control, entity.other.attribute-name.id.css | #f29e74 | — |
| entity.other.attribute-name.class | #ffcb6b | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css | #5ccfe6 | — |
| 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, entity.name.tag.css | #d7d7d7 | — |
| meta.identifier.css, meta.property-values.css, source.css.scss, support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css | #a6d885 | — |
| constant.length.units.css, keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css | #fb7da7 | — |
| support.function.css, support.function.transform.css, support.function.gradient.css, support.function.url.css, meta.property-values.css, source.css.scss | #4ac2d4 | — |
| meta.preprocessor.at-rule, keyword.control.at-rule | #fb7da7 | — |
| entity.other.keyframe-offset.percentage.css | #d7d7d7 | — |
| keyword.control.flow.js, keyword.control.module.js, keyword.operator.typeof.js, keyword.operator.logical.js, keyword.control.conditional.js, keyword.operator.comparison.js, keyword.operator.relational.js, keyword.operator.assignment.js, storage.type.function.arrow.js | #f29e74 | — |
| string.unquoted.js | #e6bc74 | — |
| meta.property.object.js, meta.property.object.jsx, meta.property.member.js, meta.property.member.jsx, meta.property.member.ts, meta.property.member.tsx, variable.other.object.ts, variable.other.object.tsx, variable.other.constant.ts, variable.other.constant.tsx | #b3cae8ff | — |
| variable.other.constant.js, meta.function.js, source.js | #ac92e9 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #ff5370 | — |
| entity.name.method.js | #82aaff | italic |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82aaff | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #d7d7d7 | — |
| entity.name.section.markdown | #f9ee98 | — |
| string.other.link.title.markdown | #82aaff | — |
| string.other.link.description.title.markdown | #c792ea | — |