Help Me Stop Theme Flashing In SolidStart

import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../qs.config";

export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX

  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}

import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../qs.config";

export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX

  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}