New issue
Advanced search Search tips

Issue 889087 link

Starred by 42 users

Issue metadata

Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android , Windows , Chrome , Mac
Pri: 2
Type: Feature



Sign in to add a comment

Add support for CSS prefers-color-scheme media feature

Reported by meriha...@gmail.com, Sep 25

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:62.0) Gecko/20100101 Firefox/62.0

Steps to reproduce the problem:
Try to use prefers-color-scheme media query.

What is the expected behavior?
prefers-color-scheme media query should report the user's preference about the OS color scheme.

What went wrong?
prefers-color-scheme media query is ignored.

Did this work before? No 

Does this work in other browsers? No
 This is a new media query added to CSS Media Queries Level 5 to utilize the dark mode preference operating systems provide.

https://bugzilla.mozilla.org/show_bug.cgi?id=1494034

Chrome version: <Copy from: 'about:version'>  Channel: n/a
OS Version: OS X 10.14
Flash Version: 

Link to spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
 
Labels: Needs-Milestone
Labels: -Type-Bug Type-Feature
Labels: -Pri-2 Pri-3
Status: Available (was: Unconfirmed)
Support for this has arrived in Safari Technology Preview 68.
Cc: ellyjo...@chromium.org
cc ellyjones@ re: our conversation earlier this week about interaction of dark mode and which system colors we give to Blink

Might as well branch this out to Windows

Win32 apps listen on:

Software\Microsoft\Windows\CurrentVersion\Themes\Personalize\AppsUseLightTheme

https://blogs.technet.microsoft.com/uktechnet/2016/07/15/13-epic-registry-hacks/

Windows WPF/UWP apps use:

Application.RequestedTheme

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.application.requestedtheme




Labels: -Pri-3 Pri-2
Owner: futhark@chromium.org
Status: Assigned (was: Available)
Status: Started (was: Assigned)
Labels: OS-Android OS-Chrome OS-Windows
Cc: markchang@chromium.org
Project Member

Comment 11 by bugdroid1@chromium.org, Jan 10

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7959d13749d4d965ad6a08767e3d28dabe262d03

commit 7959d13749d4d965ad6a08767e3d28dabe262d03
Author: Rune Lillesveen <futhark@chromium.org>
Date: Thu Jan 10 10:16:28 2019

Support for prefers-color-scheme media feature.

The preferred color scheme can be passed to the renderer through
Settings, but there is no code in content changing it from the default
value yet.

Spec:

https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme

Intent to Implement:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Muw0N43ntSw

Bug: 889087
Change-Id: I859de2953966640baed57ee6d4a5edcbabf9e999
Reviewed-on: https://chromium-review.googlesource.com/c/1396404
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#621528}
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/public/BUILD.gn
[add] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/public/platform/web_color_scheme.h
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/css.dict
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/css_value_keywords.json5
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_feature_names.json5
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_query_evaluator.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_query_exp.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values.h
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values_cached.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values_cached.h
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values_dynamic.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/media_values_dynamic.h
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/css/style_engine_test.cc
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/frame/settings.h
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/renderer/platform/runtime_enabled_features.json5
[add] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-color-scheme-expected.txt
[add] https://crrev.com/7959d13749d4d965ad6a08767e3d28dabe262d03/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-color-scheme.html

Sign in to add a comment