Note: this is an update to my Drupal 9 Olivero sub theme creation
Note 2: this method will be obsolete with Drupal 11.x and the new Olivero starterkit!
Drupal 10 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!
Create Drupal 10 Olivero sub theme
On a previous article I presented a simple solution for a quick Olivero overriding, as I'm using for this website. My goal is to have something that allow me minimal changes, like some padding and colors. As the primary color is now a config in Drupal 10 it's almost only some minimal padding fixes that I need, thanks Drupal ;)
My proposition for a quick Drupal Olivero sub theme
My proposition 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 padding 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 10
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 for Drupal 10 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 and optionally theme.css with your changes and build the css.
For JavaScript there is a theme.js file available.
The best way is to do that directly from Olivero folder, you need to have Yarn (or NPM) to install and build dependencies, this is where a simple small script will help us!
You can launch the script from anywhere:
web/olivero_sub_theme/scripts/build.shThe 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 or theme.css. But there is no need to run when changing any other file in the sub theme.
Final result
You can clone or download this project to create your own Olivero subtheme!