mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-23 01:32:14 -05:00
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.
This commit is contained in:
parent
9cd34a7d80
commit
f3bdee272b
Notes:
github-actions[bot]
2024-09-08 07:49:09 +00:00
Author: https://github.com/trflynn89 Commit: https://github.com/LadybirdBrowser/ladybird/commit/f3bdee272bb Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1319
2 changed files with 9 additions and 3 deletions
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue