Have dark/light theme switcher in header

[tyayers]

Hi, love the project and using it for an upcoming site! One issue I have though is that the dark/light switcher is not very visible in the footer - today usually the switcher is at the top in the header.

Is there any way to add the switcher to the header? It can also be in the footer, but I think more users would find it in the upper right menu corner.

Thanks!

[tyayers]

I added these lines to my assets/css/custom.css, which moved the current switcher to the top right of the screen (not perfect but I think more visible than at the bottom..):

#appearance-switcher {
position: absolute;
top: -9px;
right: 6px;
}

[venteto]

I agree, I think most of the time you see these types of theme switchers in the header, it is less intuitive/discoverable in the footer. Every time I've ever seen one, beyond both Hugo sites, and beyond the Congo theme, it is always in the header.

But I'd keep it outside of the menu, so if the hamburger menu option is invoked, the switcher icon is still present in addition to the hamburger menu icon (or at least make it it an option to keep it separate and outside of the hamburger menu icon in the header).

[ka1h]

I'm with you @venteto and @tyayers. Recently ich edited the layouts/partials/header/basic.html like so:

...
      {{/* Main menu */}}
      {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
        <ul class="flex items-center list-none flex-col ltr:text-right rtl:text-left sm:flex-row">
          {{/* Appearance switch */}}
          {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
            <!-- custom appearance switcher in main menu & fixed margins -->
            <li class="flex mb-2 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
              <button id="appearance-switcher" type="button">
                <div
                  class="flex items-center justify-center w-6 h-6 dark:hidden"
                  title="{{ i18n "footer.dark_appearance" }}"
                >
                  {{ partial "icon.html" "moon" }}
                </div>
                <div
                  class="items-center justify-center hidden w-6 h-6 dark:flex"
                  title="{{ i18n "footer.light_appearance" }}"
                >
                  {{ partial "icon.html" "sun" }}
                </div>
              </button>
              </li>
            </div>
          {{ end }}
          {{ if .Site.Menus.main }}
            {{ range .Site.Menus.main }}
              <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
...

... and removed the appearance switcher from layouts/partials/footer.html

The result looks like that:

or collapsed for smaller screens:

Of course making a parameter for the positioning of the switcher is also possible. If there is any interest I can open a pull request, but it seems the discussion is kind of stale right now.

Cheers,
Kai

[capac]

Hi Kai,
I've used your solution and it looks nice. Is there a way to make the spacing between words narrower?
Cheers,
Angelo

[jpanther]

You shouldn't need this solution, @capac. The theme now supports this natively.

[capac]

Thanks, I found out how to add the dark/light theme switcher in the header, but is there a way to decrease the space between the words or icons in the header?

[jpanther]

I'm pleased to report that v2.5.0 of the theme now includes the option to position the appearance switcher within any menu.

[venteto]

@jpanther just tried it out and it looks great, thank you so much!

[hxr413]

Hi, I'm trying to put the appearance switcher in the header yet couldn't find any instruction. I notice that there is a showAppearanceSwitcher for footer in params.toml, but it doesn't work for the header? Could you please explain how that works? Thanks a lot!

[jpanther]

@hxr413 The appearance switcher can be placed in menus using the config in the menus.toml file. This process is covered in the Getting Started docs.

[hxr413]

Oh I get it now, thanks for pointing it out for me!