Create your own custom theme based on the Webhaven starterkit

Generate your theme

The first step is to generate a new theme based on the Webhaven theme starterkit.

In this example we'll create a theme called lollapalooza.

I've automated this process so the only thing you should do is make sure your project is running in DDEV open your Terminal, ssh into your project:

ddev ssh

go to the web/ directory of your Webhaven project:

cd web

and run:

php core/scripts/drupal generate-theme lollapalooza \
  --path="themes/custom" \
  --name="Lollapalooza" \
  --description="The Lollapalooza theme based on the Webhaven starterkit." \
  --starterkit=webhaven

Install subtheme dependencies

The Webhaven theme has dependencies and scripts that are used for compiling assets and managing the theme’s build process.

Go to the new lollapalooza theme we just generated:

cd themes/custom/lollapalooza

For the next two steps two work I assume you have Node and npm installed on your machine.

You can read more on installing Node and npm here.

And run:

nvm use

This command will make sure the correct node version is used. You can read more on how nvm works here.

Now you can install all dependencies by running:

npm install

Set theme environment variables

The Webhaven theme uses a theme environment file for components like BrowserSync to work.

Create a copy of .env.example and rename it to .env.local. You can do this manually or run the following command:

cp .env.example .env.local

Now open the .env.local file and change the DRUPAL_BASE_URL variable to your project name.

In this example I change it as follows:

DRUPAL_BASE_URL= https://lollapalooza.ddev.site

Build your theme

To compile all the files and watch for changes you run the following command:

npm run watch

To build for development you can run the following command:

npm run dev

To build for production you run the following command:

npm run production

Enable your new subtheme in Drupal

Now you can enable your new created theme as the default theme in Drupal.

You can do this manually by going to /admin/appearance or you can run the following commands:

ddev drush en lollapalooza -y

ddev drush config-set system.theme default lollapalooza -y

Your theme is now created and running. Congrats!