Fix glitch when changing dark/light theme

[kutyel]

@rpearce did you finally blog about this? 😄

[rpearce]

@kutyel No 😞. I haven't written or done much open source since having our second daughter.

Would you find it very valuable?

[kutyel]

Congrats on the parenthood! I'd would be helpful as I could not fix it myself (not enough Hakyll knowledge, as with #5), but do not worry take your time! 😘

[rpearce]

@kutyel It is less hakyll and more CSS and JS, but I'll do it just for you.

[rpearce]

@kutyel This is a weird question, but would you be willing to GitHub Sponsor me USD$1, just one time, to write this article? I have not made $1 online from something I've made this year, but this could be it, and I could include a message at the top of the article that you sponsored it.

If not, then no problem, and I will write the article, anyway :)

[kutyel]

That's a great idea, I will do that, thanks again! ❤️

[kutyel]

Done! Thanks for your hakyll template and for all your OSS Haskell work! 💯

[rpearce]

@kutyel 🙌 Thank you! I'll resume writing this blog post (and example) over the holidays, and I'll include your sponsorship at the top :)

[rpearce]

I am working on it! I have a lot of work to do, but it will happen :)

[kutyel]

Awesome, looking forward to reading it! ❤️

[rpearce]

@kutyel Here is the article! https://robertwpearce.com/theming-static-sites.html

You can use the ideas from the article to alter https://github.com/kutyel/kutyel-hakyll/blob/c36b0a87daba3fe42b6364e5af461c652d6dbe96/src/templates/default.html#L42-L48 (and your CSS) to match what it is you are trying to do.

In your case, instead of listening for a change to a dropdown, you could listen to a change to the switch I think you have from my old design, and then do the same technique mentioned in this blog post. If you're only doing dark/light themes, then you could even reduce the code further, since it's a boolean (light or dark).

Please let me know if you have questions.

[kutyel]

Awesome, thanks very much! 🙌🏻

[rpearce]

I'll clone your repo tonight or tomorrow night and fix this for you

[rpearce]

@kutyel Can you describe the "glitch"? Is it a flash when changing pages?

[kutyel]

Basically since the default theme is black, if you set it to white and you navigate pages or refresh you see the animation of going from dark to light every time (glitching). 😢

[rpearce]

Ok, thanks! I am spending some time with family and will help fix this as soon as I can.

[rpearce]

I am starting on this tonight... it might take me a little while, but we'll see.