Night Veil Dark
Publisher: Mohammed HasanfattaThemes in package: 1
A deep, atmospheric dark theme with soft purple accents, blue functions, and warm amber strings — Night.js inspired palette.
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#00000000
- activityBar.activeBorder#c792ea
- activityBar.background#0d0e10
- activityBar.border#00000000
- activityBar.foreground#8090b0
- activityBar.inactiveForeground#283040
- activityBarBadge.background#c792ea
- activityBarBadge.foreground#0d0e10
- badge.background#c792ea
- badge.foreground#0d0e10
- breadcrumb.activeSelectionForeground#d6deeb
- breadcrumb.focusForeground#d6deeb
- breadcrumb.foreground#526080
- breadcrumbPicker.background#0d0e10
- button.background#c792ea
- button.foreground#0d0e10
- button.hoverBackground#b580d8
- button.secondaryBackground#232840
- button.secondaryForeground#d6deeb
- button.secondaryHoverBackground#2e3550
- descriptionForeground#526080
- disabledForeground#3a4060
- dropdown.background#0d0e10
- dropdown.border#00000000
- dropdown.foreground#d6deeb
- editor.background#0d0e10
- editor.findMatchBackground#3a2d5080
- editor.findMatchHighlightBackground#2a2d4a60
- editor.foreground#d6deeb
- editor.inactiveSelectionBackground#529BEF22
- editor.lineHighlightBackground#111318
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#529BEF33
- editor.selectionHighlightBackground#529BEF18
- editor.selectionHighlightBorder#529BEF44
- editor.wordHighlightBackground#529BEF1F
- editor.wordHighlightStrongBackground#FF5A5F24
- editorBracketHighlight.foreground1#697098
- editorBracketHighlight.foreground2#697098
- editorBracketHighlight.foreground3#697098
- editorBracketHighlight.foreground4#697098
- editorBracketHighlight.foreground5#697098
- editorBracketHighlight.foreground6#697098
- editorBracketHighlight.unexpectedBracket.foreground#f78c6c
- editorBracketMatch.background#2a2d4a40
- editorBracketMatch.border#697098
- editorBracketPairGuide.activeBackground1#69709840
- editorBracketPairGuide.activeBackground2#69709840
- editorBracketPairGuide.activeBackground3#69709840
- editorBracketPairGuide.activeBackground4#69709840
- editorBracketPairGuide.activeBackground5#69709840
- editorBracketPairGuide.activeBackground6#69709840
- editorBracketPairGuide.background1#69709820
- editorBracketPairGuide.background2#69709820
- editorBracketPairGuide.background3#69709820
- editorBracketPairGuide.background4#69709820
- editorBracketPairGuide.background5#69709820
- editorBracketPairGuide.background6#69709820
- editorCodeLens.foreground#4b5673
- editorCursor.foreground#c792ea
- editorError.foreground#f78c6c
- editorGroup.border#00000000
- editorGroupHeader.tabsBackground#0d0e10
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#addb67
- editorGutter.background#0d0e10
- editorGutter.deletedBackground#f78c6c
- editorGutter.modifiedBackground#ecc48d
- editorHint.foreground#addb67
- editorHoverWidget.background#0d0e10
- editorHoverWidget.border#00000000
- editorIndentGuide.activeBackground1#2a2d4a
- editorIndentGuide.background1#161828
- editorInfo.foreground#7fdbca
- editorLineNumber.activeForeground#4b5673
- editorLineNumber.foreground#232840
- editorLink.activeForeground#7fdbca
- editorOverviewRuler.addedForeground#addb6780
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#f78c6c80
- editorOverviewRuler.errorForeground#f78c6c
- editorOverviewRuler.findMatchForeground#c792ea80
- editorOverviewRuler.modifiedForeground#ecc48d80
- editorOverviewRuler.warningForeground#ecc48d
- editorRuler.foreground#161828
- editorSuggestWidget.background#0d0e10
- editorSuggestWidget.border#00000000
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#c792ea
- editorSuggestWidget.selectedBackground#1a1e30
- editorWarning.foreground#ecc48d
- editorWhitespace.foreground#1e2030
- editorWidget.background#0d0e10
- editorWidget.border#00000000
- errorForeground#f78c6c
- focusBorder#c792ea
- foreground#d6deeb
- gitDecoration.addedResourceForeground#addb67
- gitDecoration.conflictingResourceForeground#c792ea
- gitDecoration.deletedResourceForeground#f78c6c
- gitDecoration.ignoredResourceForeground#3a4060
- gitDecoration.modifiedResourceForeground#ecc48d
- gitDecoration.untrackedResourceForeground#7fdbca
- icon.foreground#637090
- input.background#111320
- input.border#00000000
- input.foreground#d6deeb
- input.placeholderForeground#3a4060
- inputOption.activeBackground#c792ea18
- inputOption.activeBorder#c792ea
- inputValidation.errorBackground#f78c6c18
- inputValidation.errorBorder#f78c6c
- inputValidation.infoBackground#7fdbca18
- inputValidation.infoBorder#7fdbca
- inputValidation.warningBackground#ecc48d18
- inputValidation.warningBorder#ecc48d
- list.activeSelectionBackground#529BEF24
- list.activeSelectionForeground#d6deeb
- list.errorForeground#f78c6c
- list.focusBackground#529BEF24
- list.focusForeground#d6deeb
- list.highlightForeground#c792ea
- list.hoverBackground#131728
- list.hoverForeground#d6deeb
- list.inactiveSelectionBackground#529BEF18
- list.inactiveSelectionForeground#8090b0
- list.warningForeground#ecc48d
- menu.background#0d0e10
- menu.foreground#d6deeb
- menu.selectionBackground#1a1e30
- menu.selectionForeground#d6deeb
- menu.separatorBackground#232840
- minimapGutter.addedBackground#addb67
- minimapGutter.deletedBackground#f78c6c
- minimapGutter.modifiedBackground#ecc48d
- notificationLink.foreground#7fdbca
- notifications.background#0d0e10
- notifications.border#00000000
- notifications.foreground#d6deeb
- panel.background#0d0e10
- panel.border#00000000
- panelSection.border#00000000
- panelTitle.activeBorder#c792ea
- panelTitle.activeForeground#d6deeb
- panelTitle.inactiveForeground#3a4060
- peekView.border#00000000
- peekViewEditor.background#0d0e10
- peekViewEditor.matchHighlightBackground#c792ea22
- peekViewResult.background#0d0e10
- peekViewResult.matchHighlightBackground#c792ea22
- peekViewResult.selectionBackground#1a1e30
- peekViewTitle.background#0d0e10
- peekViewTitleDescription.foreground#637090
- peekViewTitleLabel.foreground#d6deeb
- progressBar.background#c792ea
- quickInput.background#0d0e10
- quickInput.foreground#d6deeb
- quickInputList.focusBackground#529BEF24
- quickInputList.focusForeground#d6deeb
- quickInputTitle.background#0d0e10
- scrollbar.shadow#00000080
- scrollbarSlider.activeBackground#42487880
- scrollbarSlider.background#23284040
- scrollbarSlider.hoverBackground#32386060
- selection.background#2a2d4a66
- sideBar.background#0d0e10
- sideBar.border#00000000
- sideBar.foreground#637090
- sideBarSectionHeader.background#0d0e10
- sideBarSectionHeader.border#00000000
- sideBarSectionHeader.foreground#526080
- sideBarTitle.foreground#4b5673
- statusBar.background#0d0e10
- statusBar.border#00000000
- statusBar.debuggingBackground#0d0e10
- statusBar.debuggingForeground#526080
- statusBar.foreground#526080
- statusBar.noFolderBackground#0d0e10
- statusBarItem.activeBackground#232840
- statusBarItem.errorBackground#f78c6c
- statusBarItem.hoverBackground#1a1e30
- statusBarItem.remoteBackground#c792ea
- statusBarItem.remoteForeground#0d0e10
- statusBarItem.warningBackground#ecc48d
- tab.activeBackground#0d0e10
- tab.activeBorder#c792ea
- tab.activeBorderTop#00000000
- tab.activeForeground#d6deeb
- tab.activeModifiedBorder#ecc48d
- tab.border#00000000
- tab.hoverBackground#0d0e10
- tab.inactiveBackground#0d0e10
- tab.inactiveForeground#3a4060
- tab.lastPinnedBorder#00000000
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedHoverBackground#0d0e10
- terminal.ansiBlack#1e2030
- terminal.ansiBlue#82aaff
- terminal.ansiBrightBlack#4b5673
- terminal.ansiBrightBlue#9dbfff
- terminal.ansiBrightCyan#97ede0
- terminal.ansiBrightGreen#c5f080
- terminal.ansiBrightMagenta#d9a8f5
- terminal.ansiBrightRed#ff9a7a
- terminal.ansiBrightWhite#e8f0ff
- terminal.ansiBrightYellow#ffd4a0
- terminal.ansiCyan#7fdbca
- terminal.ansiGreen#addb67
- terminal.ansiMagenta#c792ea
- terminal.ansiRed#f78c6c
- terminal.ansiWhite#d6deeb
- terminal.ansiYellow#ecc48d
- terminal.background#0d0e10
- terminal.foreground#d6deeb
- terminalCursor.foreground#c792ea
- textLink.activeForeground#d6deeb
- textLink.foreground#7fdbca
- titleBar.activeBackground#0d0e10
- titleBar.activeForeground#637090
- titleBar.border#00000000
- titleBar.inactiveBackground#0d0e10
- titleBar.inactiveForeground#323850
- widget.shadow#00000080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| variable, variable.other, variable.other.readwrite, variable.other.constant, variable.other.local, variable.other.object.property, variable.other.constant.property.js, variable.other.constant.property.ts, meta.definition.variable variable.other.readwrite | #d6deeb | — |
| variable.other.object, variable.other.property, support.variable.property, meta.property-name support.type.property-name, meta.object-literal.key | #ffcb8b | — |
| variable.parameter, meta.function.parameters variable, meta.parameters variable | #addb67 | — |
| variable.language, variable.language.this, variable.language.self, variable.language.super | #7fdbca | — |
| comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment | #4b5673 | italic |
| punctuation, punctuation.definition.block, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section, meta.brace.round, meta.brace.square, meta.brace.curly | #697098 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.spread, keyword.operator.rest, keyword.operator.optional, keyword.operator.ternary | #697098 | — |
| meta.type.parameters, punctuation.definition.typeparameters | #697098 | — |
| punctuation.definition.string, punctuation.definition.template-expression | #ddb47d | — |
| string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.backtick, string.template | #ecc48d | — |
| string.regexp, constant.other.character-class.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp | #ecc48d | — |
| keyword.control, keyword.control.import, keyword.control.export, keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.new, keyword.control.async, keyword.other.new, keyword.operator.new, keyword.operator.expression.new, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.void, keyword.operator.expression.delete | #c792ea | — |
| storage.type, storage.type.js, storage.type.ts, storage.type.function, storage.type.class, storage.type.arrow, storage.type.function.arrow | #c792ea | — |
| storage.modifier, storage.modifier.async, keyword.control.async, keyword.control.await | #c792ea | — |
| keyword.operator.arrow | #c792ea | — |
| keyword.control.from, keyword.operator.expression.of, keyword.operator.expression.in, keyword.operator.expression.from, keyword.other.of, keyword.control.of, keyword.control.as, keyword.other.as | #89ddff | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal | #f78c6c | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan | #f78c6c | — |
| entity.name.function, meta.function entity.name.function, meta.definition.method entity.name.function | #82aaff | — |
| meta.function-call entity.name.function, meta.function-call.generic entity.name.function, meta.function-call.method entity.name.function, entity.name.function.member, meta.method-call entity.name.function | #82aaff | — |
| support.function, support.function.console | #82aaff | — |
| support.function.dom, support.function.global, support.function.misc | #7fdbca | — |
| entity.name.type, entity.name.type.class, entity.name.class, entity.other.inherited-class, support.class, support.type | #ffcb8b | — |
| support.type.primitive, support.type.builtin, entity.name.type.interface, entity.name.type.type-alias, entity.name.type.enum, keyword.operator.type.annotation | #ffcb8b | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #89ddff | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, support.class.component | #c792ea | — |
| entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.html | #89ddff | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css | #c792ea | — |
| support.type.property-name.css, meta.property-name.css | #89ddff | — |
| support.constant.property-value.css, meta.property-value.css | #ecc48d | — |
| keyword.other.unit.css, constant.numeric.css | #f78c6c | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #c792ea | bold |
| markup.bold | #ecc48d | bold |
| markup.italic | #7fdbca | italic |
| markup.inline.raw | #addb67 | — |
| markup.underline.link, string.other.link | #82aaff | — |
| markup.quote | #4b5673 | italic |
| invalid, invalid.deprecated | #f78c6c | strikethrough |
| support.class.console, support.variable.console, variable.other.object.console, support.class.console.js, variable.other.object.process, support.variable.property.process | #7fdbca | — |