feat: change native components color while using light and dark theme

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 (

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)
         },

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() {