Create a theme

Create a Drupal theme

Section under construction.

We will not focus on details here, but just have an overview of the two main methods to create a Drupal theme.


You can use a default Starterkit or your very own, to be reused between projects. The idea here is to not extend but just make a copy to start from so there is no need to worry if the source changes. It's still possible to track source changes.

Use the default Starterkit

Create it in the themes/custom/my_theme directory

php core/scripts/drupal generate-theme my_theme --path themes/custom

Use a contributed or custom Starterkit

Replace source_theme_name

php core/scripts/drupal generate-theme --starterkit source_theme_name my_theme

Starterkit theme (opens in a new tab) -

Extend a base theme

You take most of the base theme and add your own customizations. Sub-themes inherit all the features of the base theme, the base can also inherit from another base theme.

In your file, use the following line and replace the base_theme_name
base theme: base_theme_name

Creating sub-themes (opens in a new tab) -

Add libraries: CSS and JS

Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml (opens in a new tab) -

If Tailwind is your thing, make sure to read this fantastic post from Matt Glaman: Migrating to TailwindCSS, iteratively, in your Drupal theme (opens in a new tab) where he explains how to use TailwindCSS (opens in a new tab) with PostCSS and browserSync. Bundling and purging are handled by Laravel Mix (opens in a new tab), that removes the hassle of configuring Webpack.

Libraries override and extension

You can fully override (replace with your own), remove (not load) or extend (add some files) to an existing library.

Pitfall: this needs to be done in and not in my_theme.libraries.yml.

Overriding and extending libraries (opens in a new tab) -

Setup for local development

See Configure your development environment

Read more

Theming Drupal (opens in a new tab) -