LibWeb/CSS: Implement the color-scheme CSS property

Author: https://github.com/Gingeh
Commit: ce5cd012b9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3146
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.cpp

@@ -141,16 +141,19 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
         return node->computed_values().color();
     }
 
-    // First, handle <system-color>s, since they don't require a node.
+    PreferredColorScheme scheme = PreferredColorScheme::Light;
+    if (node.has_value()) {
+        scheme = node->computed_values().color_scheme();
+    }
+
+    // First, handle <system-color>s, since they don't strictly require a node.
     // https://www.w3.org/TR/css-color-4/#css-system-colors
     // https://www.w3.org/TR/css-color-4/#deprecated-system-colors
     switch (keyword()) {
     case Keyword::Accentcolor:
-        return SystemColor::accent_color();
+        return SystemColor::accent_color(scheme);
     case Keyword::Accentcolortext:
-        return SystemColor::accent_color_text();
-    case Keyword::Activetext:
-        return SystemColor::active_text();
+        return SystemColor::accent_color_text(scheme);
     case Keyword::Buttonborder:
     case Keyword::Activeborder:
     case Keyword::Inactiveborder:
@@ -159,14 +162,14 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
     case Keyword::Threedlightshadow:
     case Keyword::Threedshadow:
     case Keyword::Windowframe:
-        return SystemColor::button_border();
+        return SystemColor::button_border(scheme);
     case Keyword::Buttonface:
     case Keyword::Buttonhighlight:
     case Keyword::Buttonshadow:
     case Keyword::Threedface:
-        return SystemColor::button_face();
+        return SystemColor::button_face(scheme);
     case Keyword::Buttontext:
-        return SystemColor::button_text();
+        return SystemColor::button_text(scheme);
     case Keyword::Canvas:
     case Keyword::Appworkspace:
     case Keyword::Background:
@@ -175,35 +178,33 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
     case Keyword::Menu:
     case Keyword::Scrollbar:
     case Keyword::Window:
-        return SystemColor::canvas();
+        return SystemColor::canvas(scheme);
     case Keyword::Canvastext:
     case Keyword::Activecaption:
     case Keyword::Captiontext:
     case Keyword::Infotext:
     case Keyword::Menutext:
     case Keyword::Windowtext:
-        return SystemColor::canvas_text();
+        return SystemColor::canvas_text(scheme);
     case Keyword::Field:
-        return SystemColor::field();
+        return SystemColor::field(scheme);
     case Keyword::Fieldtext:
-        return SystemColor::field_text();
+        return SystemColor::field_text(scheme);
     case Keyword::Graytext:
     case Keyword::Inactivecaptiontext:
-        return SystemColor::gray_text();
+        return SystemColor::gray_text(scheme);
     case Keyword::Highlight:
-        return SystemColor::highlight();
+        return SystemColor::highlight(scheme);
     case Keyword::Highlighttext:
-        return SystemColor::highlight_text();
+        return SystemColor::highlight_text(scheme);
     case Keyword::Mark:
-        return SystemColor::mark();
+        return SystemColor::mark(scheme);
     case Keyword::Marktext:
-        return SystemColor::mark_text();
+        return SystemColor::mark_text(scheme);
     case Keyword::Selecteditem:
-        return SystemColor::selected_item();
+        return SystemColor::selected_item(scheme);
     case Keyword::Selecteditemtext:
-        return SystemColor::selected_item_text();
-    case Keyword::Visitedtext:
-        return SystemColor::visited_text();
+        return SystemColor::selected_item_text(scheme);
     default:
         break;
     }
@@ -213,9 +214,19 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
         return Color::Black;
     }
 
-    auto& document = node->document();
-    if (keyword() == Keyword::LibwebLink || keyword() == Keyword::Linktext)
-        return document.normal_link_color();
+    auto const& document = node->document();
+
+    switch (keyword()) {
+    case Keyword::LibwebLink:
+    case Keyword::Linktext:
+        return document.normal_link_color().value_or(SystemColor::link_text(scheme));
+    case Keyword::Visitedtext:
+        return document.visited_link_color().value_or(SystemColor::visited_text(scheme));
+    case Keyword::Activetext:
+        return document.active_link_color().value_or(SystemColor::active_text(scheme));
+    default:
+        break;
+    }
 
     auto palette = document.page().palette();
     switch (keyword()) {

Libraries/LibWeb/CSS/StyleValues/ColorSchemeStyleValue.cpp

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2025, Ladybird contributors
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "ColorSchemeStyleValue.h"
+#include <LibWeb/CSS/Serialize.h>
+
+namespace Web::CSS {
+
+String ColorSchemeStyleValue::to_string(SerializationMode) const
+{
+    if (schemes().is_empty())
+        return "normal"_string;
+
+    StringBuilder builder;
+    bool first = true;
+    for (auto const& scheme : schemes()) {
+        if (first) {
+            first = false;
+        } else {
+            builder.append(' ');
+        }
+        builder.append(serialize_an_identifier(scheme));
+    }
+
+    if (only())
+        builder.append(" only"sv);
+
+    return MUST(builder.to_string());
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/ColorSchemeStyleValue.h

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2025, Ladybird contributors
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/CSSStyleValue.h>
+
+namespace Web::CSS {
+
+class ColorSchemeStyleValue final : public StyleValueWithDefaultOperators<ColorSchemeStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<ColorSchemeStyleValue> create(Vector<String> schemes, bool only)
+    {
+        return adopt_ref(*new (nothrow) ColorSchemeStyleValue(move(schemes), only));
+    }
+    static ValueComparingNonnullRefPtr<ColorSchemeStyleValue> normal()
+    {
+        return adopt_ref(*new (nothrow) ColorSchemeStyleValue({}, false));
+    }
+    virtual ~ColorSchemeStyleValue() override = default;
+
+    Vector<String> const& schemes() const { return m_properties.schemes; }
+    bool const& only() const { return m_properties.only; }
+    virtual String to_string(SerializationMode) const override;
+
+    bool properties_equal(ColorSchemeStyleValue const& other) const { return m_properties == other.m_properties; }
+
+private:
+    ColorSchemeStyleValue(Vector<String> schemes, bool only)
+        : StyleValueWithDefaultOperators(Type::ColorScheme)
+        , m_properties { .schemes = move(schemes), .only = only }
+    {
+    }
+
+    struct Properties {
+        Vector<String> schemes;
+        bool only;
+        bool operator==(Properties const&) const = default;
+    } m_properties;
+};
+}