header_custom.html

<div class="js-toggle-dark-mode-wrapper">
  <button
    class="btn js-toggle-dark-mode"
    aria-label="Switch to light mode"
    type="button"
  >
    ☼
  </button>
</div>

<script>
  const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");

  const setHtmlThemeAttr = (theme) => {
    document.documentElement.setAttribute("data-theme", theme);
  };

  jtd.addEvent(toggleDarkMode, "click", function () {
    if (jtd.getTheme() === "light") {
      jtd.setTheme("dark");
      setHtmlThemeAttr("dark");
      toggleDarkMode.textContent = "☼";
      toggleDarkMode.ariaLabel = "Switch to light mode";
      localStorage.setItem("theme", "dark");
    } else {
      jtd.setTheme("light");
      setHtmlThemeAttr("light");
      toggleDarkMode.textContent = "☾";
      toggleDarkMode.ariaLabel = "Switch to dark mode";
      localStorage.setItem("theme", "light");
    }
  });

  /* TODO: we can probably delete this (hacky workaround) if/when just-the-docs/#1223 is fixed.
   * Meanwhile, we check each time if there is a theme written to local storage and obey it.
   */
  window.addEventListener("DOMContentLoaded", function () {
    const theme = localStorage.getItem("theme") === "dark" ? "dark" : "light";
    jtd.setTheme(theme);
    setHtmlThemeAttr(theme);
    toggleDarkMode.textContent = theme === "dark" ? "☼" : "☾";
  });
</script>