Demon Dark Pro
Publisher: mrsiddharthsolankiThemes in package: 2
A sleek, modern dark theme for Visual Studio Code with vibrant syntax highlighting.
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#0f0f0f
- activityBar.border#1a1a1a
- activityBar.foreground#e8e8e8
- activityBar.inactiveForeground#666666
- activityBarBadge.background#ff4757
- activityBarBadge.foreground#ffffff
- button.background#d4845c
- button.foreground#ffffff
- button.hoverBackground#c97650
- diffEditor.border#1a1a1a
- diffEditor.insertedTextBackground#2ed57330
- diffEditor.removedTextBackground#ff475730
- dropdown.background#1a1a1a
- dropdown.border#333333
- dropdown.foreground#e8e8e8
- editor.background#0d0d0d
- editor.findMatchBackground#4d4d4d
- editor.findMatchHighlightBackground#3d3d3d80
- editor.foreground#e8e8e8
- editor.inactiveSelectionBackground#2d2d2d80
- editor.lineHighlightBackground#1a1a1a
- editor.selectionBackground#3d3d3d
- editor.wordHighlightBackground#3d3d3d80
- editor.wordHighlightStrongBackground#4d4d4d80
- editorBracketMatch.background#4d4d4d
- editorBracketMatch.border#ff6b5b
- editorCursor.foreground#ff6b5b
- editorError.foreground#ff6b7d
- editorHint.foreground#d9a8ff
- editorIndentGuide.activeBackground1#666666
- editorIndentGuide.background1#333333
- editorInfo.foreground#26d0ce
- editorLineNumber.activeForeground#ff6b5b
- editorLineNumber.foreground#666666
- editorWarning.foreground#c9a87c
- editorWhitespace.foreground#2d2d2d
- errorForeground#ff6b7d
- gitDecoration.conflictingResourceForeground#d9a8ff
- gitDecoration.deletedResourceForeground#ff4757
- gitDecoration.ignoredResourceForeground#666666
- gitDecoration.modifiedResourceForeground#c9a87c
- gitDecoration.untrackedResourceForeground#2ed573
- input.background#1a1a1a
- input.border#333333
- input.foreground#e8e8e8
- input.placeholderForeground#666666
- inputOption.activeBackground#c9a87c40
- inputOption.activeBorder#c9a87c
- list.activeSelectionBackground#3d3d3d
- list.activeSelectionForeground#ffffff
- list.errorForeground#ff6b7d
- list.focusBackground#3d3d3d
- list.highlightForeground#ff6b5b
- list.hoverBackground#1a1a1a
- list.inactiveSelectionBackground#2d2d2d
- list.inactiveSelectionForeground#e8e8e8
- list.warningForeground#c9a87c
- menu.background#111111
- menu.foreground#e8e8e8
- menu.selectionBackground#3d3d3d
- menu.selectionForeground#ffffff
- menubar.selectionBackground#3d3d3d
- menubar.selectionForeground#e8e8e8
- minimap.background#0f0f0f
- minimap.findMatchHighlight#ff475750
- minimap.selectionHighlight#3d3d3d80
- notificationCenterHeader.background#2d1b1b
- notifications.background#1a1a1a
- notifications.border#333333
- notifications.foreground#e8e8e8
- notificationsErrorIcon.foreground#ff4757
- notificationsInfoIcon.foreground#26d0ce
- notificationsWarningIcon.foreground#c9a87c
- panel.background#111111
- panel.border#1a1a1a
- panelTitle.activeBorder#ff6b5b
- panelTitle.activeForeground#e8e8e8
- panelTitle.inactiveForeground#888888
- peekViewEditor.background#111111
- peekViewResult.background#0f0f0f
- peekViewTitle.background#3d3d3d
- progressBar.background#d4845c
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#666666
- scrollbarSlider.background#33333350
- scrollbarSlider.hoverBackground#55555570
- settings.focusedRowBackground#ff475740
- settings.headerForeground#ff4757
- settings.modifiedItemIndicator#ff4757
- settings.rowHoverBackground#ff475730
- settings.textInputBorder#ff4757
- settings.textInputForeground#ffffff
- sideBar.background#111111
- sideBar.border#1a1a1a
- sideBar.foreground#cccccc
- sideBarSectionHeader.background#1a1a1a
- sideBarSectionHeader.foreground#e8e8e8
- sideBarTitle.foreground#e8e8e8
- statusBar.background#0f0f0f
- statusBar.border#1a1a1a
- statusBar.debuggingBackground#ff4757
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#cccccc
- statusBar.noFolderBackground#0f0f0f
- statusBarItem.activeBackground#4d4d4d
- statusBarItem.hoverBackground#3d3d3d
- tab.activeBackground#1a1a1a
- tab.activeBorder#ff6b5b
- tab.activeForeground#e8e8e8
- tab.border#1a1a1a
- tab.hoverBackground#1a1a1a
- tab.inactiveBackground#111111
- tab.inactiveForeground#888888
- tab.unfocusedActiveBackground#1a1a1a
- tab.unfocusedActiveForeground#cccccc
- terminal.ansiBlack#0a0a0a
- terminal.ansiBlue#3742fa
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#5352ed
- terminal.ansiBrightCyan#40c8c6
- terminal.ansiBrightGreen#7bed9f
- terminal.ansiBrightMagenta#c44569
- terminal.ansiBrightRed#ff6b7d
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#c9a87c
- terminal.ansiCyan#26d0ce
- terminal.ansiGreen#2ed573
- terminal.ansiMagenta#d9a8ff
- terminal.ansiRed#ff4757
- terminal.ansiWhite#e8e8e8
- terminal.ansiYellow#c9a87c
- terminal.background#0a0a0a
- terminal.foreground#e8e8e8
- terminal.selectionBackground#4d4d4d
- terminal.selectionForeground#ffffff
- terminalCursor.background#0a0a0a
- terminalCursor.foreground#ff4757
- titleBar.activeBackground#0a0a0a
- titleBar.activeForeground#e8e8e8
- titleBar.border#1a1a1a
- titleBar.inactiveBackground#0a0a0a
- titleBar.inactiveForeground#666666
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #888888 | — |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.important | #ff6b5b | — |
| storage.type.js, storage.type.ts, storage.type.tsx, storage.modifier.ts, keyword.declaration | #ff6b5b | — |
| storage.modifier.access, keyword.other.visibility, keyword.other.access-modifier | #a0a0a0 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #ff6b7d | — |
| string, string.quoted, string.template | #2ed573 | — |
| constant.character.escape, string.regexp | #7bed9f | — |
| constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined, constant.other, constant.character.escape | #d9a8ff | — |
| variable, variable.other, meta.definition.variable | #e0e0e0 | — |
| variable.parameter, meta.parameter variable, variable.other.js | #f0f0f0 | — |
| entity.name.function, meta.function-call, support.function, keyword.other.special-method | #d4845c | bold |
| entity.name.class, entity.name.type.class, support.class, entity.name.type | #26d0ce | — |
| entity.name.function.member, meta.method-call, meta.method | #5ac2dc | — |
| variable.other.property, variable.other.object.property, meta.property-name | #40c8c6 | — |
| storage.type, entity.name.type, support.type, keyword.type | #5352ed | — |
| entity.name.tag, punctuation.definition.tag | #d4845c | — |
| entity.other.attribute-name | #c9a87c | — |
| entity.other.attribute-name.class.css | #26d0ce | — |
| entity.other.attribute-name.id.css | #d9a8ff | — |
| support.type.property-name.css | #40c8c6 | — |
| support.type.property-name.json | #40c8c6 | — |
| markup.heading, entity.name.section.markdown | #d4845c | bold |
| markup.bold | #ff4757 | bold |
| markup.italic | #d9a8ff | italic |
| markup.inline.raw, markup.fenced_code | #2ed573 | — |
| markup.underline.link, string.other.link | #26d0ce | — |
| invalid, invalid.illegal | #ff6b7d | bold underline |
| invalid.deprecated | #c9a87c | strikethrough |
| keyword.control.import, keyword.control.export, keyword.control.from | #ff6b7d | bold |
| variable.language.this, variable.language.super | #c78dff | italic |
| meta.decorator, entity.name.function.decorator | #ff6b5b | — |
| entity.name.function.decorator.python, punctuation.definition.decorator.python | #ff6b7d | — |
| variable.language.special.self.python, variable.parameter.function.language.special.self.python | #c78dff | italic |
| support.function.magic.python | #d4a5ff | bold italic |
| constant.other, constant.language, variable.other.constant | #d4a5ff | — |
| meta.object-literal.key, string.unquoted.label | #40c8c6 | — |
| support.function.builtin, support.function.console | #c9a87c | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #ff6b7d | — |
| string.regexp, string.regexp keyword.operator | #7bed9f | italic |
| entity.name.tag.jsx, support.class.component.jsx | #26d0ce | — |
| entity.other.attribute-name.jsx | #ffa502 | italic |
| entity.name.type.interface | #5352ed | bold italic |
| entity.name.type.alias | #5352ed | italic |
| entity.name.type.parameter | #a0c4ff | italic |
| keyword.other.sql, keyword.other.DML.sql | #d4845c | bold |
| entity.name.tag.yaml | #40c8c6 | — |
| entity.name.section.group-title.ini | #d4845c | bold |
| punctuation.definition.tag.begin, punctuation.definition.tag.end | #ff6b7d | — |
| punctuation.section.embedded | #ff6b7d | — |
| variable.parameter, meta.function.parameters, variable.parameter.function | #d9a8ff | italic |
| variable.other.enummember | #d9a8ff | — |
| keyword.type.ts, storage.type.ts, keyword.type.java, keyword.type.cpp | #d9a8ff | bold italic |
| punctuation.definition.array, punctuation.definition.collection | #c9a87c | — |
| entity.name.function.constructor, meta.function.constructor | #d4845c | bold |
| support.function.builtin.js, support.function.builtin.ts | #26d0ce | bold italic |
| variable.other.readwrite, variable.other.object, meta.variable-binding | #c0c0c0 | — |
| storage.type.arrow.js, keyword.operator.arrow | #ff6b7d | bold |
| keyword.control.async, keyword.control.await | #ff4757 | bold |
| meta.function.async meta.function.parameters variable.parameter | #b0d0ff | italic |
| storage.type.enum, keyword.declaration.enum | #d9a8ff | bold |
| meta.object.member meta.object-literal.key | #5ac2dc | — |
| variable.other.destructuring, meta.destructuring | #a0c4ff | — |
| variable.other.env, string.other.identifier.env | #ff4757 | bold |
| string.unquoted.env | #ffffff | bold |
| support.type.primitive.schema, keyword.other.schema | #a0c4ff | — |
| keyword.other.modifier.schema | #c9a87c | — |
| comment.block.documentation variable, punctuation.definition.comment variable | #ffa502 | italic |
| entity.name.namespace, entity.name.scope-resolution | #26d0ce | italic |
| keyword.control.async, keyword.control.await | #ff6b7d | bold italic |
| storage.type.function.arrow | #ff6b7d | — |
| keyword.control.flow, keyword.control.loop, keyword.control.conditional | #ff6b5b | — |
| keyword.getter, keyword.setter | #c9a87c | — |