I'll walk you through how to turn your macOS setup—and your favorite apps—into Dracula theme. We'll cover everything from your terminal to your browser, code editor, and even Discord. Let's get spooky!
Step 1: Theming Your Browser & Web Apps
Stylus: The Powerhouse for Custom Styles
Stylus is a browser extension that lets you apply custom CSS themes to websites. It’s available for Chrome, Firefox, and Edge. Once installed, you can grab Dracula themes for your favorite sites from userstyles.world or GitHub.
-
Twitter/X:
Modified
Catppuccin
into custom
Dracula for Twitter.
-
GitHub:
Dracula for GitHub.
-
YouTube:
Dracula for YouTube.
-
Reddit:
Dracula for Reddit.
To install a style, just click the link, hit “Install Style”, and you’re done! You can also tweak the CSS if you want to personalize your look.
Step 2: Theming Your Code & Notes
Obsidian: Dracula Gemini
Obsidian is a powerful note-taking app for markdown lovers. The Dracula Gemini theme brings the Dracula palette to your notes, making your second brain look as good as it works.
Step 3: iTerm2 & Shell
iTerm2 + Dracula + Powerlevel10k + Oh My Zsh
iTerm2 is the go-to terminal for macOS power users. Pair it with the official Dracula theme, Powerlevel10k for a stunning prompt, and Oh My Zsh for plugin magic.
- Download the Dracula iTerm2 color scheme and import it via iTerm2 → Preferences → Profiles → Colors.
-
Install Oh My Zsh:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" -
Install Powerlevel10k:
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k -
Set
ZSH_THEME="powerlevel10k/powerlevel10k"in your.zshrc.
Step 4: Discord
BetterDiscord + Refactor Midnight
BetterDiscord is a client mod that lets you add custom themes and plugins to Discord. For Dracula vibes, try Refactor Midnight and add your own custom CSS for extra flair.
Download Custom Dracula Discord CSS here
/* DEMO CSS */
button[aria-label],
button.button-38aScr,
button.buttonWrapper-3YFQGJ {
color: #ff79c6 !important;
fill: #ff79c6 !important;
}
Step 5: Wallpapers
No theme is complete without a matching wallpaper. Here are some Dracula-inspired options:
Find even more at aynp/dracula-wallpapers.
Step 6: macOS UI Customization
SketchyBar & JankyBorders
For advanced users, SketchyBar lets you create a fully custom, scriptable macOS status bar. Pair it with JankyBorders for window borders that match your Dracula vibe. Check out community configs for inspiration.
Resources & More Dracula
- userstyles.world — Find and share user styles for all your favorite sites.
- Dracula for Stylus (Brave, gemini, google drive/docs, leetcode, whatsapp, wikipedia)
Dracula Color Palette
The Dracula theme color palette - reference:
| Palette | Hex | Color |
|---|---|---|
| Background | #282a36 |
|
| Current Line | #44475a |
|
| Selection | #44475a |
|
| Foreground | #f8f8f2 |
|
| Comment | #6272a4 |
|
| Cyan | #8be9fd |
|
| Green | #50fa7b |
|
| Orange | #ffb86c |
|
| Pink | #ff79c6 |
|
| Purple | #bd93f9 |
|
| Red | #ff5555 |
|
| Yellow | #f1fa8c |
Dracula isn’t just a color scheme—it’s a vibe. Once you start, you’ll want everything to match. Happy theming!