[DarkMode] [setSystemTheme()]

[WinsleyJ]

Describe the bug I noticed a function called setSystemTheme() in the docs that is not being used. See https://tailwind-elements.com/docs/standard/getting-started/dark-mode/ under the Manually switching

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://tailwind-elements.com/docs/standard/getting-started/dark-mode/'
2. Click on 'Manual Selection'
3. Scroll down to 'See JS code'

Expected behavior Shouldn't there be a function declared that sets the theme based on the systems preference?

Actual behavior Once the theme is set to system, it should detect if it should set theme to dark or light

Show your code

// On page load or when changing themes, best to add inline in head to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
};

function setDarkTheme() {
  document.documentElement.classList.add("dark");
  localStorage.theme = "dark";
};

function setLightTheme() {
  document.documentElement.classList.remove("dark");
  localStorage.theme = "light";
};

function onThemeSwitcherItemClick(event) {
  const theme = event.target.dataset.theme;

  if (theme === "system") {
    localStorage.removeItem("theme");
    setSystemTheme(); // <----  This function right here
  } else if (theme === "dark") {
    setDarkTheme();
  } else {
    setLightTheme();
  }
};

const themeSwitcherItems = document.querySelectorAll("#theme-switcher");
themeSwitcherItems.forEach((item) => {
  item.addEventListener("click", onThemeSwitcherItemClick);
});

Suggestion So the functionality of setSystemTheme() should be something like this:

function setSystemTheme() {
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

    if (prefersDarkMode) {
      setDarkTheme();
    } else {
      setLightTheme();
    }
  }

And an extra theme-switcher for the system item:

<a id="theme-switcher"
      class="block w-full whitespace-nowrap bg-transparent px-3 py-2 text-sm font-normal text-gray-700 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none active:text-zinc-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-gray-400 dark:text-gray-100 dark:hover:bg-gray-600 focus:dark:bg-gray-600"
      href="#" data-theme="system" data-te-dropdown-item-ref>
      <div class="pointer-events-none">
        <div class="inline-block w-[24px] text-center" data-theme-icon="system">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="inline-block w-4 h-4" role="img"
            viewBox="0 0 640 512">
            <path fill="currentColor"
              d="M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z">
            </path>
          </svg>
        </div>
        <span data-theme-name="system">System</span>
      </div>
    </a>

[juujisai]

Hi! Thank you. I've added this idea to our list

[shubhalgupta]

@juujisai please assign this to me!

[juujisai]

@shubhalgupta We will update this page ourselves.

Thanks for showing interest in this.