@noeg/usetheme/dist/index.mjs.map

React hook and provider for application theming

{"version":3,"sources":["../src/hook.ts","../src/provider.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport { ThemeProviderContext } from './provider'\n\nexport const useTheme = () => {\n  const context = useContext(ThemeProviderContext)\n\n  if (!context)\n    throw new Error('useTheme must be used within a ThemeProvider')\n\n  return context\n}\n","import { useLocalStorage } from '@noeg/uselocalstorage'\nimport { createContext, useEffect, useState } from 'react'\n\ntype Theme = 'dark' | 'light' | 'system'\n\ntype ThemeProviderProps = {\n  children: React.ReactNode\n  defaultTheme?: Theme\n  storageKey?: string\n}\n\nexport const ThemeProviderContext = createContext<ThemeProviderState>(null)\n\ntype SystemTheme = Omit<Theme, 'system'>\n\ntype ThemeProviderState = {\n  theme: Theme\n  systemTheme: SystemTheme\n  setTheme: (theme: Theme) => void\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'vite-ui-theme',\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useLocalStorage<Theme>(storageKey, defaultTheme)\n  const [systemTheme, setSystemTheme] = useState<SystemTheme>(() =>\n    theme === 'system'\n      ? window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n      : theme\n  )\n\n  useEffect(() => {\n    const root = window.document.documentElement\n\n    root.classList.remove('light', 'dark')\n\n    if (theme === 'system') {\n      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')\n        .matches\n        ? 'dark'\n        : 'light'\n\n      root.classList.add(systemTheme)\n      setSystemTheme(systemTheme)\n      return\n    }\n\n    root.classList.add(theme)\n    setSystemTheme(theme)\n  }, [theme])\n\n  const value = {\n    theme,\n    systemTheme,\n    setTheme,\n  }\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  )\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;;;ACA3B,SAAS,uBAAuB;AAChC,SAAS,eAAe,WAAW,gBAAgB;AA8D/C;AApDG,IAAM,uBAAuB,cAAkC,IAAI;AAUnE,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,gBAAuB,YAAY,YAAY;AACzE,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IAAsB,MAC1D,UAAU,WACN,OAAO,WAAW,8BAA8B,EAAE,UAChD,SACA,UACF;AAAA,EACN;AAEA,YAAU,MAAM;AACd,UAAM,OAAO,OAAO,SAAS;AAE7B,SAAK,UAAU,OAAO,SAAS,MAAM;AAErC,QAAI,UAAU,UAAU;AACtB,YAAMA,eAAc,OAAO,WAAW,8BAA8B,EACjE,UACC,SACA;AAEJ,WAAK,UAAU,IAAIA,YAAW;AAC9B,qBAAeA,YAAW;AAC1B;AAAA,IACF;AAEA,SAAK,UAAU,IAAI,KAAK;AACxB,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,qBAAqB,UAArB,EAA+B,GAAG,OAAO,OACvC,UACH;AAEJ;;;ADhEO,IAAM,WAAW,MAAM;AAC5B,QAAM,UAAU,WAAW,oBAAoB;AAE/C,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAO;AACT;","names":["systemTheme"]}