How to customize Drupal's Olivero colors on deploy

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! 🚀