React Native Web error: Cannot manually set color scheme, as dark mode is type 'media'.

[tomsjansons]

Describe the bug A new project created with pnpx rn-new@latest --nativewind produces an error in console while running in web.

Uncaught Error: Cannot manually set color scheme, as dark mode is type 'media'. Please use StyleSheet.setFlag('darkMode', 'class')
    at Object.set (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:42489:15)
    at MutationObserver.observe.attributes (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:42475:27)

Reproduction Repro: https://github.com/tomsjansons/nativewind-dark-mode

I've created the repro with the below:

pnpx rn-new@latest --nativewind
pnpx expo install react-dom react-native-web @expo/metro-runtime

There is no custom code in the repo with the exception of added classes bg-yellow-200 dark:bg-red-800 to check that the modes still work.

Run it with

pnpm i
pnpm run web

Expected behavior The error should not be thrown in console

Additional context I suspect that the problem is coming from https://github.com/nativewind/nativewind/blob/9e8ea10cee720f66f19bb26c365ef6d3570a9ba9/packages/react-native-css-interop/src/runtime/web/color-scheme.ts#L37

I am not enirely sure if the bug is in the check and it could be fixed by doing if (darkModeFlag.startsWith('class')) or something similar or the bug is in the fact that --css-interop-darkMode is set to 'media'

[makivlach]

I found out that you can use Appearance.setColorScheme from react-native and it'll work

[whiskeycola]

I get the same error when I use config in app.json "reactServerComponentRoutes": true

[rkahle]

I found out that you can use Appearance.setColorScheme from react-native and it'll work

Where?

[tomsjansons]

Where?

The suggestion here was that you'd be able to use Appearance.setColorScheme instead of relying on the browser to switch it for you when the user changes their color preference https://reactnative.dev/docs/appearance

example here

https://github.com/expo/expo/blob/136b77f18e2426e885bdd619effe181214c41172/apps/notification-tester/src/app/_layout.tsx#L14

the problem is that you'd need to do some wiring to listen to user's changes if you were to call setColorScheme manually and switch the theme and that seems a lot of work for something that does actually work out of the box.

my issue here is that it just logs the error in console even though everything works fine

[kristian-nst]

Same here (nativewind + expo-web)

[jerrickhakim]

Hey all!

Set up a new project and found myself here, In my tailwind.config.js, adding darkMode: "class" fixed the issue for me.

Hope it helps!

[rborn]

I hit the same issue, I'm using NativeWind 5 + Expo 0.54 in a yarn monorepo.

import { useColorScheme } from 'nativewind'
const { colorScheme, setColorScheme } = useColorScheme()

... onPress={() => setColorScheme(colorScheme === 'light' ? 'dark' : 'light')

And on web I get this error (ios works) Appearance.default.setColorScheme is not a function

Thank you

[sheriffMoose]

have you tried adding darkMode: 'class' into tailwind.config.js like so

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./App.{js,ts,tsx}', './components/**/*.{js,ts,tsx}'],

  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

[seanmozeik]

import { useColorScheme } from 'nativewind'
const { colorScheme, setColorScheme } = useColorScheme()

... onPress={() => setColorScheme(colorScheme === 'light' ? 'dark' : 'light')

And on web I get this error (ios works) Appearance.default.setColorScheme is not a function

I have the same issue with Nativewind v5 - you can't set darkMode: 'class' in tailwind.config.js because we don't use that file anymore!

I've added this to global.css but still get the same issue: @custom-variant dark (&:where(.dark, .dark *));

Directly calling Appearance.setColorScheme works for non-nativewind components

I can't figure out how to do manual theme changes on web

[rborn]

I found out that react-native-web doesn't have a setColorScheme you'd need to polyfill it.