Create a custom theme

Generate your theme

The only thing you need to do is run the following command from your project root, replacing lollapalooza with your theme's machine name:

ddev create-theme lollapalooza

The command automatically handles everything:

• Generates a new theme based on the Webhaven starterkit
• Installs its Node dependencies
• Creates .env.local with your project's DDEV URL
• Enables the theme and sets it as the default
• Migrates Canvas components to your new theme
• Clears caches

Tip: enable dev mode (ddev dev-mode) while theming. It turns off caching and CSS/JS aggregation and enables Twig debug, so you see your changes immediately.

Build your theme

To compile all files and watch for changes with BrowserSync run:

npm run watch

To build for development run:

npm run dev

To build for production run:

npm run build

Linting and formatting

Linting checks your code for errors and bad practices. Formatting automatically rewrites your code to a consistent style. Running these regularly keeps your theme code clean and maintainable.

To format and lint your JavaScript and component files:

npm run biome:check

Or run them separately:

npm run biome:format
npm run biome:lint

To lint your SCSS files run:

npm run stylint

To automatically fix SCSS lint issues run:

npm run stylint-fix