Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#255 1 comentario 3 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 3 días

@danstepanov ya está trabajando en esto.

Desde el 24/10/2025.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
13 d 14 h
PR fusionados (30 d)
1

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nativewind/react-native-css

Todos los issues de nativewind/react-native-css

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.