Create a Drupal 9+ Olivero sub theme

By admin, 16 December, 2021

Update: This article is deprecated with Drupal 10.0 release, now Olivero include a config for primary color and some changes to variables.pcss.css, see my new article for Drupal 10 Olivero sub theme.

Drupal 9 experimental Olivero

New Olivero theme is a great new front theme introduced with Drupal 9.1. It's a great refreshment to the pretty old Bartik theme. Bartik was updated with Drupal 8 but still has a kind of an old feel to it, as it was created in 2010!

But for now Olivero is not yet stable but it's getting close, see the issue: [META] Make Olivero stable. But the main issue is that currently it do not support Drupal sub theme feature.

Create Drupal 9 Olivero sub theme

When updating my personal website, I wanted to have less time as possible on the design, and Olivero was looking like a better starting point than Bootstrap or any other frontend framework. You know the rule: it's always the baker's children who have no bread.

Don't get me wrong, I still think Bootstrap is great, as many other frameworks, but when I'm my own client, my time is becoming way more precious.

Current solutions for Drupal 9 Olivero sub theming

So even if I have limited time to have Olivero on my website, I still wanted to make some tiny adjustment to the theme, but with minimal effort.

I found some solution on the internet:

How to customize Drupal's Olivero colors on deploy
- Good solution for very small tweaks, like colors, but I wanted more.
How to sub-theme Olivero
- It's a full copy version, meaning on each Olivero update you have to compare and diff. So not a good solution for easy maintenance.

Unfortunately they didn't match what I was looking for:

Be able to tweak some css, add my custom js and some templating
Easy to maintain when Olivero is updated (meaning sub-theming)

So I decided to try to have a sub theme without copying the whole theme.

My solution for Drupal Olivero sub theme

My solution is a sub theme, so I can add any css, js and override any template file.

The main trick is to use variables.pcss.css file to customize Olivero colors and some sizes for our needs.

To achieve this, we need to copy and build the css files from Olivero theme, we simply need to edit the variables.pcss.css inside Olivero theme and build the css.
Then copy the result to our sub theme and be sure all css Olivero css files are replaced by ours, which will be done in file olivero_sub_theme.theme

Final sub theme for Drupal 9

Here is the basic structure of the theme:

web/themes/custom/olivero_sub_theme/
├── css/
|   ├── theme.css
|   └── variables.pcss.css
├── js/
|   └── theme.js
├── scripts/
|   └── build.sh
├── templates/
|   └── ... your templates override
├── olivero_sub_theme.info.yml
├── olivero_sub_theme.libraries.yml
├── olivero_sub_theme.theme
├── favicon.ico
└── logo.svg

You can download my sample project from here.
Replace occurrences of olivero_sub_theme in olivero_sub_theme.theme and olivero_sub_theme.info.yml, then rename files prefix olivero_sub_theme with your theme name.

The next step for css is to edit variables.pcss.css with your changes and build the css. The best way is to do that directly from Olivero folder, you need to have yarn and install build dependencies, this is where a simple small script build.sh will help us:

From the root of the project you can launch the script with your theme machine name (ie: replace olivero_sub_theme):

web/olivero_sub_theme/scripts/build.sh olivero_sub_theme

The script will install dependencies, build the css and copy files to your sub theme.

Off course you need to run this script each time you change variables.pcss.css. But there is no need to run when changing any other file in the sub theme.

Minimal files content

Minimal info file olivero_sub_theme.info.yml:

Minimal info file olivero_sub_theme.libraries.yml:

The olivero_sub_theme.theme file will be used to replace Olivero css files.

<?php
/**
  * @file
  * Functions to support theming for My Sub Theme.
  */
use \Drupal\Core\Asset\AttachedAssetsInterface;
/**
  * Implements hook_css_alter().
  *
  * Replace all css from Olivero by this theme css.
  */
function olivero_sub_theme_css_alter(&$css, AttachedAssetsInterface $assets) {
  $oliveroThemePath = drupal_get_path('theme', 'olivero');
  $mySubThemePath = drupal_get_path('theme', 'olivero_sub_theme');
  foreach ($css as $cssFile => $value) {
    if (strpos($cssFile, $oliveroThemePath) !== FALSE) {
      $css[$cssFile]['data'] = str_replace($oliveroThemePath, $mySubThemePath, $css[$cssFile]['data']);
    }
  }
}