Dark mode not working in v4

[tarifalhasan]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Expo Snack If applicable, add a link to an Expo snack demonstrating the issue. There are multiple example snacks available at nativewind.dev.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

[younes200]

@tarifalhasan, please review the settings on my project here : https://github.com/launchtrack/expo-starter to ensure nothing has been overlooked.

[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!

[tyrauber]

Here is a dark mode example with custom colors:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 40 30% 96%;
    --foreground: 40 5% 12%;

  }
  .dark:root {
    --background: 40 5% 12%;
    --foreground: 40 30% 96%;
  }

  .default-bg {
    @apply background dark:background;
  }
}

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx,svg}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
      }
    },
  },
};

[danstepanov]

Closed as duplicate of #917