@tamagui/next-theme 1.0.1-beta.98 → 1.0.1-rc.0

package/src/NextTheme.tsx

@@ -1,12 +1,12 @@
 // https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx
 // forked temporarily due to buggy theme change
 
+import { useEvent } from '@tamagui/use-event'
 import NextHead from 'next/head'
 import * as React from 'react'
 import {
   createContext,
   memo,
-  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -23,9 +23,11 @@ export interface UseThemeProps {
   /** Forced theme name for the current page */
   forcedTheme?: string
   /** Update the theme */
-  setTheme: (theme: string) => void
-  toggleTheme: () => void
-  /** Active theme name */
+  set: (theme: string) => void
+  toggle: () => void
+  /** Active theme name - will return "system" if not overriden, see "resolvedTheme" for getting resolved system value */
+  current?: string
+  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */
   theme?: string
   /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
   resolvedTheme?: string
@@ -57,12 +59,18 @@ export interface ThemeProviderProps {
   onChangeTheme?: (name: string) => void
 }
 
-const ThemeContext = createContext<UseThemeProps>({
-  toggleTheme: () => {},
-  setTheme: (_) => {},
+const ThemeSettingContext = createContext<UseThemeProps>({
+  toggle: () => {},
+  set: (_) => {},
   themes: [],
 })
-export const useTheme = () => useContext(ThemeContext)
+
+/**
+ * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
+ */
+export const useTheme = () => useContext(ThemeSettingContext)
+
+export const useThemeSetting = () => useContext(ThemeSettingContext)
 
 const colorSchemes = ['light', 'dark']
 const MEDIA = '(prefers-color-scheme: dark)'
@@ -85,7 +93,7 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
   enableSystem = true,
   enableColorScheme = true,
   storageKey = 'theme',
-  themes = ['light', 'dark'],
+  themes = colorSchemes,
   defaultTheme = enableSystem ? 'system' : 'light',
   attribute = 'class',
   onChangeTheme,
@@ -100,26 +108,21 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
   // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)
   const attrs = !value ? themes : Object.values(value)
 
-  const handleMediaQuery = useCallback(
-    (e?) => {
-      const systemTheme = getSystemTheme(e)
-      React.startTransition(() => {
-        setResolvedTheme(systemTheme)
-      })
-      if (theme === 'system' && !forcedTheme) handleChangeTheme(systemTheme, false)
-    },
-    [theme, forcedTheme]
-  )
+  const handleMediaQuery = useEvent((e?) => {
+    const systemTheme = getSystemTheme(e)
+    React.startTransition(() => {
+      setResolvedTheme(systemTheme)
+    })
+    if (theme === 'system' && !forcedTheme) handleChangeTheme(systemTheme, false)
+  })
 
   // Ref hack to avoid adding handleMediaQuery as a dep
   const mediaListener = useRef(handleMediaQuery)
   mediaListener.current = handleMediaQuery
 
-  const handleChangeTheme = useCallback((theme, updateStorage = true, updateDOM = true) => {
+  const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {
     let name = value?.[theme] || theme
 
-    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null
-
     if (updateStorage) {
       try {
         localStorage.setItem(storageKey, theme)
@@ -137,16 +140,14 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
 
     if (updateDOM) {
       const d = document.documentElement
-
       if (attribute === 'class') {
         d.classList.remove(...attrs)
         d.classList.add(name)
       } else {
         d.setAttribute(attribute, name)
       }
-      enable?.()
     }
-  }, [])
+  })
 
   useIsomorphicLayoutEffect(() => {
     const handler = (...args: any) => mediaListener.current(...args)
@@ -160,17 +161,14 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
     }
   }, [])
 
-  const setTheme = useCallback(
-    (newTheme) => {
-      if (forcedTheme) {
-        handleChangeTheme(newTheme, true, false)
-      } else {
-        handleChangeTheme(newTheme)
-      }
-      setThemeState(newTheme)
-    },
-    [forcedTheme]
-  )
+  const set = useEvent((newTheme) => {
+    if (forcedTheme) {
+      handleChangeTheme(newTheme, true, false)
+    } else {
+      handleChangeTheme(newTheme)
+    }
+    setThemeState(newTheme)
+  })
 
   // localStorage event handling
   useEffect(() => {
@@ -180,19 +178,19 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
       }
       // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
       const theme = e.newValue || defaultTheme
-      setTheme(theme)
+      set(theme)
     }
     window.addEventListener('storage', handleStorage)
     return () => {
       window.removeEventListener('storage', handleStorage)
     }
-  }, [])
+  }, [defaultTheme, set, storageKey])
 
   // color-scheme handling
   useIsomorphicLayoutEffect(() => {
     if (!enableColorScheme) return
 
-    let colorScheme =
+    const colorScheme =
       // If theme is forced to light or dark, use that
       forcedTheme && colorSchemes.includes(forcedTheme)
         ? forcedTheme
@@ -206,28 +204,46 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
 
     // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
     // if color-scheme is null, this will remove the property
-    document.documentElement.style.setProperty('color-scheme', colorScheme)
+    const userPrefers =
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+
+    const wePrefer = colorScheme || 'light'
+
+    // avoid running this because it causes full page reflow
+    if (userPrefers !== wePrefer) {
+      document.documentElement.style.setProperty('color-scheme', colorScheme)
+    }
   }, [enableColorScheme, theme, resolvedTheme, forcedTheme])
 
