Perfect Dark Theme
Publisher: Gourab SarkarThemes in package: 1
A sleek dark theme optimized for night coding 🦉. Features high contrast colors and enhanced readability, inspired by Next.js documentation theme.
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.activeBorder#ffffff
- activityBar.background#000000
- activityBar.border#2a2a2a
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#999999
- activityBarBadge.background#ffffff
- activityBarBadge.foreground#000000
- badge.background#ffffff
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#bbbbbb
- breadcrumbPicker.background#000000
- button.background#ffffff
- button.foreground#000000
- button.hoverBackground#e0e0e0
- button.secondaryBackground#333333
- button.secondaryForeground#bbbbbb
- button.secondaryHoverBackground#444444
- checkbox.background#000000
- checkbox.border#444444
- commandCenter.activeBackground#111111
- commandCenter.activeBorder#2a2a2a
- commandCenter.background#111111
- commandCenter.border#2a2a2a
- commandCenter.debuggingBackground#444444
- commandCenter.inactiveBorder#333333
- debugToolBar.background#000000
- descriptionForeground#ffffff
- diffEditor.insertedTextBackground#58c76055
- diffEditor.removedTextBackground#f05b8d55
- dropdown.background#000000
- dropdown.border#444444
- dropdown.foreground#bbbbbb
- dropdown.listBackground#000000
- editor.background#0a0a0a
- editor.findMatchBackground#f9990288
- editor.findMatchHighlightBackground#f9990244
- editor.focusedStackFrameHighlightBackground#444444
- editor.foldBackground#ffffff33
- editor.foreground#ffffff
- editor.inactiveSelectionBackground#ffffff33
- editor.lineHighlightBackground#ffffff33
- editor.linkedEditingBackground#ffffff33
- editor.selectionBackground#ffffff33
- editor.selectionHighlightBackground#ffffff33
- editor.selectionHighlightBorder#ffffff33
- editor.stackFrameHighlightBackground#f9990244
- editor.wordHighlightBackground#ffffff33
- editor.wordHighlightBorder#ffffff33
- editor.wordHighlightStrongBackground#ffffff44
- editor.wordHighlightStrongBorder#ffffff44
- editorBracketMatch.background#ffffff33
- editorBracketMatch.border#ffffff33
- editorCursor.foreground#ffffff
- editorGroup.border#2a2a2a
- editorGroupHeader.tabsBackground#000000
- editorGroupHeader.tabsBorder#2a2a2a
- editorGutter.addedBackground#58c760
- editorGutter.deletedBackground#f05b8d
- editorGutter.modifiedBackground#f99902
- editorHoverWidget.background#000000
- editorHoverWidget.foreground#bbbbbb
- editorIndentGuide.activeBackground1#444444
- editorIndentGuide.background1#333333
- editorInlayHint.background#111111
- editorInlayHint.foreground#bbbbbb
- editorLineNumber.activeForeground#bbbbbb
- editorLineNumber.foreground#999999
- editorOverviewRuler.border#2a2a2a
- editorOverviewRuler.errorForeground#f05b8d
- editorRuler.foreground#333333
- editorWhitespace.foreground#999999
- editorWidget.background#000000
- editorWidget.border#444444
- errorForeground#f56464
- errorLens.errorBackground#f5646455
- errorLens.errorForeground#f56464
- errorLens.hintBackground#62a6ff55
- errorLens.hintForeground#62a6ff
- errorLens.infoBackground#62a6ff55
- errorLens.infoForeground#62a6ff
- errorLens.warningBackground#f9990255
- errorLens.warningForeground#f99902
- focusBorder#444444
- foreground#bbbbbb
- gitDecoration.addedResourceForeground#58c760
- gitDecoration.conflictingResourceForeground#f99902
- gitDecoration.deletedResourceForeground#f56464
- gitDecoration.ignoredResourceForeground#777777
- gitDecoration.modifiedResourceForeground#f99902
- gitDecoration.submoduleResourceForeground#ffffff
- gitDecoration.untrackedResourceForeground#58c760
- icon.foreground#bbbbbb
- input.background#000000
- input.border#444444
- input.foreground#bbbbbb
- input.placeholderForeground#999999
- list.activeSelectionBackground#ffffff33
- list.activeSelectionForeground#ffffff
- list.errorForeground#f05b8d
- list.focusBackground#ffffff33
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#ffffff33
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#ffffff33
- list.inactiveSelectionBackground#ffffff33
- list.inactiveSelectionForeground#bbbbbb
- list.warningForeground#f99902
- minimap.selectionHighlight#ffffff44
- notificationCenterHeader.background#000000
- notificationCenterHeader.foreground#bbbbbb
- notifications.background#000000
- notifications.border#444444
- notifications.foreground#ffffff
- notificationsErrorIcon.foreground#f05b8d
- notificationsInfoIcon.foreground#62a6ff
- notificationsWarningIcon.foreground#f99902
- panel.background#000000
- panel.border#2a2a2a
- panelInput.border#444444
- panelTitle.activeBorder#ffffff
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#bbbbbb
- peekView.border#444444
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#f9990255
- peekViewResult.background#000000
- peekViewResult.matchHighlightBackground#f9990255
- peekViewTitle.background#000000
- pickerGroup.border#444444
- pickerGroup.foreground#ffffff
- progressBar.background#ffffff
- quickInput.background#000000
- quickInput.foreground#bbbbbb
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#555555
- scrollbarSlider.background#444444
- scrollbarSlider.hoverBackground#666666
- selection.background#ffffff33
- settings.headerForeground#ffffff
- settings.modifiedItemIndicator#ffffff
- sideBar.background#000000
- sideBar.border#2a2a2a
- sideBar.foreground#bbbbbb
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#2a2a2a
- sideBarSectionHeader.foreground#bbbbbb
- sideBarTitle.foreground#bbbbbb
- statusBar.background#000000
- statusBar.border#2a2a2a
- statusBar.debuggingBackground#ffffff
- statusBar.debuggingForeground#000000
- statusBar.foreground#bbbbbb
- statusBar.noFolderBackground#000000
- statusBarItem.prominentBackground#111111
- tab.activeBackground#111111
- tab.activeBorder#111111
- tab.activeBorderTop#ffffff
- tab.activeForeground#ffffff
- tab.border#2a2a2a
- tab.hoverBackground#222222
- tab.inactiveBackground#000000
- tab.inactiveForeground#bbbbbb
- tab.unfocusedActiveBorder#2a2a2a
- tab.unfocusedActiveBorderTop#444444
- tab.unfocusedHoverBackground#222222
- terminal.ansiBlack#000000
- terminal.ansiBlue#62a6ff
- terminal.ansiBrightBlack#676767
- terminal.ansiBrightBlue#62a6ff
- terminal.ansiBrightCyan#14cbb7
- terminal.ansiBrightGreen#58c760
- terminal.ansiBrightMagenta#b675f1
- terminal.ansiBrightRed#f56464
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f99902
- terminal.ansiCyan#14cbb7
- terminal.ansiGreen#58c760
- terminal.ansiMagenta#b675f1
- terminal.ansiRed#f56464
- terminal.ansiWhite#bbbbbb
- terminal.ansiYellow#f99902
- terminal.foreground#ffffff
- terminal.selectionBackground#ffffff33
- textBlockQuote.background#111111
- textBlockQuote.border#ffffff
- textCodeBlock.background#111111
- textLink.activeForeground#62a6ff
- textLink.foreground#62a6ff
- textPreformat.foreground#ffffff
- textSeparator.foreground#bbbbbb
- titleBar.activeBackground#000000
- titleBar.activeForeground#bbbbbb
- titleBar.border#2a2a2a
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#999999
- tree.indentGuidesStroke#444444
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #bbbbbb | — |
| entity.other.attribute-name | #b675f1 | — |
| constant, entity.name.constant, variable.other.constant, variable.language, entity | #62a6ff | — |
| entity.name, meta.export.default, meta.definition.variable | #62a6ff | — |
| variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression, meta.template.expression, string.other.begin.yaml, string.other.end.yaml | #ffffff | — |
| entity.name.function, support.type.primitive | #b675f1 | — |
| support.class.component | #62a6ff | — |
| keyword | #f05b8d | — |
| keyword.operator, storage.type.function.arrow, punctuation.separator.key-value.css, entity.name.tag.yaml, punctuation.separator.key-value.mapping.yaml | #f05b8d | — |
| storage, storage.type | #f05b8d | — |
| storage.modifier.package, storage.modifier.import, storage.type.java | #ffffff | — |
| string, punctuation.definition.string, string punctuation.section.embedded source, entity.name.tag | #58c760 | — |
| support | #f05b8d | — |
| support.type.object.module, variable.other.object, support.type.property-name.css | #62a6ff | — |
| meta.property-name | #62a6ff | — |
| variable | #ffffff | — |
| variable.other | #ffffff | — |
| invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented | #f05b8d | — |
| carriage-return | #111111 | — |
| message.error | #f05b8d | — |
| string source | #ffffff | — |
| string variable | #62a6ff | — |
| source.regexp, string.regexp | #62a6ff | — |
| string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition | #62a6ff | — |
| string.regexp constant.character.escape | #62a6ff | bold |
| support.constant, support.variable | #62a6ff | — |
| meta.module-reference | #62a6ff | — |
| punctuation.definition.list.begin.markdown | #f99902 | — |
| markup.heading, markup.heading entity.name | #62a6ff | bold |
| markup.quote | #62a6ff | — |
| markup.italic | #ffffff | italic |
| markup.bold | #ffffff | bold |
| markup.raw | #62a6ff | — |
| markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted | #f05b8d | — |
| markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted | #58c760 | — |
| markup.changed, punctuation.definition.changed | #f99902 | — |
| markup.ignored, markup.untracked | #777777 | — |
| meta.diff.range | #b675f1 | bold |
| meta.diff.header | #62a6ff | — |
| meta.separator | #62a6ff | bold |
| meta.output | #62a6ff | — |
| meta.export.default | #ffffff | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #ffffff | — |
| brackethighlighter.unmatched | #f05b8d | — |
| constant.other.reference.link, string.other.link | #62a6ff | underline |
| token.info-token | #6796E6 | — |
| token.warn-token | #f99902 | — |
| token.error-token | #f05b8d | — |
| token.debug-token | #b675f1 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...