Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#255 1 commentaire 3 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

@danstepanov y travaille déjà.

Depuis le 24/10/2025.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

deferred (post-5.0) help wanted

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.

Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
13 j 14 h
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.