+  const toggle = useEvent(() => {
+    const order =
+      resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
+    const next = order[(order.indexOf(theme) + 1) % order.length]
+    set(next)
+  })
+
+  const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme
+  const systemTheme = (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
   const contextValue = useMemo(() => {
-    return {
+    const value: UseThemeProps = {
       theme,
-      setTheme,
-      toggleTheme() {
-        const order =
-          resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
-        const next = order[(order.indexOf(theme) + 1) % order.length]
-        setTheme(next)
-      },
+      current: theme,
+      set,
+      toggle,
       forcedTheme,
-      resolvedTheme: theme === 'system' ? resolvedTheme : theme,
+      resolvedTheme: contextResolvedTheme,
       themes: enableSystem ? [...themes, 'system'] : themes,
-      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined,
+      systemTheme,
     } as const
-  }, [theme, forcedTheme, resolvedTheme, enableSystem])
+    return value
+  }, [theme, set, toggle, forcedTheme, contextResolvedTheme, enableSystem, themes, systemTheme])
 
   return (
-    <ThemeContext.Provider value={contextValue}>
+    <ThemeSettingContext.Provider value={contextValue}>
       <ThemeScript
         {...{
           forcedTheme,
@@ -240,8 +256,9 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
           attrs,
         }}
       />
-      {children}
-    </ThemeContext.Provider>
+      {/* because on SSR we re-run and can avoid whole tree re-render */}
+      {useMemo(() => children, [children])}
+    </ThemeSettingContext.Provider>
   )
 }
 
@@ -337,26 +354,6 @@ const getTheme = (key: string, fallback?: string) => {
   return theme || fallback
 }
 
