[web] Chrome on linux doesn't use dark with themeMode: ThemeMode.system

This issue has been tracked since 2022-11-24.

The system is set to dark, but my flutter web app isn't dark.

Works on macOS, not linux. Using latest chrome on linux.

$ flutter doctor -v
[✓] Flutter (Channel stable, 3.3.8, on Debian GNU/Linux 11 (bullseye)
5.10.0-19-amd64, locale en_US.UTF-8)
• Flutter version 3.3.8 on channel stable at /home/steve/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 52b3dc2 (2 weeks ago), 2022-11-09 12:09:26 +0800
• Engine revision 857bd6b74c
• Dart version 2.18.4
• DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc4)
• Android SDK at /home/steve/Android/Sdk
• Platform android-32, build-tools 31.0.0-rc4
• Java binary at: /home/steve/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
• Debian clang version 11.0.1-2
• cmake version 3.15.2
• ninja version 1.8.2
• pkg-config version 0.29.2

[✓] Android Studio (version 2021.2)
• Android Studio at /home/steve/android-studio
• Flutter plugin version 68.1.2
• Dart plugin version 212.5744
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.73.1)
• VS Code at /usr/share/code
• Flutter extension version 3.52.0

[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux 11 (bullseye) 5.10.0-19-amd64
• Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
• All required HTTP hosts are available

exaby73 wrote this answer on 2022-11-24

Hello @sgehrman. Flutter launches Chrome in a debug instance which has the theme set to light theme. If you copy the URL and open it in a new tab your browser (not the one Flutter opens), you'll see it work. You can see that the theme is set to light by running window.matchMedia('(prefers-color-scheme: dark)').matches in the devtools console.

If you run window.matchMedia('(prefers-color-scheme: dark)').matches in the browser window Flutter launches, it's false while, if your system theme is dark, and you run window.matchMedia('(prefers-color-scheme: dark)').matches in your browser, you'll see true.

This isn't an issue with Flutter, and this is working as expected. Therefore, I am closing this issue. If you disagree with my decision, please comment and I can reopen it. Thank you

More Details About Repo
Owner Name flutter
Repo Name flutter
Full Name flutter/flutter
Language Dart
Created Date 2015-03-06
Updated Date 2022-12-07
Star Count 147031
Watcher Count 3560
Fork Count 23915
Issue Count 11300

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date