Hugo-coder: Auto-switch between Dark and Light modes

[ariejan]

With some simple vanilla javascript, it's possible to automatically switch between Light and Dark mode, based on the user's OS preference.

Proposal

Add an option to config.toml like this:

dark_mode = "auto" to (by default) automatically detect the user preference.

This could replace the inverted option:

dark_mode = "light" to always select light mode
dark_mode = "dark" to always select dark mode

Impact

This would remove the inverted option, and add a new dark_mode option. It might be possible to re-use the inverted option, but the naming is a bit off. It would also mix boolean values with a string value.

Implementation

The implementation is straight-forward. I'm currently doing this already with some custom JavaScript at https://www.devroom.io (try switching between light and dark mode on your device).

At the moment you need to set inverted = true to include the inverted CSS. The javascript will then add/remove the .inverted class to body, based on what preference it detected. If no preference can be found, the script could default to light or dark, or set either one based on the local user's time.

@luizdepra Please let me know you thoughts on this, I'd be happy to create a PR for this.

[clement-pannetier]

Hi,

I made a similar feature on my website, you can see it here.
I added a button to toggle between the light and dark mode and it also works with the user preference in Windows settings.

I've been inspired by this post and this hugo theme

[ariejan]

@clement-pannetier that's even better!

[luizdepra]

This is a interesting feature.
I would like to avoid using javascript, I don't know if it is possible.

I would be glad if you could implement this feature. Using user preferences looks really nice, but I think we still need a way to change the colors by clicking somewhere. (Maybe in the page footer?) And a way to save the "use preference" when he/she changes the color scheme. (Local Storage?)

[ariejan]

@luizdepra It's possible to use CSS media queries to select light mode or dark mode, but without JS, users will not be able to interact with it. The choice is do you want it to happen automagically, or do you want to give the visitor some control on the fly? I would prefer the automagic solution, as the user already expressed their preference for one mode or the other.

For reference: https://tombrow.com/dark-mode-website-css

[thesmiley1]

I also like the simplicity of the automagic solution.

[luizdepra]

Ok, @ariejan. I think we can start with this feature only using user preference.

About the configuration, I think colorscheme = "auto" | "dark" | "light" sounds better than dark_mode.

[luizdepra]

Oops, closed by mistake.

[qsvtr]

Hi,

I made a similar feature on my website, you can see it here.
I added a button to toggle between the light and dark mode and it also works with the user preference in Windows settings.

I've been inspired by this post and this hugo theme

Can you share how did you do this feature ? :)

[clement-pannetier]

Hi,
I made a similar feature on my website, you can see it here.
I added a button to toggle between the light and dark mode and it also works with the user preference in Windows settings.
I've been inspired by this post and this hugo theme

Can you share how did you do this feature ? :)

You can see it on my GitLab repo : https://gitlab.com/clement-pannetier/clementpannetier.dev

[clement-pannetier]

I don't see the toggle button on your website, can you update your code or make a branch on your git

[qsvtr]

I don't see the toggle button on your website, can you update your code or make a branch on your git

yes it's done, I added a window.onload = () => { ... } in custom.js
PS: I work in local ;)

[clement-pannetier]

Ok, but one small mistake, you didn't change the hover color of the toggle button :)

How did you change your site without commiting to the github repo ?

[qsvtr]

Ok, but one small mistake, you didn't change the hover color of the toggle button :)

How did you change your site without commiting to the github repo ?

Yes I saw that aha;)
It's on a new vps so for now I only zip that I unzip in the directory :D