What is the recommended way to replace the default dark/light theme menu?

[ArvindRSingh]

Instead of the dropdown to select the dark/light mode, I would like to show a button something like below or even better just a single icon

1. I tried to use hooks to replace the default dark/light mode menu with their own implementation but didn't find one for this menu. Please suggest if there is one.
2. OR is it possible to inject our own button(s) in the header without using hooks and with custom implementation to do the same.

[razonyang]

I'd recommend creating the layouts/partials/hb/modules/header-theme-toggle/index.html on your site root to modify the UI, you'll need to pay attention on the HTML class name and attributes, so that it can trigger the related JS functionalities.

Other modules rely on the custom events emitted by this module, such as the Mermaid module will change it's theme when light/dark mode changing, so I won't recommend creating a new module which may lost those functionalities.

See https://github.com/hbstack/header/blob/main/modules/theme-toggle/assets/hb/modules/header-theme-toggle/init/index.ts.

[razonyang]

BTW, PR are welcome if you want to share your implementation.

1. Fork the github.com/hbstack/header/modules/theme-toggle module repo and clone it into local.
2. Append replace github.com/hbstack/header/modules/theme-toggle => /path/to/hbstack/header/modules/theme-toggle into your site's go.mod to develop locally.
3. Modify the files and test.
4. Submit changes and create PR.

Please create an option for switching different UI, such as hb.params.header.theme_toggle.style, available options: dropdown, switch.

Reference:

1. https://hbstack.dev/develop/module/

[ArvindRSingh]

This turns out to be lot more complicated than I thought it would be. I have no experience with GoLang, so new here. Below are my learnings for others, feel free to correct me if I'm wrong.

1. The suggested partial layout layouts/partials/hb/modules/header-theme-toggle/index.html being Go Template lose control once rendered of any events, hence JS needs to jump in.
2. JS to change the icon on some DOM event (on click of the theme toggle button here) does not render the Bootstrap icons used as only the necessary icons are bundled which are referenced by the Hugo layouts.
3. For Bootstrap icons to be available after Hugo compilation, it needs to be referenced thorough a Bootstrap CSS file either downloaded in static/assets folder or through CDN which I could not figure out how.
4. I am yet to try downloading the CSS and reference it.

My love for Hugo and HBS and HBStack is turning painful, signing off for the day.

[razonyang]

This turns out to be lot more complicated than I thought it would be.

Yep, it's complicated if you're not familar Hugo development.

JS to change the icon on some DOM event (on click of the theme toggle button here) does not render the Bootstrap icons used as only the necessary icons are bundled which are referenced by the Hugo layouts.

That's a problem I didn't think about it.

For Bootstrap icons to be available after Hugo compilation, it needs to be referenced thorough a Bootstrap CSS file either downloaded in static/assets folder or through CDN which I could not figure out how.

This project use SVG icons instead of CSS/CDN, all available icons can be found on https://icons.hugomods.com/.

My love for Hugo and HBS and HBStack is turning painful.

Sadly to hear that, I can track this as a feature request.

[razonyang]

Done, implement since github.com/hbstack/header/modules/[email protected], but with a single button.