@media (prefers-color-scheme: dark) not working with Expo 54

[ethan-krich]

Describe the bug
@media (prefers-color-scheme: dark) does not work with ios. It does however work on web. It is clear the problem is with the media query because React's useColorScheme hook is working fine.

Reproduction
Here is trimmed version of my globals.css file:

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@theme {
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
}

:root {
  --radius: 0.625rem;
  --background: #ffffff;
  --foreground: #252525;
  --card: #ffffff;
  --card-foreground: #252525;
  --popover: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #252525;
    --foreground: #fbfbfb;
    --card: #343434;
    --card-foreground: #fbfbfb;
    --popover: #444444;
  }
}

Here is my expo config:

{
  "expo": {
    "name": "expo-starter",
    "slug": "expo-starter",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "expostarter",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "androidStatusBar": {
      "backgroundColor": "#000000",
      "barStyle": "light-content",
      "translucent": false
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.ekrich.expostarter",
      "infoPlist": {
        "ITSAppUsesNonExemptEncryption": false
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "edgeToEdgeEnabled": true,
      "package": "com.ekrich.expostarter"
    },
    "web": {
      "bundler": "metro",
      "output": "server",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      "expo-font",
      "expo-web-browser"
    ],
    "experiments": {
      "typedRoutes": true
    },
    "extra": {
      "router": {},
      "eas": {
        "projectId":  "my id"
      }
    },
    "runtimeVersion": {
      "policy": "appVersion"
    },
  }
}

I am running expo go for demo purposes (this is for a ui library).

Full reproduction link

Expected behavior
The theme colors should correctly switch with dark/light mode on native platforms as well.

Additional context
Discord thread discussing the issue.

[vasiliydumanov]

Just in case you need a solution that works before the official docs are updated, that's what worked for me:

:root {
  /* Default (light mode) vars */
  @variant dark {
    /* Dark mode vars */
  }
}

Whereas @variant dark is supposed to compile to @media (prefers-color-scheme: dark), it doesn't seem to be the case for native platforms.
Check out Tailwind docs about using variants in CSS: https://tailwindcss.com/docs/adding-custom-styles#using-variants