-const disableAnimation = () => {
-  const css = document.createElement('style')
-  css.appendChild(
-    document.createTextNode(
-      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
-    )
-  )
-  document.head.appendChild(css)
-
-  return () => {
-    // Force restyle
-    ;(() => window.getComputedStyle(document.body))()
-
-    // Wait for next tick before removing
-    setTimeout(() => {
-      document.head.removeChild(css)
-    }, 1)
-  }
-}
-
 const getSystemTheme = (e?: MediaQueryList) => {
   if (!e) {
     e = window.matchMedia(MEDIA)

package/types/NextTheme.d.ts

@@ -1,28 +1,49 @@
 import * as React from 'react';
 export interface UseThemeProps {
+    /** List of all available theme names */
     themes: string[];
+    /** Forced theme name for the current page */
     forcedTheme?: string;
-    setTheme: (theme: string) => void;
-    toggleTheme: () => void;
+    /** Update the theme */
+    set: (theme: string) => void;
+    toggle: () => void;
+    /** Active theme name - will return "system" if not overriden, see "resolvedTheme" for getting resolved system value */
+    current?: string;
+    /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */
     theme?: string;
+    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
     resolvedTheme?: string;
+    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
     systemTheme?: 'dark' | 'light';
 }
 export interface ThemeProviderProps {
     children?: any;
+    /** List of all available theme names */
     themes?: string[];
+    /** Forced theme name for the current page */
     forcedTheme?: string;
+    /** Whether to switch between dark and light themes based on prefers-color-scheme */
     enableSystem?: boolean;
     systemTheme?: string;
+    /** Disable all CSS transitions when switching themes */
     disableTransitionOnChange?: boolean;
+    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
     enableColorScheme?: boolean;
+    /** Key used to store theme setting in localStorage */
     storageKey?: string;
+    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
     defaultTheme?: string;
+    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
     attribute?: string | 'class';
+    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
     value?: ValueObject;
     onChangeTheme?: (name: string) => void;
 }
+/**
+ * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
+ */
 export declare const useTheme: () => UseThemeProps;
+export declare const useThemeSetting: () => UseThemeProps;
 interface ValueObject {
     [themeName: string]: string;
 }

package/dist/jsx/NextTheme.js

@@ -1,219 +0,0 @@
-import NextHead from "next/head";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-const ThemeContext = createContext({
-  toggleTheme: () => {
-  },
-  setTheme: (_) => {
-  },
-  themes: []
-});
-const useTheme = () => useContext(ThemeContext);
-const colorSchemes = ["light", "dark"];
-const MEDIA = "(prefers-color-scheme: dark)";
-const useRootTheme = () => {
-  const isClient = typeof document !== "undefined";
-  const classes = isClient ? [...document.documentElement.classList] : [];
-  const isDark = classes.includes("t_dark");
-  return useState(isDark ? "dark" : "light");
-};
-const NextThemeProvider = ({
-  forcedTheme,
-  disableTransitionOnChange = true,
-  enableSystem = true,
-  enableColorScheme = true,
-  storageKey = "theme",
-  themes = ["light", "dark"],
-  defaultTheme = enableSystem ? "system" : "light",
-  attribute = "class",
-  onChangeTheme,
-  value = {
-    dark: "t_dark",
-    light: "t_light"
-  },
-  children
-}) => {
-  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
-  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
-  const attrs = !value ? themes : Object.values(value);
-  const handleMediaQuery = useCallback((e) => {
-    const systemTheme = getSystemTheme(e);
-    setResolvedTheme(systemTheme);
-    if (theme === "system" && !forcedTheme)
-      handleChangeTheme(systemTheme, false);
-  }, [theme, forcedTheme]);
-  const mediaListener = useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  const handleChangeTheme = useCallback((theme2, updateStorage = true, updateDOM = true) => {
-    let name = (value == null ? void 0 : value[theme2]) || theme2;
-    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
-    if (updateStorage) {
-      try {
-        localStorage.setItem(storageKey, theme2);
-      } catch (e) {
-      }
-    }
-    if (theme2 === "system" && enableSystem) {
-      const resolved = getSystemTheme();
-      name = (value == null ? void 0 : value[resolved]) || resolved;
-    }
-    onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
-    if (updateDOM) {
-      const d = document.documentElement;
-      if (attribute === "class") {
-        d.classList.remove(...attrs);
-        d.classList.add(name);
-      } else {
-        d.setAttribute(attribute, name);
-      }
-      enable == null ? void 0 : enable();
-    }
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    const handler = (...args) => mediaListener.current(...args);
-    const media = window.matchMedia(MEDIA);
-    media.addListener(handler);
-    handler(media);
-    return () => {
-      media.removeListener(handler);
-    };
-  }, []);
-  const setTheme = useCallback((newTheme) => {
-    if (forcedTheme) {
-      handleChangeTheme(newTheme, true, false);
-    } else {
-      handleChangeTheme(newTheme);
-    }
-    setThemeState(newTheme);
-  }, [forcedTheme]);
-  useEffect(() => {
-    const handleStorage = (e) => {
-      if (e.key !== storageKey) {
-        return;
-      }
-      const theme2 = e.newValue || defaultTheme;
-      setTheme(theme2);
-    };
-    window.addEventListener("storage", handleStorage);
-    return () => {
-      window.removeEventListener("storage", handleStorage);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    if (!enableColorScheme)
-      return;
-    let colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
-    document.documentElement.style.setProperty("color-scheme", colorScheme);
-  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
-  const contextValue = useMemo(() => {
-    return {
-      theme,
-      setTheme,
-      toggleTheme() {
-        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
-        const next = order[(order.indexOf(theme) + 1) % order.length];
-        setTheme(next);
-      },
-      forcedTheme,
-      resolvedTheme: theme === "system" ? resolvedTheme : theme,
-      themes: enableSystem ? [...themes, "system"] : themes,
-      systemTheme: enableSystem ? resolvedTheme : void 0
-    };
-  }, [theme, forcedTheme, resolvedTheme, enableSystem]);
-  return <ThemeContext.Provider value={contextValue}>
-    <ThemeScript {...{
-      forcedTheme,
-      storageKey,
-      systemTheme: resolvedTheme,
-      attribute,
-      value,
-      enableSystem,
-      defaultTheme,
-      attrs
-    }} />
-    {children}
-  </ThemeContext.Provider>;
-};
-const ThemeScript = memo(({
-  forcedTheme,
-  storageKey,
-  attribute,
-  enableSystem,
-  defaultTheme,
-  value,
-  attrs
-}) => {
-  const optimization = (() => {
-    if (attribute === "class") {
-      const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
-      return `var d=document.documentElement.classList;${removeClasses};`;
-    } else {
-      return `var d=document.documentElement;`;
-    }
-  })();
-  const updateDOM = (name, literal) => {
-    name = (value == null ? void 0 : value[name]) || name;
-    const val = literal ? name : `'${name}'`;
-    if (attribute === "class") {
-      return `d.add(${val})`;
-    }
-    return `d.setAttribute('${attribute}', ${val})`;
-  };
-  const defaultSystem = defaultTheme === "system";
-  return <NextHead>{forcedTheme ? <script key="next-themes-script" dangerouslySetInnerHTML={{
-    __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-  }} /> : enableSystem ? <script key="next-themes-script" dangerouslySetInnerHTML={{
-    __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${!defaultSystem ? updateDOM(defaultTheme) + ";" : ""}if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM("dark")}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
-  }} /> : <script key="next-themes-script" dangerouslySetInnerHTML={{
-    __html: `!function(){try{${optimization}var e=localStorage.getItem("${storageKey}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}else{${updateDOM(defaultTheme)};}}catch(t){}}();`
-  }} />}</NextHead>;
-}, (prevProps, nextProps) => {
-  if (prevProps.forcedTheme !== nextProps.forcedTheme)
-    return false;
-  return true;
-});
-const getTheme = (key, fallback) => {
-  if (typeof window === "undefined")
-    return void 0;
-  let theme;
-  try {
-    theme = localStorage.getItem(key) || void 0;
-  } catch (e) {
-  }
-  return theme || fallback;
-};
-const disableAnimation = () => {
-  const css = document.createElement("style");
-  css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
-  document.head.appendChild(css);
-  return () => {
-    ;
-    (() => window.getComputedStyle(document.body))();
-    setTimeout(() => {
-      document.head.removeChild(css);
-    }, 1);
-  };
-};
-const getSystemTheme = (e) => {
-  if (!e) {
-    e = window.matchMedia(MEDIA);
-  }
-  const isDark = e.matches;
-  const systemTheme = isDark ? "dark" : "light";
-  return systemTheme;
-};
-export {
-  NextThemeProvider,
-  useRootTheme,
-  useTheme
-};

package/dist/jsx/index.js

@@ -1 +0,0 @@
-export * from "./NextTheme";

package/types/NextTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NextTheme.d.ts","sourceRoot":"","sources":["../src/NextTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,WAAW,aAAa;IAE5B,MAAM,EAAE,MAAM,EAAE,CAAA;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IAEd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAOD,eAAO,MAAM,QAAQ,qBAAiC,CAAA;AAKtD,UAAU,WAAW;IACnB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,8DAMxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoK1D,CAAA"}

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}