@goodnight-dev/react-hooks
    Preparing search index...

    Function useTheme

    • Read the user's OS-level color scheme preference (prefers-color-scheme), and stay in sync as they change it.

      Backed by useSyncExternalStore, so it is safe under concurrent rendering and does not tear. theme is undefined on the server — and on the client until the first matchMedia read commits — render a neutral state for that case rather than branching on isDarkMode / isLightMode, which are both false until theme resolves (there are only two real themes, so "both false" is unambiguous evidence that the preference isn't known yet).

      Returns ThemePreference

      theme plus isDarkMode / isLightMode convenience booleans. The returned object is memoized, so its identity only changes when theme does.

      const { theme, isDarkMode } = useTheme();
      if (theme === undefined) return null; // avoid a flash of the wrong theme
      return <div data-theme={theme}>{isDarkMode ? '🌙' : '☀️'}</div>;