feat: add 'system' inside the theme toggle

[ldez]

Adds a 'system' option to the theme toggle.

I created a "smart" cycle depending on the current prefers-color-scheme.

• prefers-color-scheme: light: system -> dark -> light -> system
• prefers-color-scheme: dark: system -> light -> dark -> system

The next theme after system is always the opposite of prefers-color-scheme.

I created, by hand, an icon contrast for the item system inside the theme toggle.
This icon follows the heroicons style.

Tested inside the sidebar footer, the navbar, and on mobile/small screen.

Fixes #242

[netlify]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	ad3ad52
🔍 Latest deploy log	https://app.netlify.com/projects/hugo-hextra/deploys/68a4f740f5edc70008259b1b
😎 Deploy Preview	https://deploy-preview-766--hugo-hextra.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[imfing]

thanks for picking it up and working on this. I like the addition of the system option and your thought about the cycle logic.
I'm a little unsure about the cycle which seems not quite straightforward as it's not immediately clear to the user which mode clicking the button would take them to.
Personally, I'd lean towards presenting the theme options in a small options menu (similar how we do language selection), what do you think about this?

[ldez]

I based the implementation on the current approach because, for me, it's simpler to use than a menu.
IMHO, the cycle of icons is straightforward, but I can understand a more explicit approach like a menu.

If you prefer a menu, I can try to do it.

[ldez]

I updated the implementation to use a menu.

Tested inside the sidebar footer, the navbar, on mobile/small screen, and RTL/LTR.

[imfing]

I updated the implementation to use a menu.

Tested inside the sidebar footer, the navbar, on mobile/small screen, and RTL/LTR.

Oh that was fast! I was just about to ask if you need any help or not 😆

I will take a look

[imfing]

works perfect now! 👍

[imfing]

https://imfing.github.io/hextra/versions/latest/ works

[ldez]

I detected a problem: there is a flash (quick switch light/dark) when switching between some pages.

I think I know why. I will try to fix that.