Hiya, I've implemented a theme switching system on my (tailwind) site. This works fine, however, I have a sort of FOUC situation where if any page is loaded it takes some time (~200ms) for the theme to load in. So if the user is using a dark theme, a light theme (the default), will appear first and then switch to dark.

How can I prevent this from happening? Here is the code I use:

// darkMode: "class"
// usage example: dark:text-white text-black

export default function Theme() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const storedTheme = localStorage.getItem("theme");
    if (storedTheme) {
      setTheme(storedTheme);
    }
  }, []);

  useEffect(() => {
    const root = window.document.documentElement;
    if (theme === "dark") {
      root.classList.add("dark");
    } else {
      root.classList.remove("dark");
    }
  }, [theme]);
  // ... theme switching logic