react-native-unistyles 3.0.0-nightly-20250617 → 3.0.0-nightly-20250626

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -10,7 +10,9 @@ export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerP
         }
 
         if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
-            updateRuntime()
+            const hasThemeNameChange = changedDependencies.includes(UnistyleDependency.ThemeName)
+
+            updateRuntime(hasThemeNameChange)
         }
     })
 

package/src/core/useProxifiedUnistyles/listener.ts

@@ -4,7 +4,7 @@ import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
     const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), dependency => updateRuntime(dependency === UnistyleDependency.ThemeName))
 
     return () => {
         disposeTheme()

package/src/core/useProxifiedUnistyles/types.ts

@@ -2,6 +2,6 @@ import type { UnistyleDependency } from '../../specs'
 
 export type ListenerProps = {
     updateTheme: VoidFunction,
-    updateRuntime: VoidFunction,
+    updateRuntime(themeNameChange: boolean): void,
     dependencies: Array<UnistyleDependency>
 }

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -28,7 +28,7 @@ const RTDependencyMap = {
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
 export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
-    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+    const [scopedTheme, setScopedTheme] = useState(forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
@@ -45,7 +45,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
 
                 setTheme(UnistylesRuntime.getTheme(scopedTheme))
             },
-            updateRuntime: () => runtimeChanged()
+            updateRuntime: (hasThemeNameChange: boolean) => {
+                if (hasThemeNameChange && scopedTheme) {
+                    return
+                }
+
+                runtimeChanged()
+            }
         })
     }
 
@@ -55,6 +61,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
         return () => disposeRef.current?.()
     }, [dependencies.size])
 
+
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+
+    if (scopedTheme && maybeNewScopedTheme && scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+    }
+
     const proxifiedTheme = new Proxy(theme, {
         get: (target, prop) => {
             dependencies.add(UnistyleDependency.Theme)
@@ -84,6 +97,10 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
                 dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
             }
 
+            if (prop === 'themeName' && scopedTheme) {
+                return scopedTheme
+            }
+
             return target[prop as keyof typeof target]
         }
     })

package/src/web/convert/object/boxShadow.ts

@@ -25,7 +25,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
         const boxShadowStyle = Object.fromEntries(boxShadow.map(shadow => {
             const [key] = Object.keys(shadow)
             return [key, shadow[key as keyof BoxShadowValue]]
-        }))
+        })) as BoxShadowValue
 
         return {
             boxShadow: createBoxShadowValue(boxShadowStyle)
@@ -42,7 +42,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
             }
 
             return [key, value]
-        }))
+        })) as BoxShadowValue
 
         return {
             [breakpoint]: {

package/src/web/convert/utils.ts

@@ -1,5 +1,6 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
+/// <reference path="module.d.ts" />
 import normalizeColors from '@react-native/normalize-colors'
 import type { BoxShadowValue } from 'react-native'
 import type { TransformStyles } from '../../types/core'
@@ -30,7 +31,7 @@ export const normalizeColor = (color: string, opacity = 1) => {
         return color
     }
 
-    const hex = integer.toString(16).padStart(8, '0')
+    const hex = integer.toString(16).padStart(8, '0') as string
 
     if (hex.length === 8) {
         const [r = 0, g = 0, b = 0, a = 1] = hex

package/src/web/listener.ts

@@ -1,16 +1,18 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesServices } from './types'
 
+type Listener = (dependency: UnistyleDependency) => void
+
 export class UnistylesListener {
     private isInitialized = false
-    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
-    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
+    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
 
     constructor(private services: UnistylesServices) {}
 
     emitChange = (dependency: UnistyleDependency) => {
-        this.stylesheetListeners[dependency]?.forEach(listener => listener())
-        this.listeners[dependency]?.forEach(listener => listener())
+        this.stylesheetListeners[dependency]?.forEach(listener => listener(dependency))
+        this.listeners[dependency]?.forEach(listener => listener(dependency))
     }
 
     initListeners = () => {
@@ -49,7 +51,7 @@ export class UnistylesListener {
         window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
     }
 
-    addListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+    addListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
         dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
 
         return () => {
@@ -57,7 +59,7 @@ export class UnistylesListener {
         }
     }
 
-    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
         dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
 
         return () => {

package/src/web/runtime.ts

@@ -49,6 +49,12 @@ export class UnistylesRuntime {
     }
 
     get themeName() {
+        const scopedTheme = this.services.shadowRegistry.getScopedTheme()
+
+        if (scopedTheme) {
+            return scopedTheme
+        }
+
         if (this.services.state.hasAdaptiveThemes) {
             return schemeToTheme(this.colorScheme) as AppThemeName
         }
@@ -215,6 +221,7 @@ export class UnistylesRuntime {
         const newTheme = updater(oldTheme)
 
         this.services.state.themes.set(themeName, newTheme)
+        this.services.listener.emitChange(UnistyleDependency.Theme)
 
         if (this.services.state.CSSVars) {
             this.services.state.cssThemes.set(