Base16 Dracula Theme
Publisher: Francisco-BTThemes in package: 2
Forked Base16 dark theme with Dracula accents, inspired by Rosé Pine and base16-nvim.
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#232136
- activityBar.foreground#e9e9f4
- activityBarBadge.background#b45bcf
- activityBarBadge.foreground#f7f7fb
- button.background#b45bcf
- button.foreground#f7f7fb
- button.hoverBackground#c77bdf
- button.secondaryBackground#4d4f68
- button.secondaryForeground#e9e9f4
- button.secondaryHoverBackground#626483
- diffEditor.border#232136
- diffEditor.diagonalFill#4d4f68
- diffEditor.insertedLineBackground#ebff8740
- diffEditor.insertedTextBackground#ebff8760
- diffEditor.removedLineBackground#ea51b240
- diffEditor.removedTextBackground#ea51b260
- diffEditor.unchangedCodeBackground#3a3c4e
- diffEditor.unchangedRegionBackground#3a3c4e
- diffEditorGutter.insertedLineBackground#ebff8740
- diffEditorGutter.removedLineBackground#ea51b240
- diffEditorOverview.insertedForeground#ebff87
- diffEditorOverview.removedForeground#ea51b2
- dropdown.background#3a3c4e
- dropdown.border#4d4f68
- dropdown.foreground#e9e9f4
- editor.background#232136
- editor.findMatchBackground#b45bcf55
- editor.findMatchHighlightBackground#b45bcf33
- editor.foreground#e9e9f4
- editor.inactiveSelectionBackground#3a3c4e
- editor.lineHighlightBackground#3a3c4e66
- editor.selectionBackground#4d4f68
- editorBracketMatch.background#4d4f68
- editorBracketMatch.border#62d6e8
- editorCursor.foreground#62d6e8
- editorError.border#ea51b2
- editorError.foreground#ea51b2
- editorHint.border#a1efe4
- editorHint.foreground#a1efe4
- editorHoverWidget.background#3a3c4e
- editorHoverWidget.border#4d4f68
- editorHoverWidget.foreground#e9e9f4
- editorIndentGuide.activeBackground1#4d4f68
- editorIndentGuide.background1#3a3c4e
- editorInfo.border#62d6e8
- editorInfo.foreground#62d6e8
- editorLineNumber.activeForeground#62d6e8
- editorLineNumber.foreground#626483
- editorLink.activeForeground#62d6e8
- editorOverviewRuler.bracketMatchForeground#62d6e8
- editorOverviewRuler.errorForeground#ea51b280
- editorOverviewRuler.infoForeground#62d6e880
- editorOverviewRuler.warningForeground#00f76980
- editorSuggestWidget.background#3a3c4e
- editorSuggestWidget.border#4d4f68
- editorSuggestWidget.highlightForeground#62d6e8
- editorSuggestWidget.selectedBackground#626483
- editorWarning.border#00f769
- editorWarning.foreground#00f769
- editorWhitespace.foreground#62648366
- editorWidget.background#3a3c4e
- editorWidget.border#4d4f68
- extensionButton.background#4d4f68
- extensionButton.foreground#e9e9f4
- extensionButton.hoverBackground#626483
- extensionButton.prominentBackground#b45bcf
- extensionButton.prominentForeground#f7f7fb
- extensionButton.prominentHoverBackground#c77bdf
- focusBorder#62d6e8
- input.background#3a3c4e
- input.border#4d4f68
- input.foreground#f7f7fb
- input.placeholderForeground#e9e9f480
- inputOption.activeBackground#4d4f68
- inputOption.activeBorder#62d6e8
- inputValidation.errorBackground#ea51b233
- inputValidation.errorBorder#ea51b2
- inputValidation.infoBackground#62d6e833
- inputValidation.infoBorder#62d6e8
- inputValidation.warningBackground#b45bcf33
- inputValidation.warningBorder#b45bcf
- list.activeSelectionBackground#2b2f52
- list.activeSelectionForeground#f7f7fb
- list.errorForeground#ea51b2
- list.focusBackground#626483
- list.focusForeground#f7f7fb
- list.focusOutline#00000000
- list.highlightForeground#62d6e8
- list.hoverBackground#4d4f68
- list.hoverForeground#e9e9f4
- list.inactiveFocusOutline#00000000
- list.inactiveSelectionBackground#2b2f52
- list.inactiveSelectionForeground#e9e9f4
- list.warningForeground#00f769
- menu.background#232136
- menu.foreground#e9e9f4
- menu.selectionBackground#626483
- menu.selectionForeground#f7f7fb
- menu.separatorBackground#3a3c4e
- panel.background#232136
- peekView.border#4d4f68
- peekViewEditor.background#232136
- peekViewResult.background#232136
- peekViewResult.matchHighlightBackground#b45bcf33
- peekViewResult.selectionBackground#4d4f68
- peekViewTitle.background#232136
- problemsErrorIcon.foreground#ea51b2
- problemsInfoIcon.foreground#62d6e8
- problemsWarningIcon.foreground#00f769
- quickInput.background#232136
- quickInput.foreground#e9e9f4
- quickInputList.focusBackground#626483
- quickInputList.focusForeground#f7f7fb
- sideBar.background#232136
- sideBar.foreground#e9e9f4
- statusBar.background#232136
- statusBar.foreground#e9e9f4
- statusBarItem.hoverBackground#3a3c4e
- tab.activeBackground#232136
- tab.activeBorder#62d6e8
- tab.activeForeground#e9e9f4
- tab.border#232136
- tab.hoverBackground#3a3c4e
- tab.hoverForeground#e9e9f4
- tab.inactiveBackground#232136
- tab.inactiveForeground#626483
- tab.unfocusedActiveBorder#4d4f68
- terminal.ansiBlack#232136
- terminal.ansiBlue#62d6e8
- terminal.ansiBrightBlack#626483
- terminal.ansiBrightBlue#62d6e8
- terminal.ansiBrightCyan#a1efe4
- terminal.ansiBrightGreen#ebff87
- terminal.ansiBrightMagenta#b45bcf
- terminal.ansiBrightRed#ea51b2
- terminal.ansiBrightWhite#f7f7fb
- terminal.ansiBrightYellow#00f769
- terminal.ansiCyan#a1efe4
- terminal.ansiGreen#ebff87
- terminal.ansiMagenta#b45bcf
- terminal.ansiRed#ea51b2
- terminal.ansiWhite#e9e9f4
- terminal.ansiYellow#00f769
- terminal.background#232136
- terminal.foreground#e9e9f4
- textLink.activeForeground#a1efe4
- textLink.foreground#62d6e8
- titleBar.activeBackground#232136
- titleBar.activeForeground#e9e9f4
- titleBar.inactiveBackground#232136
- titleBar.inactiveForeground#626483
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6272a4 | — |
| string, punctuation.definition.string | #ebff87 | — |
| constant.numeric, constant.character, constant.other | #b45bcf | — |
| constant.language | #98d1ce | — |
| keyword, storage.type, storage.modifier | #b45bcf | — |
| entity.name.function, support.function, meta.function-call | #62d6e8 | — |
| entity.name.type, support.type | #00f769 | italic |
| variable, entity.name.variable | #e9e9f4 | — |
| meta.object-literal.key, meta.object-literal.key string.quoted, support.type.property, variable.other.property, variable.other.object.property | #ea51b2 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.tag.support.class.component, entity.name.tag.support.class.component.jsx, entity.name.tag.support.class.component.tsx, support.class.component.open.jsx, support.class.component.close.jsx, support.class.component.open.tsx, support.class.component.close.tsx | #62d6e8 | — |
| entity.name.tag, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.open.jsx, entity.name.tag.close.jsx, entity.name.tag.open.tsx, entity.name.tag.close.tsx | #b45bcf | — |
| entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.html | #00f769 | italic |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, meta.tag.jsx punctuation, meta.tag.tsx punctuation | #626483 | — |
| punctuation.section.embedded, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, meta.embedded.expression punctuation.section.embedded | #98d1ce | — |
| text.html.basic entity.name.tag.html, entity.name.tag.html | #b45bcf | — |
| text.html.basic entity.other.attribute-name.html, entity.other.attribute-name.html | #00f769 | italic |
| text.html.basic punctuation.definition.tag.begin.html, text.html.basic punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #626483 | — |
| text.html.basic string.quoted.double.html, text.html.basic string.quoted.single.html, string.quoted.double.html, string.quoted.single.html | #ebff87 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.structure.dictionary.key.json string.quoted.single, string.quoted.double.json punctuation.support.type.property-name.begin, string.quoted.double.json punctuation.support.type.property-name.end | #62d6e8 | — |
| constant.language.json, constant.language.jsonc | #98d1ce | — |
| text.html.markdown entity.name.section.markdown, text.html.markdown heading.1.markdown, text.html.markdown heading.2.markdown, text.html.markdown heading.3.markdown, text.html.markdown heading.4.markdown, text.html.markdown heading.5.markdown, text.html.markdown heading.6.markdown, entity.name.section.markdown, heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #00f769 | bold |
| text.html.markdown punctuation.definition.heading.markdown, punctuation.definition.heading.markdown | #626483 | — |
| text.html.markdown markup.bold.markdown, text.html.markdown punctuation.definition.bold.markdown, markup.bold.markdown, punctuation.definition.bold.markdown | #ea51b2 | bold |
| text.html.markdown markup.italic.markdown, text.html.markdown punctuation.definition.italic.markdown, markup.italic.markdown, punctuation.definition.italic.markdown | #ebff87 | italic |
| text.html.markdown string.other.link.description.markdown, text.html.markdown string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.title.markdown, meta.link.inline.markdown | #ea51b2 | — |
| text.html.markdown markup.underline.link.markdown, text.html.markdown constant.other.reference.link.markdown, markup.underline.link.markdown, constant.other.reference.link.markdown, string.other.link.url.markdown, meta.link.inline.markdown string.other.link | #62d6e8 | underline |
| text.html.markdown punctuation.definition.link.markdown, text.html.markdown punctuation.definition.link.title.begin.markdown, text.html.markdown punctuation.definition.link.title.end.markdown, punctuation.definition.link.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown | #626483 | — |
| text.html.markdown markup.inline.raw.string.markdown, text.html.markdown punctuation.definition.raw.markdown, markup.inline.raw.string.markdown, punctuation.definition.raw.markdown | #a1efe4 | — |
| text.html.markdown markup.fenced_code.block.markdown, text.html.markdown fenced_code.block.language.markdown, markup.fenced_code.block.markdown, fenced_code.block.language.markdown | #626483 | — |
| text.html.markdown markup.quote.markdown, text.html.markdown punctuation.definition.quote.begin.markdown, markup.quote.markdown, punctuation.definition.quote.begin.markdown | #ebff87 | italic |
| text.html.markdown punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.markdown | #626483 | — |
| entity.name.tag.css, entity.name.tag.custom.css | #b45bcf | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #62d6e8 | — |
| support.type.property-name.css, support.type.vendored.property-name.css | #ea51b2 | — |
| support.constant.property-value.css, support.constant.font-name.css, keyword.other.unit.css, constant.other.color.rgb-value.css | #ebff87 | — |
| keyword.control.at-rule.css, keyword.control.at-rule.import.css, keyword.control.at-rule.media.css | #b45bcf | — |
| entity.name.function.decorator.python, meta.function.decorator.python entity.name.function, punctuation.definition.decorator.python | #62d6e8 | italic |
| variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.language.special.cls.python | #ea51b2 | italic |
| constant.language.python, support.function.builtin.python, support.type.python | #98d1ce | — |
| constant.character.format.placeholder.other.python, meta.fstring.python punctuation.definition.expression | #98d1ce | — |
| meta.mapping.key, meta.mapping.key.yaml, meta.map.key, meta.map.key.yaml, entity.name.tag.yaml, entity.name.tag.yaml string.unquoted, entity.name.tag.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.quoted, meta.mapping.key.yaml string.quoted.double, meta.mapping.key.yaml string.quoted.single | #62d6e8 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end | #98d1ce | — |
| entity.other.inherited-class | #00f769 | italic |
| entity.name.variable.parameter, variable.parameter, meta.function.parameters variable.other, meta.parameters variable.other | #f1f2f8 | italic |
| variable.language, variable.language.this, variable.language.special.self.python, variable.parameter.function.language.special.self.python, keyword.other.this, keyword.other.super | #b45bcf | italic |
| meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator punctuation, punctuation.decorator | #62d6e8 | italic |
| meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object variable | #f1f2f8 | italic |
| comment.block.documentation entity.name.type | #00f769 | italic |
| comment.block.documentation variable | #f1f2f8 | italic |
| comment.block.documentation, comment.line.documentation | #a1efe4 | italic |
| emphasis, markup.italic | — | italic |
| variable.other.alias.yaml | #00f769 | italic underline |
| entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml | #ea51b2 | italic |
| markup.underline.link, string.other.link, constant.other.reference.link, meta.link, entity.other.link | #62d6e8 | underline |
| invalid, invalid.illegal | #f7f7fb | — |