Wanting to add a little darkness

Screenshot of my website, in dark mode

The huge, huge advantage of using an off-the-shelf, soon-to-be-core theme is that the quality is high, like really high. 

Of course, there is always a possibility I would want to add something (and I have an idea for a little animation in the back of my mind) so I wanted to find a way to do that without making any changes to the actual theme.

When Lewis Nyman tweeted about a funky little way to add a "dark mode", I saw my opportunity...

So, I definitely didn't want to sub-theme Olivero as it was never designed to be a base theme. Instead, I treated my change as a change in functionality - use a module to inject the css I wanted.

I added a little custom module to my side, the added files of which you can see in the sites GitHub repository. These declare a small css file as a Drupal library and tell it at what stage of building the page to be thrown into the mix. Interestingly, doing it this way, and bearing in mind I didn't add any path scope to the code, the dark mode changes work on both the main Olivero theme and on the Claro admin theme when I'm adding content!

The code is basically:

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
  html {
    filter: invert(1) hue-rotate(180deg);
  }

  html img {
    filter: invert(1) hue-rotate(180deg);
  }

}

It's not exactly good practice to be defining style info in modules - that's what themes are for, but it does mean that I can play around in dark mode until Olivero might choose to include that type of thing. Then, all I need to do is remove the custom module - all nice and clean again.

Just to be absolutely clear, though, I am not saying that using modules is normally a good way to add styles. I only did it this way to avoid any issues with a fast-evolving future base theme. That's why I won't be making this into a listed Drupal module and won't be encouraging anyone else to do that, either.

Tags

Comments