Function ThemeSwitcher

Example

<ThemeSwitcher />
Copy

Source

• Source code

const ThemeSwitcher = ({
  forcedTheme,
  forcedColorScheme,
  targetSelector,
  themeTransition,
  styles,
  nonce,
}: ThemeSwitcherProps) => {
  const k = targetSelector || `#${DEFAULT_ID}`;
  // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
  if (typeof window !== "undefined" && !window.m)
    noFOUCScript(k, initialState, styles, forcedTheme, forcedColorScheme);

  const [state, setState] = useThemeStore(targetSelector);
  const [forced] = useForcedStore(targetSelector);

  useEffect(() => {
    media.addEventListener("change", () =>
      setState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
    );
    addEventListener("storage", e => {
      if (e.key === k) setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
    });
  }, []);

  useEffect(() => {
    const restoreThansitions = modifyTransition(themeTransition);
    updateDOM(resolveTheme(state));
    restoreThansitions();
    localStorage.setItem(k, JSON.stringify(state));
  }, [state]);

  useEffect(() => {
    updateForcedProps(forcedTheme, forcedColorScheme);
    updateDOM(resolveTheme(state));
  }, [forcedColorScheme, forcedTheme]);

  useEffect(() => {
    updateForcedState(forced.f, forced.fc);
    updateDOM(resolveTheme(state));
  }, [forced]);

  return <Script {...{ k, n: nonce, s: styles, t: forcedTheme, c: forcedColorScheme }} />;
}
Copy