RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 05:17:35 +00:00
Code Issues Activity Actions

LibWeb: Implement prefers-color-scheme media query feature

Browse source 
This allows supporting websites to use a light or dark theme to match
our desktop theme, without being limited to palette colors. This can be
overridden with the `WebContentServer::set_preferred_color_scheme()` IPC
call.
This commit is contained in:
Sam Atkins 2021-10-23 17:36:43 +01:00 • committed by Linus Groh
parent 53edaa3b26
commit 84414da546
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Userland/Libraries/LibWeb/DOM/Window.cpp
View file

@ -295,6 +295,7 @@ RefPtr<CSS::StyleValue> Window::query_media_feature(FlyString const& name) const
{
// FIXME: Many of these should be dependent on the hardware
// MEDIAQUERIES-4 properties - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
if (name.equals_ignoring_case("any-hover"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Hover);
if (name.equals_ignoring_case("any-pointer"sv))
@ -331,6 +332,22 @@ RefPtr<CSS::StyleValue> Window::query_media_feature(FlyString const& name) const
return CSS::IdentifierStyleValue::create(CSS::ValueID::Fast);
if (name.equals_ignoring_case("width"sv))
return CSS::LengthStyleValue::create(CSS::Length::make_px(inner_width()));
// MEDIAQUERIES-5 properties - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
if (name.equals_ignoring_case("prefers-color-scheme")) {
if (auto* page = this->page()) {
switch (page->preferred_color_scheme()) {
case CSS::PreferredColorScheme::Light:
return CSS::IdentifierStyleValue::create(CSS::ValueID::Light);
case CSS::PreferredColorScheme::Dark:
return CSS::IdentifierStyleValue::create(CSS::ValueID::Dark);
case CSS::PreferredColorScheme::Auto:
default:
return CSS::IdentifierStyleValue::create(page->palette().is_dark() ? CSS::ValueID::Dark : CSS::ValueID::Light);
}
}
}
return {};
}