Skip to content

Dark mode using dynamically generated css asset

ufundo requested to merge ufundo/riverlea:dark-mode-dynamic-css into main

Server side implementation of dark-mode setting, using a dynamic css asset (aka "the river" 🃏 ), which can combines css file on the server according to different parameters.

Essentially it splits the dark mode stuff into a separate file, and then only includes it if you have dark mode enforced, or if you choose "inherit" it wraps it in a media query.

It seems to work for me, and I think it should leverage the core asset builder cacheing nicely, though need to stress test that a bit further. (It should work a bit like crm-l10n.js..)

Things I'm less clear on:

  • I think this approach to picking the stream might be a bit hacky - I'm not totally clear on how the theme resolver stuff works. At the moment I worry this slightly closes the door to sub-themes which live outside of the riverlea extension.
  • I don't know how to ensure this extra asset is queued in the right order relative to the main theme code. Things look ok to me but css cascading isn't my strong suit.

One thing that's nice about this approach is that it scales to further dimension and maybe dynamically selecting some variables (at the Customiser stage).

Merge request reports