Preview
JavaScript
React / TSX
CSS
Color Palette
| Color |
Hex |
Preview |
| Background |
#0E131B |
 |
| Foreground |
#CDD0DD |
 |
| Purple |
#BD93F9 |
 |
| Pink |
#FF79C6 |
 |
| Cyan |
#00B5DC |
 |
| Green |
#3dcf62 |
 |
| Orange |
#FFB86C |
 |
| Red |
#FF5555 |
 |
| Yellow |
#E2DD61 |
 |
| Comment |
#465276 |
 |
Install
The install script copies the theme for the apps you choose and points each config at it:
curl -fsSL https://raw.githubusercontent.com/eduardoborges/draculinho/main/install.sh | sh
Pass app names to skip the menu, for example sh install.sh zed ghostty. Options: vscode, zed, ghostty, herdr, claude-code, chrome, all. The manual steps for each app follow.
VS Code, Cursor and VSCodium
Or search for Draculinho in your editor's extension panel.
Zed
Copy themes/zed/draculinho.json to ~/.config/zed/themes/ and set the theme in your settings:
{ "theme": { "mode": "dark", "dark": "Draculinho" } }
Ghostty
Copy themes/ghostty/draculinho to ~/.config/ghostty/themes/ and add this line to your config:
theme = draculinho
Reload the config afterwards (cmd+shift+, on macOS).
Herdr
Herdr has no theme files. Draculinho is a set of [theme.custom] overrides on top of the built-in dracula theme. Copy the contents of themes/herdr/draculinho.toml into ~/.config/herdr/config.toml, then run:
herdr server reload-config
Claude Code
Copy themes/claude-code/draculinho.json to ~/.claude/themes/ and pick Draculinho in /theme. You can also set it directly in ~/.claude/settings.json:
{ "theme": "custom:draculinho" }
Chrome
Chrome only takes themes from the Web Store or as an unpacked extension. Open chrome://extensions, turn on Developer mode, click Load unpacked and pick the themes/chrome folder. The install script copies it to ~/.config/draculinho/chrome for you.
Recommended Setup
This theme was designed with ligature and italic fonts in mind. For the best experience, try one of these fonts:
Then enable ligatures and italic rendering in your settings.json:
{
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"[Draculinho]": {
"textMateRules": [
{
"scope": "comment",
"settings": { "fontStyle": "italic" }
}
]
}
}
}
What Makes It Different
Draculinho keeps the Dracula DNA but pushes the background much darker (#0E131B vs the original #282A36), giving a deeper, more focused feel — especially on OLED displays. Keywords, storage types, and special variables render in italic, making the code structure stand out at a glance.
License
MIT — based on the original Dracula Theme by Zeno Rocha.
