Dark Vue Theme
Publisher: JayPuffThemes in package: 1
Modified Dark Mode Warm theme. Developed for Web/Vue Dev!
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#2d2f32
- activityBar.border#111111
- activityBar.foreground#d9d9d9
- activityBarBadge.background#25c9cfc7
- activityBarBadge.foreground#ffffff
- badge.background#157dcd
- badge.foreground#ffffff
- button.background#6d6d6d
- button.foreground#e8e8e8
- button.hoverBackground#616161
- descriptionForeground#2e2e2e
- dropdown.background#ffffff
- dropdown.border#bfbfbf
- dropdown.foreground#000000
- dropdown.listBackground#000000
- editor.background#1e1e1e
- editor.findMatchBackground#7eceb62d
- editor.findMatchBorder#2b9e8b9d
- editor.findMatchHighlightBackground#7eceb62d
- editor.findRangeHighlightBackground#7eceb62d
- editor.foreground#ffffff
- editor.lineHighlightBackground#00000016
- editor.selectionBackground#80c6d865
- editorBracketHighlight.foreground1#ebf0ee
- editorBracketHighlight.foreground2#f5c34f
- editorBracketHighlight.foreground3#9dcf4d
- editorBracketHighlight.foreground4#4EC9B0
- editorBracketHighlight.foreground5#258ed4
- editorBracketHighlight.foreground6#c56eff
- editorBracketHighlight.unexpectedBracket.foreground#db0042
- editorCursor.background#111111
- editorCursor.foreground#ffffff
- editorGroup.border#bfbfbf
- editorGroup.dropBackground#0369d922
- editorGroup.emptyBackground#292a30
- editorGroupHeader.noTabsBackground#373737
- editorGroupHeader.tabsBackground#373737
- editorGroupHeader.tabsBorder#373737
- editorIndentGuide.activeBackground1#616161
- editorIndentGuide.background1#2d2f32
- editorLineNumber.activeForeground#d9d9d9
- editorLineNumber.foreground#747478
- editorWhitespace.foreground#bfbfbf
- errorForeground#ff0000
- focusBorder#949596
- foreground#dedcde
- input.background#2d2f32
- input.border#111111
- input.foreground#dedcde
- input.placeholderForeground#dedcdeaa
- list.activeSelectionBackground#65676b
- list.activeSelectionForeground#ffffff
- list.dropBackground#1e1e1e
- list.errorForeground#d9d9d9
- list.focusBackground#6c6d6c
- list.focusForeground#d9d9d9
- list.highlightForeground#d9d9d9
- list.hoverForeground#d9d9d9
- list.inactiveFocusBackground#2d2f32
- list.inactiveSelectionBackground#2d2f32
- list.inactiveSelectionForeground#d9d9d9
- list.invalidItemForeground#d9d9d9
- list.warningForeground#d9d9d9
- notificationCenter.border#111111
- notificationCenterHeader.background#2d2f32
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#ffffff
- notifications.background#2d2f32
- notifications.border#111111
- notifications.foreground#ffffff
- notificationToast.border#111111
- peekView.border#bfbfbf
- peekViewEditor.background#2d2f32
- peekViewEditor.matchHighlightBackground#19354900
- peekViewEditorGutter.background#1e1e1e
- peekViewResult.background#111111
- peekViewResult.fileForeground#aaaaaa
- peekViewResult.lineForeground#ffffff
- peekViewResult.matchHighlightBackground#1e1e1e
- peekViewResult.selectionBackground#2d2f32
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#111111
- peekViewTitleDescription.foreground#aaaaaa
- peekViewTitleLabel.foreground#ffffff
- selection.background#65676b
- settings.checkboxBackground#2d2f32
- settings.checkboxBorder#111111
- settings.checkboxForeground#dedcde
- settings.dropdownBackground#2d2f32
- settings.dropdownBorder#111111
- settings.dropdownForeground#dedcde
- settings.dropdownListBorder#111111
- settings.headerForeground#d9d9d9
- settings.textInputBackground#2d2f32
- settings.textInputBorder#111111
- settings.textInputForeground#dedcde
- sideBar.background#242527
- sideBar.border#111111
- sideBar.dropBackground#f9f5f5
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#2d2f32
- sideBarSectionHeader.foreground#e8e8e8
- sideBarTitle.foreground#d9d9d9
- statusBar.background#1e1e1e
- statusBar.border#1e1e1e
- statusBar.foreground#d9d9d9
- statusBar.noFolderBackground#1e1e1e
- tab.activeBackground#1e1e1e
- tab.activeBorder#ffffff00
- tab.activeBorderTop#ffffff00
- tab.activeForeground#ffffff
- tab.border#373737
- tab.inactiveBackground#373737
- tab.inactiveForeground#ffffff
- tab.unfocusedActiveBorder#ffffff00
- tab.unfocusedActiveBorderTop#ffffff00
- terminal.ansiBlack#000000
- terminal.ansiBlue#0088ff
- terminal.ansiBrightBlack#2171c7
- terminal.ansiBrightBlue#0088ff
- terminal.ansiBrightCyan#74e0e2
- terminal.ansiBrightGreen#3ad900
- terminal.ansiBrightMagenta#fb94ff
- terminal.ansiBrightRed#ff628c
- terminal.ansiBrightWhite#193549
- terminal.ansiBrightYellow#ffc600
- terminal.ansiCyan#80fcff
- terminal.ansiGreen#3ad900
- terminal.ansiMagenta#fb94ff
- terminal.ansiRed#ff628c
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffc600
- terminal.background#17181a
- terminal.foreground#ffffff
- terminalCursor.background#ffffff
- terminalCursor.foreground#ffffff
- widget.shadow#373737
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end | #cd83cf | — |
| comment, punctuation.definition.comment | #7f8c98 | italic |
| string | #ce97db | — |
| constant.numeric | #ffaf6e | — |
| constant.language | #ffaf6e | — |
| constant.character, constant.other | #ffaf6e | — |
| variable | #e3f1f3 | — |
| keyword, keyword.operator.expression, keyword.operator.logical, keyword.operator.comparison, keyword.operator.new | #62a2bb | — |
| storage | #6ccad6 | |
| storage.type | #62a2bb | — |
| storage.modifier | #62a2bb | — |
| entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.other.inherited-class | #6ccad6 | — |
| variable.parameter | #e1e1ff | — |
| variable.language | — | italic |
| entity.name.tag | #6ccad6 | |
| entity.other.attribute-name | #62a2bb | italic |
| support.function | #6ccad6 | |
| support.constant | #4EC9B0 | |
| support.type, support.class | #4EC9B0 | — |
| support.other.variable | #000000 | |
| invalid | #ce4188 | |
| invalid.deprecated | #ce4188 | — |
| support.type.property-name.css | #e3f1f3 | italic |
| text.html.basic | #ffffff | — |
| text.html.basic entity.name | #9effff | — |
| meta.toc-list.id.html | #ce97db | — |
| text.html.basic entity.other | #ffc600 | italic |
| meta.tag.metadata.script.html entity.name.tag.html | #ffc600 | — |
| support.variable.dom.js | #e1efff | — |
| keyword.operator.arithmetic, keyword.operator.arithmetic.js | #e1efff | — |
| keyword.operator.assignment, keyword.operator.assignment.js | #ffffff | — |
| punctuation.definition.block.js | #ffffff | — |
| variable.parameter, variable.parameter.js | #cddff3 | — |
| entity.name.type.js | #4EC9B0 | — |
| punctuation.accessor.js | #ffffff | — |
| support.variable.property.dom.js | #ffffff | — |
| punctuation.terminator.statement.js | #ffffff | — |
| variable.language, entity.name.type.class.js | #ffaf6e | — |
| entity.name.type.module.js | #ffffff | — |
| meta.object-literal.key.js | #e1efff | — |
| punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js | #9effff | — |
| source.css entity, source.stylus entity | #3ad900 | — |
| entity.other.attribute-name.id.css | #ce97db | |
| entity.name.tag | #6ccad6 | — |
| source.css support, source.stylus support | #a5ff90 | — |
| source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant | #ffaf6e | — |
| source.css keyword.other.unit | #d87b24 | — |
| keyword.control.unit.css.sass | #d87b24 | — |
| source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string | #ce97db | — |
| source.css variable, source.stylus variable | #4EC9B0 | — |
| source.css support.constant.property-value.css | #ffaf6e | — |
| support.type.property-name.json | #62a2bb | — |
| punctuation.definition.dictionary.begin.json | #ffffff | — |
| source.css entity.other.attribute-name.class.css | #ce97db | — |
| source.cas entity.other.attribute-name.pseudo-class.css, source.css entity.other.attribute-name.pseudo-element.css | #ffc600 | — |
| source.css support.type.vendored.property-name.css | #e1e1ff | — |
| variable.other.normal.shell | #94c6ca | — |
| markup.underline | — | underline |
| markup.bold | #fe8019 | bold |
| markup.heading | #fe8019 | bold |
| markup.italic | — | italic |
| markup.inserted | #b8bb26 | — |
| markup.deleted | #d65d0e | — |
| markup.changed | #fe8019 | — |
| markup.punctuation.quote.beginning | #98971a | — |
| markup.punctuation.list.beginning | #99c6ca | — |
| markup.inline.raw | #d65d0e | — |
| meta.selector | #7ec16e | — |
| meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, storage.type.java, variable.class | #fabd2f | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| punctuation.definition.interpolation.begin.html.vue | #4EC9B0 | — |
| punctuation.definition.interpolation.end.html.vue | #4EC9B0 | — |
| keyword.control.loop.vue | #4EC9B0 | — |
| keyword.control.conditional.vue | #4EC9B0 | — |
| entity.other.attribute-name.html.vue | #62a2bb | — |
| entity.other.attribute-name.tag.pug | #62a2bb | — |
| entity.other.attribute-name.html | #62a2bb | — |
| entity.other.attribute-name.id.css.pug | #6ccad6 | — |
| entity.other.attribute-name.id.css | #6ccad6 | — |
| punctuation.attribute-shorthand.event.html.vue | #4EC9B0 | — |
| punctuation.attribute-shorthand.bind.html.vue | #4EC9B0 | — |
| punctuation.attribute-shorthand.slot.html.vue | #4EC9B0 | — |
| entity.other.attribute-name.class.css.pug | #a594f1 | — |
| entity.other.attribute-name.class.css | #a594f1 | — |
| entity.other.attribute-name.class.css.sass | #a594f1 | — |
| entity.other.attribute-name.class.css | #a594f1 | — |
| entity.name.type | #4EC9B0 | — |
| punctuation.definition.typeparameters.begin | #fa912f | — |
| punctuation.definition.typeparameters.end | #fa912f | — |
| variable.other.property.ts | #bedbe0 | — |
| variable.other.property.js | #bedbe0 | — |
| punctuation.accessor.optional.js | #62a2bb | — |
| punctuation.accessor.optional.ts | #62a2bb | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...