Flash of color with css variables theming

[TheFedaikin]

Good day maintainers of elm-pages!

I was exploring Elm and I am certainly intrigued! I stumbled upon this repo while doing some silly stuff (to get a better grasp of the Elm and its ecosystem), and I think it's a perfect match for what I wanted to try - SSG generator with a lot of batteries for getting the data into my app!

However, SSGs are notoriously known for flash of color and I've been using pattern similar to the one you can see in this blog for ages now. It's very important if you have pretty different theming for accessibility and for people who are sensitive to flash of light. But in elm-pages I couldn't find an easy way of injecting the script before everything - if I do this via load function in index.js it's obviously too slow sometimes, so flash appears to be flaky (it doesn't happen sometimes) but it's still here.

I obviously can fix it by injecting my js with a build script myself: doing a copy of a js file and adding my script tag (or even inlining it) at the top of the html, but I was wondering if there's a better way? I understand the philosophy about Elm and JS interop, but since SSG kind of defies it anyway (you are allowed to manipulate head, instead of just div that you mount your app into) I was wondering if it's possible for the scope of this project.

I am also open to contribute myself, but I am very-very new in Elm, so it'll probably take some time for me.

I have a reproduction for this here - I have dist and dist2 and you can run scripts such as serve and serve:noflash to test the difference.

Thanks in advance, and thank you for this awesome SSG!

Edit: To note in my repro I only use two themes and you can do it with just css, but I usually have 3+ which you can't do with @media queries, because prefers-color-scheme only has light and dark as possible values.