Repository navigation
@media (prefers-color-scheme: dark) not working with Expo 54 #255
Description
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).
Expected behavior
The theme colors should correctly switch with dark/light mode on native platforms as well.
Additional context
Discord thread discussing the issue.
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
vasiliydumanov commentedon Nov 18, 2025
Just in case you need a solution that works before the official docs are updated, that's what worked for me:
Whereas
@variant darkis 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