Please let WebView support CSS media query ‘prefers-color-scheme' #22256

Amir000001 · 2023-10-30T19:42:31Z

Amir000001
Oct 30, 2023

Description

For better user experience with dark mode on web sites, Please let WebView support CSS media query prefers-color-scheme.

Public API Changes

Android & iOS both platforms have problems but different.
Android's WebView can not detect media query prefers-color-scheme at all.
iOS's WebView is correctly following OS's appearance, but there is white background flashed before page loaded under dark appearance.

Let WebView with CSS media query prefers-color-scheme support, so the pages implemented would switch theme by OS automatically.

Intended Use-Case

MS offical doc site has implemented prefers-color-scheme
So everyone can test on https://docs.microsoft.com/en-us/xamarin/

Eilon · 2023-10-30T21:52:25Z

Eilon
Oct 30, 2023

According to this post: https://stackoverflow.com/questions/57449900/letting-webview-on-android-work-with-prefers-color-scheme-dark

It sounds like on Android as long as you target the right API version it should all just work. Can you confirm whether you've tried that? Or what did you try and what doesn't work?

0 replies

ghost · 2023-10-31T03:17:19Z

ghost
Oct 31, 2023

Hi @Amir000001. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

0 replies

Amir000001 · 2023-11-01T17:57:20Z

Amir000001
Nov 1, 2023
Author

Согласно этому сообщению: https://stackoverflow.com/questions/57449900/letting-webview-on-android-work-with-prefers-color-scheme-dark

Похоже, что на Android, если вы нацеливаете правильную версию API, все должно работать. Можете ли вы подтвердить, пробовали ли вы это? Или что вы пробовали и что не работает?

I tried (@media (prefers-color-scheme: dark)) and (window.matchMedia("(prefers-color-scheme: dark)")) and they both don't work, I wish it worked out of the box.
I found a workaround for myself:

        string webviewTheme = (Application.Current.RequestedTheme == AppTheme.Dark) ? "dark-theme" : "light-theme";
        WebPage.Html = $@"
<html>
<head>
<style>
body.light-theme{{background-color: #fcfffc; color: #343434;}}
body.dark-theme {{background-color: #333333; color: #fcfffc;}}
</style>
</head>
<body>
<h1> Xamarin.Forms </h1>
<p> Welcome to {value}.</p>
<script type=""text/javascript"">
document.body.classList.add(""{webviewTheme}"");
</script>
</body></html>";

But this does not work when the OS theme changes and the webview is open, you need to refresh the page

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Please let WebView support CSS media query ‘prefers-color-scheme' #22256

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Please let WebView support CSS media query ‘prefers-color-scheme' #22256

Uh oh!

Amir000001 Oct 30, 2023

Description

Public API Changes

Intended Use-Case

Replies: 3 comments

Uh oh!

Eilon Oct 30, 2023

Uh oh!

ghost Oct 31, 2023

Uh oh!

Uh oh!

Amir000001 Nov 1, 2023 Author

Amir000001
Oct 30, 2023

Eilon
Oct 30, 2023

ghost
Oct 31, 2023

Amir000001
Nov 1, 2023
Author