@vxrn/color-scheme 1.2.28 → 1.2.29

package/src/userScheme.ts

@@ -0,0 +1,149 @@
+import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
+import { useState, useMemo } from 'react'
+import { Appearance } from 'react-native'
+import { getSystemScheme, type Scheme } from './systemScheme'
+
+export type SchemeSetting = 'system' | 'light' | 'dark'
+
+export type UserScheme = {
+  /** The user's preference: 'system', 'light', or 'dark' */
+  setting: SchemeSetting
+  /** The resolved scheme: 'light' or 'dark' */
+  value: Scheme
+  /** Update the scheme setting */
+  set: (setting: SchemeSetting) => void
+}
+
+type SchemeListener = (setting: SchemeSetting, value: Scheme) => void
+
+const listeners = new Set<SchemeListener>()
+const storageKey = 'vxrn-scheme'
+
+let currentSetting: SchemeSetting = 'system'
+let currentValue: Scheme = 'light'
+
+// native: set up listener at module level
+if (process.env.TAMAGUI_TARGET === 'native') {
+  Appearance.addChangeListener((next) => {
+    if (currentSetting === 'system' && next.colorScheme) {
+      updateValueFromSystem()
+    }
+  })
+
+  const cur = Appearance.getColorScheme()
+  if (cur && currentSetting === 'system') {
+    currentValue = cur
+  }
+}
+
+// web: lazy listener setup for SSR safety
+let isWebListening = false
+function startWebListener() {
+  if (isWebListening) return
+  isWebListening = true
+
+  const matcher =
+    typeof window !== 'undefined' ? window.matchMedia?.('(prefers-color-scheme: dark)') : null
+
+  const onSystemChange = () => {
+    if (currentSetting === 'system') {
+      updateValueFromSystem()
+    }
+  }
+
+  onSystemChange()
+  matcher?.addEventListener?.('change', onSystemChange)
+}
+
+function resolveValue(setting: SchemeSetting): Scheme {
+  if (setting === 'system') {
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      return Appearance.getColorScheme() || 'light'
+    }
+    return getSystemScheme()
+  }
+  return setting
+}
+
+// Only update the resolved value when system theme changes (don't change setting)
+function updateValueFromSystem() {
+  const value = resolveValue('system')
+  if (value !== currentValue) {
+    currentValue = value
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      Appearance.setColorScheme(value)
+    }
+
+    listeners.forEach((l) => {
+      l(currentSetting, currentValue)
+    })
+  }
+}
+
+function updateScheme(setting: SchemeSetting) {
+  const value = setting === 'system' ? resolveValue('system') : setting
+
+  if (value !== currentValue || currentSetting !== setting) {
+    currentSetting = setting
+    currentValue = value
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      Appearance.setColorScheme(value)
+    }
+
+    listeners.forEach((l) => {
+      l(currentSetting, currentValue)
+    })
+  }
+}
+
+export function setUserScheme(setting: SchemeSetting) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(storageKey, setting)
+  }
+  updateScheme(setting)
+}
+
+export function getUserScheme(): { setting: SchemeSetting; value: Scheme } {
+  return { setting: currentSetting, value: currentValue }
+}
+
+export function onUserSchemeChange(listener: SchemeListener) {
+  listeners.add(listener)
+  listener(currentSetting, currentValue)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function useUserScheme(): UserScheme {
+  const [state, setState] = useState(() => getUserScheme())
+
+  useIsomorphicLayoutEffect(() => {
+    // restore from localStorage on mount
+    if (typeof localStorage !== 'undefined') {
+      const stored = localStorage.getItem(storageKey) as SchemeSetting | null
+      if (stored) {
+        updateScheme(stored)
+      }
+    }
+
+    const dispose = onUserSchemeChange((setting, value) => {
+      setState({ setting, value })
+    })
+
+    startWebListener()
+
+    return dispose
+  }, [])
+
+  return useMemo(
+    () => ({
+      setting: state.setting,
+      value: state.value,
+      set: setUserScheme,
+    }),
+    [state.setting, state.value]
+  )
+}

package/types/index.d.ts

@@ -1,21 +1,15 @@
-import { type ColorSchemeName } from '@vxrn/universal-color-scheme';
-export type Scheme = 'light' | 'dark';
-export type SchemeSetting = 'system' | 'light' | 'dark';
-export { getColorScheme, onColorSchemeChange } from '@vxrn/universal-color-scheme';
-export declare const clearColorSchemeSetting: () => void;
-export declare const useColorScheme: () => readonly ["light" | "dark", typeof setSchemeSetting];
-export declare function useSchemeSetting(): readonly [{
-    setting: SchemeSetting;
-    scheme: "light" | "dark";
-}, typeof setSchemeSetting];
-export declare function setSchemeSetting(next: SchemeSetting): void;
+import type { Scheme } from './systemScheme';
+export type { Scheme } from './systemScheme';
+export type { SchemeSetting, UserScheme } from './userScheme';
+export { getSystemScheme, useSystemScheme } from './systemScheme';
+export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme } from './userScheme';
 export declare function SchemeProvider({ children, getClassName, }: {
     children: any;
-    getClassName?: (name: ColorSchemeName) => string;
+    getClassName?: (name: Scheme) => string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const MetaTheme: ({ color, darkColor, lightColor, }: {
-    color: string;
+export declare function MetaTheme({ color, darkColor, lightColor, }: {
+    color?: string;
     darkColor: string;
     lightColor: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,8BAA8B,CAAA;AAIrC,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AACrC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAEvD,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAIlF,eAAO,MAAM,uBAAuB,YAEnC,CAAA;AAcD,eAAO,MAAM,cAAc,4DAG1B,CAAA;AAED,wBAAgB,gBAAgB;aAZrB,aAAa;YACd,OAAO,GAAG,MAAM;4BAczB;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,aAAa,QAKnD;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EAER,YAAoC,GACrC,EAAE;IACD,QAAQ,EAAE,GAAG,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,MAAM,CAAA;CACjD,2CAkDA;AAED,eAAO,MAAM,SAAS,GAAI,mCAIvB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,4CA+BA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAI5C,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG7D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI9F,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,YAAoC,GACrC,EAAE;IACD,QAAQ,EAAE,GAAG,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACxC,2CAmCA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,2CAyBA"}

package/types/systemScheme.d.ts

@@ -0,0 +1,4 @@
+export type Scheme = 'light' | 'dark';
+export declare function getSystemScheme(): Scheme;
+export declare function useSystemScheme(): Scheme;
+//# sourceMappingURL=systemScheme.d.ts.map

package/types/systemScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemScheme.d.ts","sourceRoot":"","sources":["../src/systemScheme.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAOrC,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,wBAAgB,eAAe,IAAI,MAAM,CAWxC"}

package/types/systemScheme.native.d.ts

@@ -0,0 +1,4 @@
+export type Scheme = 'light' | 'dark';
+export declare function getSystemScheme(): Scheme;
+export declare function useSystemScheme(): Scheme;
+//# sourceMappingURL=systemScheme.native.d.ts.map

package/types/systemScheme.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemScheme.native.d.ts","sourceRoot":"","sources":["../src/systemScheme.native.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,wBAAgB,eAAe,IAAI,MAAM,CAWxC"}

package/types/userScheme.d.ts

@@ -0,0 +1,20 @@
+import { type Scheme } from './systemScheme';
+export type SchemeSetting = 'system' | 'light' | 'dark';
+export type UserScheme = {
+    /** The user's preference: 'system', 'light', or 'dark' */
+    setting: SchemeSetting;
+    /** The resolved scheme: 'light' or 'dark' */
+    value: Scheme;
+    /** Update the scheme setting */
+    set: (setting: SchemeSetting) => void;
+};
+type SchemeListener = (setting: SchemeSetting, value: Scheme) => void;
+export declare function setUserScheme(setting: SchemeSetting): void;
+export declare function getUserScheme(): {
+    setting: SchemeSetting;
+    value: Scheme;
+};
+export declare function onUserSchemeChange(listener: SchemeListener): () => void;
+export declare function useUserScheme(): UserScheme;
+export {};
+//# sourceMappingURL=userScheme.d.ts.map

package/types/userScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"userScheme.d.ts","sourceRoot":"","sources":["../src/userScheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAE7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAEvD,MAAM,MAAM,UAAU,GAAG;IACvB,0DAA0D;IAC1D,OAAO,EAAE,aAAa,CAAA;IACtB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,GAAG,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,KAAK,cAAc,GAAG,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;AAoFrE,wBAAgB,aAAa,CAAC,OAAO,EAAE,aAAa,QAKnD;AAED,wBAAgB,aAAa,IAAI;IAAE,OAAO,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAEzE;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,cAAc,cAM1D;AAED,wBAAgB,aAAa,IAAI,UAAU,CA6B1C"}