RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:37: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

2
Userland/Libraries/LibWeb/CSS/Identifiers.json
View file

@ -89,6 +89,7 @@
"crosshair", "crosshair",
"currentcolor", "currentcolor",
"cursive", "cursive",
"dark",
"dashed", "dashed",
"decimal", "decimal",
"decimal-leading-zero", "decimal-leading-zero",
@ -131,6 +132,7 @@
"large", "large",
"larger", "larger",
"left", "left",
"light",
"lighter", "lighter",
"line-through", "line-through",
"list-item", "list-item",

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 // 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)) if (name.equals_ignoring_case("any-hover"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Hover); return CSS::IdentifierStyleValue::create(CSS::ValueID::Hover);
if (name.equals_ignoring_case("any-pointer"sv)) 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); return CSS::IdentifierStyleValue::create(CSS::ValueID::Fast);
if (name.equals_ignoring_case("width"sv)) if (name.equals_ignoring_case("width"sv))
return CSS::LengthStyleValue::create(CSS::Length::make_px(inner_width())); 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 {}; return {};
} }