Dark mode modifier

[younes200]

Describe the bug
dark: modifier broken on the last version for native apps :

works fine with ios: android: :
To Reproduce

Steps to reproduce the behavior:

1. Start project
2. Run :

import * as React from 'react';
import { View } from 'react-native';

export default function Screen() {

  return (
    <View className='flex-1'>
      <View className="h-20 w-20 bg-primary dark:bg-destructive"/>
    </View>
  );
}

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Platform (please complete the following information):

• Type: Browser, Simulator, Emulator, Device
• OS: iOS, Android

Additional context

• Expo : ~50.0.17
• nativewind 4.0.36

[GustavoBonfimS]

Could you please try the canary version (4.0.36)? Several improvements have been made and maybe this issue has been fixed.

[younes200]

Thank you, @GustavoBonfimS, for responding. I tried both '4.0.1' and '4.0.36' but encountered the same problem.

The style definition can be found in .cache/nativewind/global.css.ios.css, but for some reason, it is also being applied in light mode.

.dark\:bg-destructive:is(.dark *) {
  background-color: hsl(var(--destructive));
}

[alisherks]

What version of Tailwind are you using? Try version 3.4.1; version 3.4.2 introduced some changes to how dark mode styles are generated. I believe it is not handled by NativeWind right now.

[younes200]

@alisherks you're right my version was ^3.4.1. thanks

[desiboli]

I was having problem with the dark mode functionality in my app as well and I found out that I by accident changed the .dark selector in global.css from .dark:root to .dark. Hopefully this can help someone else!