@media (prefers-color-scheme: dark) not working with Expo 54
メンテナーはふだん 3 日以内に返信
@danstepanov がすでに取り組んでいます。
2025年10月24日 から。
評価
この issue はまだ評価されていません。
説明
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.
- 主要言語
- TypeScript
- スター
- 166
- フォーク
- 45
- 平均マージ
- 13日 14時間
- マージ済み PR（30日）
- 1
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
nativewind/react-native-css のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#545 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#544 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#543 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
nativewind/react-native-css#540 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#538 ·
メンテナーはふだん 3 日以内に返信
nativewind/react-native-css の issue をすべて見る
似ている issue
-
bug
難易度 1/5 1時間未満 初心者へのやさしさ 86/100
awslabs/visual-asset-management-system#937 ·
メンテナーはふだん 1 日以内に返信
-
t0ggles
難易度 1/5 1時間未満 初心者へのやさしさ 82/100
nolimits4web/swiper#8255 · コメント 1 件 ·
メンテナーはふだん 15 日以内に返信
-
render: --variables-file (and --variables <path>) fails with "io.readFile is not a function" since 0.8.212対応中かも @miguel-heygen が今日担当しました。 オープンbug triage/needs-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
heygen-com/hyperframes#6830 ·
メンテナーはふだん 1 日以内に返信
-
bug launch local use
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
メンテナーはふだん 1 日以内に返信
-
account: profile bug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 5 日以内に返信