[znarfm]

Summary

Adds the Dracula color theme (light and dark variants) and updates the color picker to resolve local preview assets via VitePress withBase.

Changes

• Theme Definition: Added draculaTheme config (docs/.vitepress/theme/themes/configs/dracula.ts) and registered it in themeRegistry (index.ts).
• Styling: Defined divider, border, and gutter custom properties for Dracula in style.scss.
• Preview Asset Support: Updated ColorPicker.vue to support relative/root-relative paths (/, .) wrapped in withBase() for base URL compatibility.
• Assets: Added docs/public/dracula.webp preview thumbnail.

Verification

• Switched to Dracula theme in both light and dark modes.
• Verified borders, accents, custom blocks, and hero gradients render correctly.
• Confirmed the theme preview thumbnail displays properly in the color picker component across base routes.

Screenshots

Theme picker:

Dark:

Alucard for light theme too:

[znarfm]

We currently have no option to set colors to dividers and stuff for theme files like catpuccin.ts and dracula.ts. So i added this to override for now, since default color for these variables are hard to see because of the bg color of dracula theme.

lemme know if we can refactor theme files to support theming borders and dividers.

[nbats]

Nice work much appreciated, I'll pass this onto our Discord to get thoughts from other devs first

[vesaber]

is the .webp logo intentional? Although Dracula doesn't have a press page, they still have their static icon displayed in the format .svg.

[znarfm]

is the .webp logo intentional? Although Dracula doesn't have a press page, they still have their static icon displayed in the format .svg.

Where can I get the svg file of their icon? I only got it from their Wikipedia page which is in webp format.