[ FEATURE ] Resolve issue with color scheme for web

[EliasGit117]

Web color scheme is broken.
To make a working color scheme for web version of app without breaking native version, it requires to write an ugly work around like this:

// app/providers/ThemeProvider.tsx
import { DarkTheme, DefaultTheme, Theme, ThemeProvider as NavigationThemeProvider } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { Appearance, ColorSchemeName, Platform } from 'react-native';
import { NAV_THEME } from '~/lib/constants';
import { useColorScheme } from '~/lib/useColorScheme';
import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
import { isWeb } from '~/lib/utils';
import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useThemeStore, Theme as StoreTheme } from '~/stores/theme-store';
import { SplashScreen } from 'expo-router';
import * as React from 'react';

SplashScreen.preventAutoHideAsync();

export function ThemeProvider({ children }: { children: ReactNode }) {
  const { theme } = useThemeStore();
  const hasMounted = React.useRef(false);
  const { colorScheme, isDarkColorScheme, setColorScheme } = useColorScheme();
  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);

  useIsomorphicLayoutEffect(() => {
    if (hasMounted.current) {
      return;
    }

    if (isWeb) {
      // Adds the background color to the html element to prevent white background on overscroll.
      document.documentElement.classList.add('bg-background');
    }

    //This a hack to set color scheme from theme store, without setTimout it doesn't work
    // TODO: Need to find a better way to handle this.
    setTimeout(() => {
      setColorScheme(theme);
      setIsColorSchemeLoaded(true);
      hasMounted.current = true;

      if (!isWeb || theme !== 'system')
        return;

      handleColorSchemeChange(colorScheme, theme);
    }, 10);
  }, []);

  useEffect(() => {
    handleColorSchemeChange(colorScheme, theme);
  }, [colorScheme]);

  useEffect(() => {
    if (!isColorSchemeLoaded || !hasMounted.current)
      return;

    // This is a hack to prevent the splash screen from auto-hiding before asset loading is complete.
    // TODO: Need to find a better way to handle this.
    const timeout = setTimeout(() => SplashScreen.hideAsync(), 10);
    return () => clearTimeout(timeout);
  }, [isColorSchemeLoaded]);

  if (!isColorSchemeLoaded)
    return null;

  return (
    <NavigationThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
      <StatusBar style={isDarkColorScheme ? 'light' : 'dark'}/>
      {children}
    </NavigationThemeProvider>
  );
}

const LIGHT_THEME: Theme = { ...DefaultTheme, colors: NAV_THEME.light };
const DARK_THEME: Theme = { ...DarkTheme, colors: NAV_THEME.dark };

const handleColorSchemeChange = (colorScheme: 'light' | 'dark', theme: StoreTheme) => {
  setAndroidNavigationBar(colorScheme).then();

  if (!isWeb || theme !== 'system')
    return;

  if (colorScheme === 'dark')
    document.documentElement.classList.add('dark');
  else if (colorScheme === 'light')
    document.documentElement.classList.remove('dark');
};

const useIsomorphicLayoutEffect =
  Platform.OS === 'web' && typeof window === 'undefined' ? useEffect : useLayoutEffect;

If anyone have any better idea, I would be glad to see it, because I can't find a better implementation but in the same time I don't like my variant

[luca1s]

Agreed, I'm having major issues with the theming on web! Also using an ugly workaround, and even that isn't perfect. Would be nice to see this fixed, not sure if it's an RNR issue or a NativeWind one

[EliasGit117]

@luca1s have you manage to find a good workaround?

[luca1s]

  const hasMounted = React.useRef(false);
  const { colorScheme, isDarkColorScheme, loaded } = useColorScheme();
  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);

  useIsomorphicLayoutEffect(() => {
    if (hasMounted.current || !loaded) {
      return;
    }

    if (Platform.OS === 'web') {
      if (isDarkColorScheme) {
        document.documentElement.classList.add('dark');
        document.documentElement.classList.remove('light');
      } else {
        document.documentElement.classList.add('light');
        document.documentElement.classList.remove('dark');
      }
    };

    setAndroidNavigationBar(colorScheme);
    setIsColorSchemeLoaded(true);
    hasMounted.current = true;
  }, [loaded]);

  if (!isColorSchemeLoaded) {
    return null;
  }

Here's my current solution! useColorScheme is a custom hook that also deals with hydration from Zustand, if you aren't doing that you could just remove the loaded dependency from the array (I had an empty dependency array before) and use the standard useColorScheme hook that RNR includes.

[EliasGit117]

@luca1s, can you give full file with zustand please, I don't get a context a bit.

P.S.: Thank you a lot.

[luca1s]

import { useColorScheme as useNativewindColorScheme } from 'nativewind';
import { useStore } from '~/lib/store';
import { useEffect, useState } from 'react';

export function useColorScheme() {
  const hydrated = useStore((state) => state._hasHydrated);
  const theme = useStore((state) => state.theme);
  const setTheme = useStore((state) => state.setTheme);

  const { colorScheme: nativeWindColorScheme, setColorScheme: setNativewindColorScheme } = useNativewindColorScheme();

  const setColorScheme = (colorScheme: "light" | "dark") => {
    setTheme(colorScheme);
    setNativewindColorScheme(colorScheme);
  };

  const [themeHydrated, setThemeHydrated] = useState(false);

  // On hydration, set the color scheme to the current theme
  useEffect(() => {
    if (hydrated) {
      setNativewindColorScheme(theme);
      setThemeHydrated(true);
    }
  }, [hydrated]);

  return {
    loaded: themeHydrated,
    colorScheme: nativeWindColorScheme ?? "dark",
    themeSetting: theme,
    isDarkColorScheme: nativeWindColorScheme === 'dark',
    setColorScheme
  };
}

Of course! Here's the Zustand hydration useColorScheme hook, could definitely be cleaned up a fair bit, sorry about that haha.

[EliasGit117]

@luca1s can you share useStore please? I'm having issue with handling 'system' theme on all platforms in the same time

[luca1s]

useStore is just a standard Zustand store with a theme property! I didn't do a system theme though, for my app I strongly push users towards dark mode regardless of their system settings (it's designed to be used in the cockpit of an airplane, the dark theme is much better in that situation).

[EliasGit117]

got it thanks