How to customize Drupal's Olivero colors on deploy

By Ryan, 26 February, 2021
Pleasantly purple and pink

It's been years since I paid much attention to my personal blog, dropping by only occasionally to post something new, moderate comments, or apply Drupal updates. I've been wanting to upgrade for a while, and the current status of Drupal 9 + its core themes Olivero (front-end) and Claro (admin) convinced me to spend a few evenings making it happen. However, I didn't want to just rock the blue palette the Olivero theme uses by default.

In various areas of my life, my motif is late 70's, early 80's ... '77 Alfa Spider, long hair and trucker hat, fleece lined sherpa jacket, etc. I'll work all night grooving to CCR or Darksynth, and if I can't have an angular Lamborghini Countach, I can at least dream of a Tesla Cybertruck. To make Olivero "mine", I opted for an 80's synthwave inspired palette pairing the Centarro purple with neon pink accents.

When I looked into how to customize Olivero, I first considered sub-theming it. After about five minutes I decided, nah, too much work, and I didn't really want to have to keep my own theme up to date as Olivero evolves. Code comments in the CSS indicate various elements are bound to change before it's considered complete. Fortunately, Drupal 9 uses PostCSS to compile CSS for Olivero, so if all I wanted to do was change the theme's palette, I could mostly do so by changing a few lines in css/base/variables.pcss.css:

:root {
  --color--blue-20: #4b4e9f; /* Blue dark:     #0d77b5 -> #4b4e9f */
  --color--blue-30: #2c2f70; /* Blue dark 2:   #3d92c4 -> #2c2f70 */
  --color--blue-50: #4b4e9f; /* Blue medium:   #2494db -> #4b4e9f */
  --color--blue-70: #9f9fcc; /* Blue bright:   #53b0eb -> #9f9fcc */
  --color--blue-90: #9f9fcc; /* Blue bright 5: #ddeffb -> #9f9fcc */
}

I also updated .pcss.css files to style elements those variables don't currently cover: the header gradient, the box shadow around hovered links, and the required form element mark. All in all, not very difficult to customize, including adding my own --color--pink-accent variable to use for my feed icon and footer links. Once I was done customizing, I compiled the CSS per the docs linked above:

yarn run build:css

And suddenly the typical Drupal blue color scheme was rad.

The question, of course, was, "How do I maintain these hacks on my live site?" I'm hosting this site on Platform.sh, which builds the codebase via Composer when I push commits to the site repository. In order of greatest to least elegance, I had a few options to ensure P.sh deployed my site with my custom palette:

  1. I could maintain a patch in my repository just to the .pcss.css files, apply that during the build process, and compile the CSS during the build. I've never actually used Node.js on P.sh, though I know it's possible, but I didn't really feel like figuring all that out for a personal blog.
  2. I could maintain a patch in my repository to all of the theme's CSS and apply that after build. I probably should've done this, but I really didn't care to putz around with it until I got it right. I'd also still have to update that patch with each subsequent Drupal release or else fix my site to the specific version of Drupal I patched, potentially delaying my application of security releases.
  3. Instead, I opted for brute simplicity - I made the changes locally, committed the compiled CSS and some template overrides to a folder outside of the docroot, and added a build step to copy the custom CSS to the core Olivero theme directory. I'll work my way up the elegance rankings "some day". (Narrator: no, he won't.)

Copying overrides is nice because it isn't dependent on me keeping up with changes to Olivero until I want to. I'm making a reasonable compromise for a hobby project: I won't have to maintain patches that may fail on future Drupal updates, and in return I give up getting bug fixes or improvements to the theme's CSS until I update my own CSS. Honestly, this theme's solid as is, certainly better than any theme I've had before, so I was fine with that trade. To make it happen, I just had add the last line below to the build hook in my .platform.app.yaml file:

# The hooks executed at various points in the lifecycle of the application.
hooks:
    # The build hook runs after Composer to finish preparing up your code.
    # No services are available but the disk is writeable.
    build: |
        set -e
        cp -r olivero-overrides/* web/core/themes/olivero/

Et voila!

Thanks to smart build tooling from P.sh, I now have a schnazzy Drupal 9 blog with a light touch of personalization ... and I can now focus on recovering my old blog content from the Internet Archive since I, uh, accidentally corrupted my InnoDB tables by clearing the Drupal cache without enough disk space in my Digital Ocean droplet. Yeah ... there's a reason I'm giving up on managing a VPS. 🤦🏻‍♂️

To the future! 🚀

Topics

Comments2

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Mike Herchel

3 years 7 months ago

I love the color scheme. We're hoping to support changing colors at some point -- ditching IE11 support in D10 is definitely going to help.

The problem with your current approach is that a lot of these selectors are going to change. We're currently refactoring a good amount of markup and CSS to use BEM better (as well as fix a number of accessibility issues). When the markup changes, your CSS overrides will no longer apply, and this site will be a mix of purple, pink, and blue.

An ideal way to do this would be something like

1. Apply a patch updating the variables.pcss.css with the new colors
2. Do the normal cd core/ && yarn install && yarn build:css
3. Tada!

Ah! Guess I'll have to keep a closer eye on it for a little while yet then. 😅

I didn't think about the markup itself changing / breaking my selectors. Maybe I'll work my way up the "elegance" ranks a little faster than I expected. 😬