Appearance.setColorScheme not workin in RN Web #2703

NewCoder2023 · 2024-07-29T11:59:01Z

Is there an existing issue for this?

I have searched the existing issues

Describe the issue

Appearance.setColorScheme("dark") works perfectly fine for iOS and Android but raises the following Error when used for RN web even thought its written in the documentation that it works for web.

_Appearance.default.setColorScheme is not a function. (In '_Appearance.default.setColorScheme("dark")',
'_Appearance.default.setColorScheme' is undefined)

Expected behavior

It should change the colorScheme.

Steps to reproduce

1.Create a Pressable
2. onPress={Appearance.setColorScheme("dark")}
3. Observe error in RN web

Test case

https://snack.expo.dev/@hadi_ea/setcolorscheme-error

Additional comments

Error:

Uncaught Error
_Appearance.default.setColorScheme is not a function. (In '_Appearance.default.setColorScheme("dark")', '_Appearance.default.setColorScheme' is undefined)
Call Stack

oussamabenkortbi · 2024-10-20T21:25:25Z

Same here, any workaround ?

NewCoder2023 · 2024-10-24T22:53:43Z

I managed it by using a global state management (Zustand) and listen to changes and change color accordingly but it’s not that satisfying.

tiavina-mika · 2025-01-21T07:12:50Z

Not working too with storybook web

YoussefHenna · 2025-01-28T13:53:00Z

if (Platform.OS === 'web') {
    Appearance.setColorScheme = (scheme) => {
      document.documentElement.setAttribute('data-theme', scheme);
    };

    Appearance.getColorScheme = () => {
      const systemValue = window.matchMedia('(prefers-color-scheme: dark)') ? 'dark': 'light';
      const userValue = document.documentElement.getAttribute('data-theme')
      return userValue && userValue !== "null" ? userValue : systemValue;
    };

    Appearance.addChangeListener = (listener) => {
      // Listen for changes of system value
      const systemValueListener = (e) => {
        const newSystemValue = e.matches ? 'dark' : 'light';
        const userValue = document.documentElement.getAttribute('data-theme');
        listener({
          colorScheme:
            userValue && userValue !== 'null' ? userValue : newSystemValue,
        });
      };
      const systemValue = window.matchMedia('(prefers-color-scheme: dark)');
      systemValue.addEventListener('change', systemValueListener);

      // Listen for changes of user set value
      const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
          if (mutation.attributeName === 'data-theme') {
            listener({ colorScheme: Appearance.getColorScheme() });
          }
        }
      });
      observer.observe(document.documentElement, { attributes: true });

      function remove(): void {
        systemValue.removeEventListener('change', systemValueListener);
        observer.disconnect();
      }

      return { remove };
    };
  }

Was able to use this as a workaround, behavior is equivalent to iOS and android. Uses the system dark/light settings until setColorScheme is called, in which it will always use the user-defined value.

jmadelaine · 2025-02-01T13:53:18Z

I'm using this in the meantime. Seems to work fine.

import { useColorScheme } from 'react-native'
import { create } from 'zustand'

const useStore = create<{
  isDarkMode: boolean | undefined
  setIsDarkMode: (isDarkMode: boolean | undefined) => void
}>(set => ({
  isDarkMode: undefined,
  setIsDarkMode: isDarkMode => set({ isDarkMode }),
}))

const useOverrideValue = () => useStore(s => s.isDarkMode)
const useSetOverrideValue = () => useStore(s => s.setIsDarkMode)

export const useIsDarkMode = () => {
  const fallback = useColorScheme()
  const override = useOverrideValue()
  const setOverride = useSetOverrideValue()
  return [override ?? fallback === 'dark', setOverride] as const
}

NewCoder2023 added the bug label Jul 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Appearance.setColorScheme not workin in RN Web #2703

Appearance.setColorScheme not workin in RN Web #2703

NewCoder2023 commented Jul 29, 2024 •

edited

Loading

oussamabenkortbi commented Oct 20, 2024

NewCoder2023 commented Oct 24, 2024

tiavina-mika commented Jan 21, 2025

YoussefHenna commented Jan 28, 2025

jmadelaine commented Feb 1, 2025

Appearance.setColorScheme not workin in RN Web #2703

Appearance.setColorScheme not workin in RN Web #2703

Comments

NewCoder2023 commented Jul 29, 2024 • edited Loading

Is there an existing issue for this?

Describe the issue

Expected behavior

Steps to reproduce

Test case

Additional comments

oussamabenkortbi commented Oct 20, 2024

NewCoder2023 commented Oct 24, 2024

tiavina-mika commented Jan 21, 2025

YoussefHenna commented Jan 28, 2025

jmadelaine commented Feb 1, 2025

NewCoder2023 commented Jul 29, 2024 •

edited

Loading