Drakula

Drakula is a dark purple theme designed for Visual Studio Code. This theme is particularly suited for individuals who appreciate the Dracula color scheme, developed by Zeno Rocha, yet prefer a flatter and darker user interface compared to what is typically offered in most themes utilizing this scheme. It draws inspiration from the Tokyo Night, GitHub Dark, and One Dark Pro themes.

Features 🟣 Interface 🟣 Colors 🟣 Installation 🟣 Settings 🟣 Customization 🟣 Font 🟣 Links 🟣 Screenshots

Key features

• non-distracting, nearly flat user interface
• dark theme that minimizes eye strain
• reduced number of UI colors
• clear differentiation between highlighting, selection, and searching

User interface

UI example (Python & C)

Editor example (indent guides, match & search, suggest widget)

Color palette

Primary foreground

Primary background/UI

Extra UI and accents

Bright foreground (highlights and terminal)

Installation

From Marketplace

• open Visual Studio Marketplace and search for Drakula (or simply click here)
• click on the "Install" button

From Visual Studio Code

• go to View → Command Palette or press Cmd+Shift+P (Ctrl+Shift+P on Windows)
• enter Install Extension
• search for Drakula and select it or press return to install

Finally, I would greatly appreciate it if you could rate this theme with 5 stars!

Suggested editor settings

Smooth cursor behavior and csrolling for better experience:

"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on",
"editor.smoothScrolling": true,
"workbench.list.smoothScrolling": true

Customization

To customize some UI aspects of this theme open user JSON settings:

• Go to View -> Command Palette or press Cmd+Shift+P (Ctrl+Shift+P on Windows)
• then enter User Setting JSON
• select or press return on Preferences: Open User Settings (JSON)
• add if not existing workbench.colorCustomizations key with section [Drakula] like this:

"workbench.colorCustomizations": {
  "[Drakula]": {
    // your customizations goes here
  }
}

In the same way you can alter editor behavior by adiding editor.tokenColorCustomizations key:

"editor.tokenColorCustomizations": {
  "[Drakula]": {
    // your customizations goes here
  }
}

Changing background

The following example changes editor background color to a lighter purple variant #241C30

"workbench.colorCustomizations": {
  "[Drakula]": {
    "editor.background": "#241C30"
  }
}

Disabling italic font variant

Below is an example of disabling the italic font variant for comments:

"editor.tokenColorCustomizations": {
    "[Drakula]": {
        "textMateRules": [{
            "scope": [
                "comment"
            ],
            "settings": {
                "fontStyle": ""
            }
        }]
    }
}

Recommended fonts

I strongly recommend the following two fonts for use in IDEs and terminals:

JetBrains Mono

Designed by Philipp Nurullin and Konstantin Bulenkov at JetBrains.

• download and install JetBrains Mono Nerd Font version here
• or simply use brew: brew install font-jetbrains-mono-nerd-font
• paste or relpace below settings in VSCode's settings.json

    "editor.fontFamily": "JetBrainsMono NF",
    "editor.fontLigatures": "'calt', 'cv02', 'cv08', 'cv12', 'cv17', 'cv18', 'cv19', 'cv20'",

Commit Mono

Designed by Eigil Nikolajsen (please support his work).

• download and install Commit Mono Nerd Font version here
• or simply use brew: brew install font-commit-mono-nerd-font
• paste or relpace below settings in VSCode's settings.json

    "editor.fontFamily": "CommitMono Nerd Font",
    "editor.fontLigatures": "'cv02', 'cv07', 'cv08', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05'",

Common font settings

    "editor.fontWeight": "400",
    "editor.fontSize": 13,
    "editor.letterSpacing": 0.1,
    "editor.lineHeight": 1.45,

Links and acknowledgments

• Icons: VSCode Great Icons
• Other dark themes:
  • Github (Dark Default variant)
  • One Dark Pro (Flat variant)
  • Tokyo Night (for much cooler feel)

Screenshots

JavaScript and Python

Rust and C++