hugo-toha/layouts/partials/navigators/theme-selector.html

{{/*  variables for enabling/disabling various features  */}}
{{ $darkEnabled  := true }}
{{ $lightEnabled := true }}
{{ if site.Params.features.theme.enable }}
  {{ $darkEnabled   = site.Params.features.theme.services.dark   | default true }}
  {{ $lightEnabled  = site.Params.features.theme.services.light  | default true }}
{{ end }}

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
  data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
</a>
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
  {{ if $lightEnabled }}
  <a class="dropdown-item nav-link" href="#" data-scheme="light">
    <img class="theme-icon" src="{{ "icons/sun-svgrepo-com.svg" | relURL }}" width=20 alt="Light Theme">
  </a>
  {{ end }}
  {{ if $darkEnabled }}
  <a class="dropdown-item nav-link" href="#" data-scheme="dark">
    <img class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
  </a>
  {{ end }}
  {{ if and $lightEnabled $darkEnabled }}
  <a class="dropdown-item nav-link" href="#" data-scheme="system">
    <img class="theme-icon" src="{{ "icons/computer-svgrepo-com.svg" | relURL }}" width=20 alt="System Theme">
  </a>
  {{ end }}
</div>
</li>