Toggle light/dark themes without a dropdown menu (using Hugo Academic/Bootstrap)

[daumler]

Explanation of the issue

My objective is to modify the Hugo Academic theme (that uses Bootstrap), such that the navbar's light/dark theme selector is a single-click button that toggles between the active theme (e.g., the website visitor's system default) and the inactive theme (whichever theme is not currently in use).

There should never be a dropdown menu for selecting between binary options (light, dark). The third option (automatic) is really just light or dark, but whichever one is the system-set default.

My strong preference would be for the default to be set as "automatic" (i.e., either light or dark, depending on the website visitor's system-set preference), with the single-click toggle button changing the option from the system-set default to whichever theme that the visitor did not have as their system-set default.

---

More detail about the feature request

In other words, if the website visitor has "light" mode as the system-set option, then when the visitor clicks the toggle button, it will change from light/automatic to dark If the user has "dark" mode as the system-set option, then when they click the toggle button, it will change from dark/automatic to light

(In the config settings, the website host should also be allowed to set the default to override the visitor's system preferences: (1) either because they only want to host their website in either light mode or dark mode, without any ability for the viewer to toggle between the two options; or (2) because they want the website default to either be light or dark, when the visitor first arrives to the website (regardless of what their system-set option is), but they still want the visitor to be able to toggle from the website default to the non-default mode. In either case, the toggle button would only change from the visitor's active theme to the inactive theme—the same as if the website's default theme were set to "automatic/system-set," then the toggle button would only change from the visitor's active theme to the inactive theme.)

---

Example websites

Hugo websites that feature the single-click light/dark toggle button that I am trying to replicate:

1. (Hugo/Academic) Website (Repo)
2. (Hugo/Academic) Website (Repo)
3. (Hugo/Academic) Website (Repo 1, Repo 2)
4. (Hugo/PaperMod) Website (Repo)
5. (Hugo/Blog, Tailwind) Website (Repo)
6. (Hugo/Academic) Website (Repo)*
7. (Hugo/Academic) Website (Repo not found)*

(*Note: In the final two examples, I found an issue, whereby the website requires two clicks to toggle from light to dark, but one click to toggle from dark to light; and I suspect that this is because each user has changed the button to toggle between the three options: light, dark, automatic; which for me will be set as light, dark, automatic/light.)

The problem with the above examples is that most of them were designed using Hugo Academic from more than three years ago; and because Hugo and HugoBlox (formerly wowchemy?) have changed so much, over the years, I have been unable to replicate the HTML/SCSS/JS files that create the light/dark toggle button.

---

Conclusion / Asking for help

Ultimately, I have tried several solution and tinkering to change the existing light/dark dropdown menu options to convert the existing options into a light/dark toggle button, but I haven't had success.

Therefore, I am hopeful that this setting change could be added to an update—i.e., to allow users to set the default at automatic setting and a single-click toggle button changes from the current, active theme to the user's inactive theme that they did not have automatically set. I think that this would be particularly useful because a dropdown menu to select between what is effectively a binary option can be optimized for an easier/smoother user experience.

Short of this feature request, if anyone has any suggestions for how I can personally implement the light/dark toggle button using Hugo Academic, I am very open to ideas!