Outdated Dark Mode Variable

[stupidJoon]

It seems that the dark mode section in the official documentation is using both theme and currentTheme inconsistent.

https://tailwindcss.com/docs/dark-mode#with-system-theme-support

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  "dark",
  localStorage.currentTheme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// Whenever the user explicitly chooses light mode
localStorage.currentTheme = "light";
// Whenever the user explicitly chooses dark mode
localStorage.currentTheme = "dark";
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("theme");

Based on the commit history, it seems that the variable was renamed from theme to currentTheme

24d9da6

The documentation should be updated accordingly.

Fix:

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  "dark",
  localStorage.currentTheme === "dark" ||
    (!("currentTheme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// Whenever the user explicitly chooses light mode
localStorage.currentTheme = "light";
// Whenever the user explicitly chooses dark mode
localStorage.currentTheme = "dark";
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("currentTheme");

[philipp-spiess]

Oh, yeah that code snippet is inconsistent. I should not have updated src/docs/dark-mode.mdx in the first place the change was just to ensure we rotate the local storage key when the v4 website launched haha. My bad, thanks!