Skip to content

GitLab

T
tangled
Commit c518e41d authored by Sam Sebree's avatar Sam Sebree Committed by Commit Bot
Browse files
Options

[Controls Refresh] Adds dark mode styling for text and text area native controls 

This change uses the -internal-light-dark-color css property to set
correct dark mode styling on text input and text area native controls.
It also modifies the dark-color-scheme virtual test suite to run with
the updated flag "CSSColorSchemeUARendering"

Bug: 929098
Change-Id: Id3a632ac19b3705a74b7c098b64773fb98436e7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2071488Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarElly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#745445}
parent 8fb6e27f
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 5 deletions
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ c518e41d
......@@ -8,14 +8,18 @@
* using the refreshed controls UI.
*/
input,
select,
select:-internal-list-box,
textarea {
select:-internal-list-box{
background-color: #ffffff;
border-color: #767676;
}
input,
textarea {
background-color: -internal-light-dark-color(#ffffff, #3B3B3B);
border-color: -internal-light-dark-color(#767676, #C3C3C3);
}
input,
input[type="email" i],
input[type="number" i],
......@@ -35,7 +39,7 @@ textarea:disabled {
input:disabled,
textarea:disabled {
background-color: rgba(239, 239, 239, 0.3);
background-color: -internal-light-dark-color(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
}
select:disabled {
......
third_party/blink/web_tests/VirtualTestSuites
View file @ c518e41d
......@@ -540,7 +540,7 @@
"prefix": "dark-color-scheme",
"bases": ["external/wpt/css/css-color-adjust/rendering/dark-color-scheme"],
"args": ["--force-dark-mode",
"--enable-blink-features=CSSColorScheme"]
"--enable-blink-features=CSSColorScheme,CSSColorSchemeUARendering"]
},
{
"prefix": "force-defer-script",
......
third_party/blink/web_tests/virtual/dark-color-scheme/text/input-dark-mode-basic.html 0 → 100644
View file @ c518e41d
<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<meta name="color-scheme" content="dark">
<!-- no style for reference -->
<ul>
<li>Text: <input type="text" value="example text"/></li>
<li>Number: <input type="number" value="12345"/></li>
<li>Search: <input type="search" value="example text"/></li>
<li>Email: <input type="email" value="example text"/></li>
<li>Password: <input type="password" value="example text"/></li>
<li>TextArea: <textarea>example text</textarea> </li>
</ul>
<!-- disabled -->
<ul>
<li>Text disabled: <input type="text" style="color-scheme: dark" value="example text" disabled/></li>
</ul>
<ul>
<li>Text input -webkit-appearance none: <input type="text" style="color-scheme: dark; -webkit-appearance: none;" value="example text"/></li>
</ul>
<ul>
<li>TextArea -webkit-appearance none: <textarea style="color-scheme: dark; -webkit-appearance: none;" value="example text">example text</textarea></li>
</ul>
<!-- hover -->
<ul>
<li>Text hover: <input type="text" style="color-scheme: dark" id="hoverTarget" value="example text"/></li>
</ul>
<!-- zoom -->
<ul>
<li>Text zoom: 1.5: <input type="text" style="color-scheme: dark; zoom: 1.5;" value="example text"/></li>
<li>Text zoom: 4: <input type="text" style="color-scheme: dark; zoom: 4;" value="example text"/></li>
</ul>
<div style="background-color: blue">
<br>
<ul>
<li>Text: <input type="text /" style="color-scheme: dark" value="example text"></li>
</ul>
<br>
</div>
<script>
runAfterLayoutAndPaint(function() {
var target = document.getElementById('hoverTarget');
hoverOverElement(target);
}, true);
</script>
\ No newline at end of file
ui/native_theme/native_theme_base.cc
View file @ c518e41d
......@@ -1576,6 +1576,9 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
return GetHighContrastControlColor(color_id, color_scheme);
#endif
if(color_scheme == ColorScheme::kDark)
return GetDarkModeControlColor(color_id);
switch (color_id) {
case kBorder:
return SkColorSetRGB(0x76, 0x76, 0x76);
......@@ -1624,6 +1627,41 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
return gfx::kPlaceholderColor;
}
SkColor NativeThemeBase::GetDarkModeControlColor(
ControlColorId color_id) const {
switch (color_id) {
case kAccent:
case kHoveredAccent:
case kPressedAccent:
case kDisabledAccent:
case kFill:
case kHoveredFill:
case kPressedFill:
case kDisabledFill:
case kLightenLayer:
case kProgressValue:
case kSlider:
case kHoveredSlider:
case kPressedSlider:
case kDisabledSlider:
case kAutoCompleteBackground:
case kBackground:
return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kDisabledBackground:
return SkColorSetARGB(0x4D ,0x3B, 0x3B, 0x3B);
case kBorder:
return SkColorSetRGB(0xC3, 0xC3, 0xC3);
case kHoveredBorder:
return SkColorSetRGB(0xEA, 0xEA, 0xEA);
case kPressedBorder:
return SkColorSetRGB(0xAC, 0xAC, 0xAC);
case kDisabledBorder:
return SkColorSetARGB(0x4D ,0xC3, 0xC3, 0xC3);
}
NOTREACHED();
return gfx::kPlaceholderColor;
}
SkColor NativeThemeBase::GetHighContrastControlColor(
ControlColorId color_id,
ColorScheme color_scheme) const {
......
ui/native_theme/native_theme_base.h
View file @ c518e41d
......@@ -257,6 +257,7 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
ColorScheme color_scheme) const;
SkColor GetHighContrastControlColor(ControlColorId color_id,
ColorScheme color_scheme) const;
SkColor GetDarkModeControlColor(ControlColorId color_id) const;
SkColor GetControlColor(ControlColorId color_id,
ColorScheme color_scheme) const;
SkRect AlignSliderTrack(const gfx::Rect& slider_rect,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment