diff --git a/apps/expo-example/App.tsx b/apps/expo-example/App.tsx index 41eb459f..fb29cfa2 100644 --- a/apps/expo-example/App.tsx +++ b/apps/expo-example/App.tsx @@ -1,6 +1,6 @@ import './global.css' import React from 'react' -import { Image, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native' +import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native' const TailwindTestPage = () => { return ( diff --git a/apps/expo-router/utils/theme.ts b/apps/expo-router/utils/theme.ts index 670c6beb..34b1863b 100644 --- a/apps/expo-router/utils/theme.ts +++ b/apps/expo-router/utils/theme.ts @@ -33,9 +33,6 @@ export const useStoredTheme = () => { // Set the theme Uniwind.setTheme(t) - // Set the native color scheme - Appearance.setColorScheme(getNativeColorScheme(t)) - // Store the theme setStoredTheme(t) }, diff --git a/packages/uniwind/src/core/config/config.ts b/packages/uniwind/src/core/config/config.ts index b09dd62c..4d870d27 100644 --- a/packages/uniwind/src/core/config/config.ts +++ b/packages/uniwind/src/core/config/config.ts @@ -49,6 +49,7 @@ class UniwindConfigBuilder { setTheme(theme: ThemeName | typeof SYSTEM_THEME) { const prevTheme = this.#currentTheme const prevHasAdaptiveThemes = this.#hasAdaptiveThemes + const isAdaptiveTheme = ['light', 'dark'].includes(theme) if (theme === SYSTEM_THEME) { this.#hasAdaptiveThemes = true @@ -58,6 +59,8 @@ class UniwindConfigBuilder { this.emitThemeChange() } + Appearance.setColorScheme(isAdaptiveTheme ? this.#currentTheme as ColorScheme : undefined) + return } @@ -71,6 +74,8 @@ class UniwindConfigBuilder { if (prevTheme !== this.#currentTheme || prevHasAdaptiveThemes !== this.#hasAdaptiveThemes) { this.emitThemeChange() } + + Appearance.setColorScheme(isAdaptiveTheme ? this.#currentTheme as ColorScheme : undefined) } private emitThemeChange() {