Getting Started

Dracula for Starlight is a Starlight plugin. It restyles your whole site with the official Dracula palette: Dracula in dark mode, Alucard in light mode. Setup takes two steps.

Note

You need an existing Starlight site (version 0.34 or newer, since that is when Starlight moved its styles into a cascade layer). If you don’t have one yet, follow the Starlight getting started guide first.

1. Install the package with your favorite package manager:

   npm

   npm i starlight-theme-dracula

   pnpm

   pnpm add starlight-theme-dracula

   yarn

   yarn add starlight-theme-dracula

2. Register the plugin in your astro.config.mjs:

   astro.config.mjs

   import { defineConfig } from "astro/config";
   import starlight from "@astrojs/starlight";
   import starlightThemeDracula from "starlight-theme-dracula";
   
   export default defineConfig({
     integrations: [
       starlight({
         title: "My Docs",
         plugins: [starlightThemeDracula()],
       }),
     ],
   });

That’s it. Start your dev server and both color schemes are themed: the dark side uses the Dracula palette, the light side uses Alucard, and code blocks use the Dracula syntax theme in both.

Want a different accent color than purple? Head over to Configuration.