1. The default Header in expo react native (using expo-router) doesnt conform to the theme changing unless still wrapped around the ThemeProvider which from the docs suggest it is no longer needed or am I missing something. Example using the docs: repo

2. Now on to my main issue , I set up light , dark and one custom theme in my repo I migrated from NativeWind; styling seems to be working, with the dark and custom theme also working but when I switch to light theme within the app the ui seems to remain on what it was on previously, even tho console logging theme shows it is light mode Uniwind.currentTheme.
   The light takes effect when I reload the app(which does break some styling)

And I get this in the console:
"unset" is not a valid color or brush
WARN "unset" is not a valid color or brush
WARN "unset" is not a valid color or brush
WARN "unset" is not a valid color or brush

Codes :
Theme toggle:

import { Moon, Sun } from 'lucide-react-native';
import { View } from 'react-native';

import { useColorScheme } from '@xolacekit/ui';
import { ToggleGroup, ToggleGroupItem } from '@xolacekit/ui';

type Theme = 'light' | 'dark' | 'system' | 'sunset';

export function ThemeModeToggle() {
const { colorScheme, setColorScheme } = useColorScheme();

return (

<ToggleGroup
className="justify-start"
type="single"
value={colorScheme}
onValueChange={(value) => {
setColorScheme(value as Theme);
}}
>

    <ToggleGroupItem value="dark" aria-label="Dark Mode">
      <Moon className="text-secondary-foreground h-4 w-4" />
    </ToggleGroupItem>

    <ToggleGroupItem value="sunset" aria-label="Sunset Mode">
      <Moon className="text-secondary-foreground h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
</View>

);
}

useColorScheme:
import { useCallback } from 'react';

import AsyncStorage from '@react-native-async-storage/async-storage';
import { Uniwind, useUniwind } from 'uniwind';

export function useColorScheme() {
const { theme } = useUniwind();

const setColorScheme = useCallback(
async (nextTheme: string) => {
console.log('theme', theme);
try {
Uniwind.setTheme(nextTheme as 'light' | 'dark' | 'sunset');
await AsyncStorage.setItem('theme', nextTheme);
} catch (error) {
console.error('Failed to save theme:', error);
}
},
[theme],
);

return {
colorScheme: theme,
isDarkColorScheme: theme === 'dark',
setColorScheme,
};
}

theme-provider
import React, { useEffect, useState } from 'react';

import AsyncStorage from '@react-native-async-storage/async-storage';
import { ThemeProvider } from '@react-navigation/native';
import { SplashScreen } from 'expo-router';
import { Platform } from 'react-native';
import { Uniwind } from 'uniwind';

import { NAV_THEME, useColorScheme } from '@xolacekit/ui';

export function GlobalThemeProvider({
children,
}: {
children: React.ReactNode;
}) {
const { colorScheme, isDarkColorScheme } = useColorScheme();
const [isColorSchemeLoaded, setIsColorSchemeLoaded] = useState(false);

useEffect(() => {
(async () => {
try {
const savedTheme = await AsyncStorage.getItem('theme');
console.log('from provider ',savedTheme)

    if (Platform.OS === 'web') {
      if (typeof document !== 'undefined') {
        /* eslint-disable-next-line no-undef */
        document.documentElement.classList.add('bg-background');
      }
    }

    if (savedTheme) {
      if (savedTheme !== Uniwind.currentTheme) {
        Uniwind.setTheme(savedTheme as any);
      }
    } else {
      // If no saved theme, save the current one (likely system default)
      await AsyncStorage.setItem('theme', colorScheme);
    }
  } catch (error) {
    console.error('Failed to load theme:', error);
  } finally {
    setIsColorSchemeLoaded(true);
    SplashScreen.hideAsync();
  }
})();

}, []); // eslint-disable-line react-hooks/exhaustive-deps

if (!isColorSchemeLoaded) {
return null;
}

return (
<ThemeProvider value={isDarkColorScheme ? NAV_THEME.dark : NAV_THEME.light}>
{children}

);
}