feat: add 'system' inside the theme toggle (#766)

* feat: add 'system' inside the theme toggle

* chore: generate hugo_stats.json

* fix: missing css

* chore: reorganize code

* feat: menu

* chore: simplify

* chore: some i18n

* review

* fix: remove replace

assets/js/lang.js

@@ -3,8 +3,11 @@
   languageSwitchers.forEach((switcher) => {
     switcher.addEventListener('click', (e) => {
       e.preventDefault();
+
       switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
+
       const optionsElement = switcher.nextElementSibling;
+
       optionsElement.classList.toggle('hx:hidden');
 
       // Calculate the position of a language options element.

assets/js/theme.js

@@ -3,49 +3,116 @@
   const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
 
   const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle");
+  const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p");
 
-  // Change the icons of the buttons based on previous settings or system theme
-  if (
-    localStorage.getItem("color-theme") === "dark" ||
-    (!("color-theme" in localStorage) &&
-      ((window.matchMedia("(prefers-color-scheme: dark)").matches && defaultTheme === "system") || defaultTheme === "dark"))
-  ) {
-    themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
-  } else {
-    themeToggleButtons.forEach((el) => el.dataset.theme = "light");
+  function setSystemTheme() {
+    const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+    document.documentElement.classList.remove("dark", "light");
+    document.documentElement.classList.add(prefersColorScheme);
+
+    document.documentElement.style.colorScheme = prefersColorScheme;
   }
 
+  function applyTheme(theme) {
+    themeToggleButtons.forEach((btn) => btn.parentElement.dataset.theme = theme );
+
+    localStorage.setItem("color-theme", theme);
+  }
+
+  function switchTheme(theme) {
+     switch (theme) {
+      case "light":
+        document.documentElement.classList.remove("dark");
+        document.documentElement.classList.add(theme);
+        document.documentElement.style.colorScheme = theme;
+
+        applyTheme(theme);
+
+        break;
+      case "dark":
+        document.documentElement.classList.remove("light");
+        document.documentElement.classList.add(theme);
+        document.documentElement.style.colorScheme = theme;
+
+        applyTheme(theme);
+
+        break;
+      default:
+        setSystemTheme();
+        applyTheme("system");
+
+        break;
+    }
+  }
+
+  const colorTheme = "color-theme" in localStorage ? localStorage.getItem("color-theme") : defaultTheme;
+  switchTheme(colorTheme);
+
+  // Add click event handler to the menu items.
+  themeToggleOptions.forEach((option) => {
+    option.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      switchTheme(option.dataset.item);
+    })
+  })
+
   // Add click event handler to the buttons
-  themeToggleButtons.forEach((el) => {
-    el.addEventListener("click", function () {
-      if (localStorage.getItem("color-theme")) {
-        if (localStorage.getItem("color-theme") === "light") {
-          setDarkTheme();
-          localStorage.setItem("color-theme", "dark");
-        } else {
-          setLightTheme();
-          localStorage.setItem("color-theme", "light");
+  themeToggleButtons.forEach((toggler) => {
+    toggler.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      const optionsElement = toggler.nextElementSibling;
+
+      optionsElement.classList.toggle('hx:hidden');
+
+      // Calculate the position of a language options element.
+      const switcherRect = toggler.getBoundingClientRect();
+
+      // Must be called before optionsElement.clientWidth.
+      optionsElement.style.minWidth = `${Math.max(switcherRect.width, 50)}px`;
+
+      const isOnTop = toggler.dataset.location === 'top';
+      const isOnBottom = toggler.dataset.location === 'bottom';
+      const isOnBottomRight = toggler.dataset.location === 'bottom-right';
+      const isRTL = document.body.dir === 'rtl'
+
+      // Stuck on the left side of the switcher.
+      let translateX = switcherRect.left;
+
+      if (isOnTop && !isRTL || isOnBottom && isRTL || isOnBottomRight && !isRTL) {
+        // Stuck on the right side of the switcher.
+        translateX = switcherRect.right - optionsElement.clientWidth;
       }
-      } else {
-        if (document.documentElement.classList.contains("dark")) {
-          setLightTheme();
-          localStorage.setItem("color-theme", "light");
-        } else {
-          setDarkTheme();
-          localStorage.setItem("color-theme", "dark");
+
+      // Stuck on the top of the switcher.
+      let translateY = switcherRect.top - window.innerHeight - 15;
+
+      if (isOnTop) {
+        // Stuck on the bottom of the switcher.
+        translateY = switcherRect.top - window.innerHeight + 150;
       }
-      }
-      el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+
+      optionsElement.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
     });
   });
 
+
+  // Dismiss the menu when clicking outside
+  document.addEventListener('click', (e) => {
+    if (e.target.closest('.hextra-theme-toggle') === null) {
+      themeToggleButtons.forEach((toggler) => {
+        toggler.dataset.state = 'closed';
+        toggler.nextElementSibling.classList.add('hx:hidden');
+      });
+    }
+  });
+
   // Listen for system theme changes
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-    if (defaultTheme === "system" && !("color-theme" in localStorage)) {
-      e.matches ? setDarkTheme() : setLightTheme();
-      themeToggleButtons.forEach((el) =>
-        el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
-      );
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    if (localStorage.getItem("color-theme") === "system") {
+      setSystemTheme();
     }
   });
 })();

data/icons.yaml

@@ -4,6 +4,11 @@
 #
 # {{ partial "utils/icon.html" (dict "name" "github" "attributes" "height=24") }}
 
+contrast: >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="currentColor">
+    <path d="M 11.996094,2 C 6.4986225,2.0192368 2.03125,6.5024993 2.03125,12 c 0,5.497501 4.4673725,9.980763 9.964844,10 H 12 12.0039 c 5.497471,-0.01924 9.964844,-4.502499 9.964844,-10 0,-5.4975007 -4.467373,-9.9807632 -9.964844,-10 H 12 Z M 12,4 c 4.417218,0.017598 7.96875,3.5822356 7.96875,8 0,4.417764 -3.551532,7.982402 -7.96875,8 z" />
+  </svg>
+
 github: >
   <svg fill="currentColor" viewBox="3 3 18 18">
     <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>

exampleSite/hugo_stats.json

@@ -143,6 +143,7 @@
       "hextra-tabs-panel",
       "hextra-tabs-toggle",
       "hextra-theme-toggle",
+      "hextra-theme-toggle-options",
       "hextra-toc",
       "hide-tail",
       "highlight",
@@ -359,6 +360,7 @@
       "hx:group-[.copied]/copybtn:hidden",
       "hx:group-data-[theme=dark]:hidden",
       "hx:group-data-[theme=light]:hidden",
+      "hx:group-data-[theme=system]:hidden",
       "hx:group-hover/code:opacity-100",
       "hx:group-hover:underline",
       "hx:group-open:before:rotate-90",

i18n/en.yaml

@@ -7,11 +7,12 @@ dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
 light: "Light"
+next: "Next"
 noResultsFound: "No results found."
 onThisPage: "On this page"
-tags: "Tags"
 poweredBy: "Powered by Hextra"
+previous: "Prev"
 readMore: "Read more →"
 searchPlaceholder: "Search..."
-previous: "Prev"
-next: "Next"
+system: "System"
+tags: "Tags"

i18n/es.yaml

@@ -1,14 +1,18 @@
 backToTop: "Subir al inicio"
 changeLanguage: "Cambiar idioma"
 changeTheme: "Cambiar tema"
+copyCode: "Copiar código"
 copyright: "© 2025 Proyecto Hextra."
 dark: "Oscuro"
 editThisPage: "Edita esta página en GitHub →"
 lastUpdated: "Última actualización"
 light: "Claro"
+next: "Siguiente"
 noResultsFound: "No hubo resultados."
 onThisPage: "En esta página"
-tags: "Etiquetas"
 poweredBy: "Con tecnología de Hextra"
+previous: "Anterior"
 readMore: "Leer más →"
 searchPlaceholder: "Buscar..."
+system: "Sistema"
+tags: "Etiquetas"

i18n/fr.yaml

@@ -1,14 +1,18 @@
 backToTop: "Revenir en haut"
 changeLanguage: "Changer la langue"
 changeTheme: "Thème d'affichage"
+copyCode: "Copier le code"
 copyright: "© 2025 Hextra Project."
 dark: "Sombre"
 editThisPage: "Modifier cette page sur GitHub →"
 lastUpdated: "Dernière modification"
 light: "Clair"
+next: "Suivant"
 noResultsFound: "Pas de résultats trouvés"
 onThisPage: "Sur cette page"
-tags: "Étiquettes"
 poweredBy: "Propulsé par Hextra"
+previous: "Précdent"
 readMore: "Lire plus →"
 searchPlaceholder: "Rechercher..."
+system: "Système"
+tags: "Étiquettes"

layouts/_partials/head.html

@@ -59,29 +59,6 @@
     {{ partial "google-analytics.html" . -}}
   {{- end }}
 
-  <script>
-    /* Initialize light/dark mode */
-    const defaultTheme = '{{ site.Params.theme.default | default `system`}}';
-
-    const setDarkTheme = () => {
-      document.documentElement.classList.add("dark");
-      document.documentElement.style.colorScheme = "dark";
-    }
-    const setLightTheme = () => {
-      document.documentElement.classList.remove("dark");
-      document.documentElement.style.colorScheme = "light";
-    }
-
-    if ("color-theme" in localStorage) {
-      localStorage.getItem("color-theme") === "dark" ? setDarkTheme() : setLightTheme();
-    } else {
-      defaultTheme === "dark" ? setDarkTheme() : setLightTheme();
-      if (defaultTheme === "system") {
-        window.matchMedia("(prefers-color-scheme: dark)").matches ? setDarkTheme() : setLightTheme();
-      }
-    }
-  </script>
-
   <!-- Math engine -->
   {{ $noop := .WordCount -}}
   {{- $engine := site.Params.math.engine | default "katex" -}}

layouts/_partials/navbar.html

@@ -39,7 +39,7 @@
             <span class="hx:sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- else if eq .Params.type "theme-toggle" -}}
-          {{- partial "theme-toggle.html" (dict "iconHeight" $iconHeight "class" "hx:p-2" "hideLabel" (not .Params.label)) -}}
+          {{- partial "theme-toggle.html" (dict "iconHeight" $iconHeight "hideLabel" (not .Params.label) "iconHeight" $iconHeight "location" "top" "class" "hx:p-2") -}}
         {{- else if eq .Params.type "language-switch" -}}
           {{- partial "language-switch" (dict "context" $page "grow" false "hideLabel" (not .Params.label) "iconName" (.Params.icon | default "translate") "iconHeight" $iconHeight "location" "top" "class" "hx:p-2") -}}
         {{- else -}}

layouts/_partials/sidebar.html

@@ -46,7 +46,7 @@
     <div class="{{ $switchesClass }} {{ with hugo.IsMultilingual }}hx:justify-end{{ end }} hx:sticky hx:bottom-0 hx:max-h-(--menu-height) hx:bg-white hx:dark:bg-dark hx:mx-4 hx:py-4 hx:shadow-[0_-12px_16px_#fff] hx:flex hx:items-center hx:gap-2 hx:border-gray-200 hx:dark:border-neutral-800 hx:dark:shadow-[0_-12px_16px_#111] hx:contrast-more:border-neutral-400 hx:contrast-more:shadow-none hx:contrast-more:dark:shadow-none hx:border-t" data-toggle-animation="show">
       {{- with hugo.IsMultilingual -}}
         {{- partial "language-switch" (dict "context" $context "grow" true) -}}
-        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
+        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true "location" "bottom-right") }}{{ end -}}
       {{- else -}}
         {{- with $displayThemeToggle -}}
           <div class="hx:flex hx:grow hx:flex-col">{{ partial "theme-toggle" }}</div>

layouts/_partials/theme-toggle.html

@@ -1,22 +1,68 @@
 {{- $hideLabel := .hideLabel -}}
 {{- $iconHeight := .iconHeight | default 12 -}}
 {{- $class := .class | default "hx:h-7 hx:px-2 hx:text-xs hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400" -}}
+{{- $location := .location | default "bottom" -}}
 
 {{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
 {{- $light := (T "light") | default "Light" -}}
 {{- $dark := (T "dark") | default "Dark" -}}
+{{- $system := (T "system") | default "System" -}}
 
+<div class="hx:flex hx:justify-items-start hx:group" data-theme="light">
   <button
     title="{{ $changeTheme }}"
-  data-theme="light"
-  class="hextra-theme-toggle hx:cursor-pointer hx:group hx:rounded-md hx:text-left {{ $class }}"
+    data-state="closed"
+    data-location="{{ $location }}"
+    class="hextra-theme-toggle hx:cursor-pointer hx:rounded-md hx:text-left hx:font-medium {{ $class }} hx:grow"
     type="button"
     aria-label="{{ $changeTheme }}"
   >
     <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
-    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf "height=%d class=\"hx:group-data-[theme=light]:hidden\"" $iconHeight)) -}}
-    {{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
-    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf "height=%d class=\"hx:group-data-[theme=dark]:hidden\"" $iconHeight)) -}}
-    {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
+      {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf `height=%d class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden">{{ $light }}</span>{{ end -}}
+      {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf `height=%d class="hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden">{{ $dark }}</span>{{ end -}}
+      {{- partial "utils/icon.html" (dict "name" "contrast" "attributes" (printf `height=%d class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden">{{ $system }}</span>{{ end -}}
     </div>
   </button>
+  <ul
+    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
+    data-theme="light"
+  >
+    <li class="hx:flex hx:flex-col">
+      <p
+        data-item="light"
+        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+      >
+        {{ $light }}
+         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden">
+          {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
+         </span>
+      </p>
+    </li>
+    <li class="hx:flex hx:flex-col">
+      <p
+        data-item="dark"
+        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+      >
+        {{ $dark }}
+         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden">
+          {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
+         </span>
+      </p>
+    </li>
+    <li class="hx:flex hx:flex-col">
+      <p
+        data-item="system"
+        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+      >
+        {{ $system }}
+         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden">
+         {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
+         </span>
+      </p>
+    </li>
+  </ul>
+</div>