From f3bdee272bb80413eff26581f539ea1a59ff03fb Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Sat, 7 Sep 2024 14:22:17 -0400
Subject: [PATCH] LibWeb: Assign native colors to input, text, and select
 elements

This allows rendering the elements with a dark color in dark mode. We
must also assign a `fill` color to the <select> element's chevron SVG
to match the text color.
---
 Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp | 6 +++++-
 Userland/Libraries/LibWebView/Native.css             | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
index 49aef263955..5708128b8d0 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLSelectElement.cpp
@@ -25,6 +25,7 @@
 #include <LibWeb/Layout/Node.h>
 #include <LibWeb/Namespace.h>
 #include <LibWeb/Page/Page.h>
+#include <LibWeb/Painting/Paintable.h>
 
 namespace Web::HTML {
 
@@ -528,13 +529,16 @@ void HTMLSelectElement::create_shadow_tree_if_needed()
     MUST(border->append_child(*m_inner_text_element));
 
     // FIXME: Find better way to add chevron icon
+    auto chevron_fill_color = document().page().palette().base_text();
+    auto chevron_svg = MUST(String::formatted("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"{}\" d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\"/></svg>", chevron_fill_color));
+
     m_chevron_icon_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
     MUST(m_chevron_icon_element->set_attribute(HTML::AttributeNames::style, R"~~~(
         width: 16px;
         height: 16px;
         margin-left: 4px;
     )~~~"_string));
-    MUST(m_chevron_icon_element->set_inner_html("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" /></svg>"sv));
+    MUST(m_chevron_icon_element->set_inner_html(chevron_svg));
     MUST(border->append_child(*m_chevron_icon_element));
 
     update_inner_text_element();
diff --git a/Userland/Libraries/LibWebView/Native.css b/Userland/Libraries/LibWebView/Native.css
index 87fbca6c150..a9c5b6d8ed4 100644
--- a/Userland/Libraries/LibWebView/Native.css
+++ b/Userland/Libraries/LibWebView/Native.css
@@ -9,16 +9,18 @@ html {
 }
 
 input, textarea {
+    background-color: -libweb-palette-base;
     border-color: -libweb-palette-threed-shadow1;
+    color: -libweb-palette-base-text;
 }
 
-button, input[type=submit], input[type=button], input[type=reset] {
+button, input[type=submit], input[type=button], input[type=reset], select {
     background-color: -libweb-palette-button;
     border-color: -libweb-palette-threed-shadow1;
     color: -libweb-palette-button-text;
 }
 
-button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
+button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
     background-color: -libweb-palette-hover-highlight;
 }