Dark Mode
Publisher: Phil SinatraThemes in package: 3
A VSCode theme based on dark mode
Color themes
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#157dcd
- activityBarBadge.foreground#f4f4f4
- badge.background#157dcd
- badge.foreground#f4f4f4
- button.background#6d6d6d
- button.foreground#e8e8e8
- button.hoverBackground#616161
- descriptionForeground#2e2e2e
- dropdown.background#f4f4f4
- dropdown.border#bfbfbf
- dropdown.foreground#000000
- dropdown.listBackground#000000
- editor.background#292a2f
- editor.findMatchBackground#7b784b
- editor.findMatchBorder#ebd12a
- editor.findMatchHighlightBackground#6e6e6e4d
- editor.findRangeHighlightBackground#b4b4b44d
- editor.foreground#f4f4f4
- editor.lineHighlightBackground#00000012
- editor.selectionBackground#334052
- editorCursor.background#111111
- editorCursor.foreground#f4f4f4
- editorGroup.border#010101
- editorGroup.dropBackground#0369d922
- editorGroup.emptyBackground#292a30
- editorGroupHeader.noTabsBackground#2c2d2f
- editorGroupHeader.tabsBackground#2c2d2f
- editorGroupHeader.tabsBorder#373737
- editorIndentGuide.activeBackground#616161
- editorIndentGuide.background#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#f4f4f4
- 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#f4f4f4
- notificationLink.foreground#f4f4f4
- notifications.background#2d2f32
- notifications.border#111111
- notifications.foreground#f4f4f4
- notificationToast.border#111111
- peekView.border#bfbfbf
- peekViewEditor.background#2d2f32
- peekViewEditor.matchHighlightBackground#19354900
- peekViewEditorGutter.background#1e1e1e
- peekViewResult.background#111111
- peekViewResult.fileForeground#aaa
- peekViewResult.lineForeground#f4f4f4
- peekViewResult.matchHighlightBackground#1e1e1e
- peekViewResult.selectionBackground#2d2f32
- peekViewResult.selectionForeground#f4f4f4
- peekViewTitle.background#111111
- peekViewTitleDescription.foreground#aaa
- peekViewTitleLabel.foreground#f4f4f4
- 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#2c2d2f
- sideBar.border#2c2d2f
- sideBar.dropBackground#f9f5f5
- sideBar.foreground#f4f4f4
- sideBarSectionHeader.background#2d2f32
- sideBarSectionHeader.foreground#e8e8e8
- sideBarTitle.foreground#d9d9d9
- statusBar.background#1e1e1e
- statusBar.border#1e1e1e
- statusBar.foreground#d9d9d9
- statusBar.noFolderBackground#1e1e1e
- tab.activeBackground#345174
- tab.activeBorder#ffffff00
- tab.activeBorderTop#1c5aa3
- tab.activeForeground#f4f4f4
- tab.border#373737
- tab.inactiveBackground#2c2d2f
- tab.inactiveForeground#f4f4f4
- tab.unfocusedActiveBorder#ffffff00
- tab.unfocusedActiveBorderTop#ffffff00
- terminal.ansiBlack#000000
- terminal.ansiBlue#0088ff
- terminal.ansiBrightBlack#0050A4
- terminal.ansiBrightBlue#0088ff
- terminal.ansiBrightCyan#80fcff
- 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#f4f4f4
- terminal.ansiYellow#ffc600
- terminal.background#27292d
- terminal.foreground#f4f4f4
- terminalCursor.background#f4f4f4
- terminalCursor.foreground#f4f4f4
- titleBar.activeBackground#2c2d2f
- widget.shadow#373737
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #f4f4f4 | — |
| comment, punctuation.definition.comment | #7f8c98 | italic |
| string | #ff8170 | — |
| constant.numeric | #f977ae | — |
| constant.language | #f977ae | — |
| constant.character, constant.other | #f977ae | — |
| variable | #f4f4f4 | — |
| keyword | #f977ae | — |
| storage | #7ae3f7 | |
| storage.type | #f977ae | — |
| entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type, entity.other.inherited-class | #7ae3f7 | — |
| variable.parameter | #e1efff | — |
| variable.language | — | italic |
| entity.name.tag | #7ae3f7 | |
| entity.other.attribute-name | #f977ae | italic |
| support.function | #7ae3f7 | |
| support.constant | #7ae3f7 | |
| support.type, support.class | #7ae3f7 | — |
| support.other.variable | #010101 | |
| invalid | #adcf38 | |
| invalid.deprecated | #adcf38 | — |
| support.type.property-name.css | #99c6ca | italic |
| text.html.basic | #f4f4f4 | — |
| text.html.basic entity.name | #9effff | — |
| meta.toc-list.id.html | #A5FF90 | — |
| text.html.basic entity.other | #ffc600 | italic |
| meta.tag.metadata.script.html entity.name.tag.html | #ffc600 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #92fc79 | — |
| support.variable.dom.js | #e1efff | — |
| keyword.operator.assignment.js | #f4f4f4 | — |
| punctuation.definition.block.js | #f4f4f4 | — |
| variable.parameter.js | #e1efff | — |
| entity.name.type.js | #e1efff | — |
| punctuation.accessor.js | #f4f4f4 | — |
| support.variable.property.dom.js | #f4f4f4 | — |
| punctuation.terminator.statement.js | #f4f4f4 | — |
| variable.language, entity.name.type.class.js | #e1efff | — |
| entity.name.type.module.js | #f4f4f4 | — |
| 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 | #FFB454 | — |
| entity.name.tag | #e1efff | — |
| source.css support, source.stylus support | #a5ff90 | — |
| source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant | #a79df7 | — |
| source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string | #a79df7 | — |
| source.css variable, source.stylus variable | #9effff | — |
| support.type.property-name.json | #f977ae | — |
| punctuation.definition.dictionary.begin.json | #f4f4f4 | — |
| 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 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...