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

This issue has been created 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

sgehrman wrote this answer on 2022-11-30

window.matchMedia('(prefers-color-scheme: dark)').matches
false

I'm not running it in debug mode.

sgehrman wrote this answer on 2022-11-30
sgehrman wrote this answer on 2022-11-30

returns true for light

window.matchMedia('(prefers-color-scheme: light)').matches
true

exaby73 wrote this answer on 2022-12-01

Yes that is expected. That is from JS, AKA the browser itself, not Flutter

sgehrman wrote this answer on 2022-12-02

so how do I fix it?

exaby73 wrote this answer on 2022-12-02

Please see https://flutter.dev/community for resources and asking questions like this,
you may also get some help if you post it on Stack Overflow and if you need help with your code, please see https://www.reddit.com/r/flutterhelp/

sgehrman wrote this answer on 2022-12-03

What? I ask a simple question and you answer with nonsense, now your saying I should go somewhere else?

When will this bug be fixed? I'm trying to ship a product.

Could you reopen this issue so someone from the Flutter team can see it?

exaby73 wrote this answer on 2022-12-05

Like I said, this is expected behavior. You will only face then during dev when using a chrome debug instance, because chrome is setting it to light theme, not Flutter. Try flutter run -d web-server and copy the link manually into your browser and you should not see this. This will not transfer over to production builds since people do not use debug instances of chrome to browse the web. I am keeping this issue closed for the same reason

sgehrman wrote this answer on 2022-12-06

@exaby73 What? I told you I'm NOT running a debug instance. This is a compiled for production app. It's super annoying that you are wasting my time and not even bothering to read the bug. I can't believe this is happening.

Please open this issue so I can get some help.

exaby73 wrote this answer on 2022-12-06

If it is returning false, this means your OS theme is set to light theme. Change your OS theme to dark and it should work. I have tested this, and I can confirm it works as expected

sgehrman wrote this answer on 2022-12-07

What is your problem? You think I don't have the sense to set my OS theme to dark?
Look at the above screen shot. What do you see? A dark settings window and a dark chrome window with a dark title bar. So obviously if you actually looked at that image you would know it was set to dark. Stop wasting my time. Why are you here causing problems. @Hixie

Hixie wrote this answer on 2022-12-07

@sgehrman Please check our code of conduct.

exaby73 wrote this answer on 2022-12-07

@sgehrman As per #115959 (comment), you can see that chrome thinks your theme is set to light theme. This is not Flutter setting it. This is not a Flutter issue. Check on non-Flutter sites as well if you get the same. See this to simulate light and dark color schemes from chrome and see Flutter react to it accordingly. I do not know why chrome is behaving this way, and I recommend you research on that rather than concluding it must be a Flutter issue

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-10
Star Count 147243
Watcher Count 3561
Fork Count 23950
Issue Count 11325

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Getting Görli ETH in bulk 3 2022-05-19 2022-10-05
Implement full text search for workspaces, templates, and users 8 2022-06-24 2022-12-07
[BUG] Plugin bunkernet failed on init() due to missing file /opt/bunkerweb/cache/ip.list 0 2022-11-15 2022-12-05
setSocketOption(): fail on -1, errno: 9, "Bad file number" on ESP32 0 2022-09-12 2022-10-05
Unwanted Warnings during Compiling 2 2022-09-14 2022-10-10
Handle callback from server to arduino 0 2022-09-18 2022-10-15
Fatal error: Uncaught Error: array_diff(): Argument #1 ($array) must be of type array, bool given. 0 2021-12-19 2022-11-19
Не удаётся воспроизвести демо 3 2022-11-10 2022-12-09
Remote browser display issue with embeds 1 2020-02-19 2022-11-16
SVGKit seems to allocate too much memory 4 2021-09-29 2022-11-19
SFTP (root) - All actions fail 9 2021-07-25 2022-11-19
Add support for pushing down IN ('foo', 'bar') filter into Parquet reader 4 2022-01-19 2022-12-07
All works great... unless I'm outside of my home network 1 2022-12-07 2022-12-03
Register Profile Meta 0 2021-03-15 2022-11-12
Allow async flag resolution using Suspense somehow 0 2019-11-20 2022-10-29
SVG files are not rendered properly 3 2021-09-15 2022-10-27
Error opening symbollic attachment 1 2021-01-16 2022-11-18
worldofbuzz.com: ads 1 2022-04-28 2022-10-08
twitter.com: breakage 12 2022-04-28 2022-09-16
memangbau.com: detection 2 2022-04-28 2022-12-04
GUI: UIGridLayout does not follow UILayout standards 0 2022-11-26 2022-12-07
printf `%PRIu64` format string set incorrectly when cross-compiling to Windows with MinGW-w64 1 2022-03-19 2022-11-17
Program launch time changes depending on how many times I open it 7 2022-03-15 2022-10-21
Completing an exercise closes all open exercises 0 2021-06-06 2022-12-06
GBA BIOS no longer boots 0 2022-06-02 2022-11-19
[BUG] Different coloured QR scanning not working. 6 2022-02-14 2022-10-13
Remove vendored jQuery from kit 1 2022-06-29 2022-11-17
Unable to add Embedded Ansible Repositories 1 2022-02-11 2022-10-29
Expose Go library functions (please review the API!) 27 2019-12-31 2022-11-17
The filter | link() in twig files produces a /?slugOrId=... link to redirect homepage 3 2021-10-23 2022-12-07
[Feature request] Per-page CSP configuration 2 2019-06-07 2022-11-20
No Rate Limit Rule Examples in Front Door WAF Custom Rules doc. 2 2022-02-18 2022-11-29
mcrypt extension not installable on php 8.1 5 2021-12-09 2022-12-07
The link tracing information displayed by Zipkin is incorrect 3 2022-01-18 2022-10-05
Backup source imagery to S3 3 2022-06-13 2022-09-14
syntax: line continuation characters inside a string 2 2022-06-06 2022-12-07
Remove /reference/api/ folder 1 2022-02-16 2022-10-29
Coupling MTK with time discrete control 13 2021-08-09 2022-10-22
右侧视频详情宽度调整后普通视频和番剧不一致 2 2022-06-05 2022-10-28
Eclipse PDT does not check MacOS Java version, before automatic update. 1 2020-09-17 2022-11-29
Support for Essential Phone 0 2021-09-26 2022-10-15
shutil.disk_usage() accepts int and bytes 0 2021-10-25 2022-10-10
use more py39 features 1 2022-02-27 2022-11-18
Using JSON instead of the custom key-value format ? 0 2021-09-17 2022-11-27
Sample weight 0 2021-11-19 2022-01-15
How to use self signed certs? 4 2019-07-02 2022-11-12
gltfio::DependencyGraph::checkReadiness(filament::MaterialInstance*) crash 6 2022-07-20 2022-11-25
Restore CI/CD 9 2021-12-23 2022-01-22
branch protection documents don't talk about `conflict`s between protection rules 6 2022-03-01 2022-11-06
Links below time range graph (7D, 1D, 24H, etc.) are missing 3 2021-10-31 2022-11-01