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 @@ ...@@ -8,14 +8,18 @@
* using the refreshed controls UI. * using the refreshed controls UI.
*/ */
input,
select, select,
select:-internal-list-box, select:-internal-list-box{
textarea {
background-color: #ffffff; background-color: #ffffff;
border-color: #767676; border-color: #767676;
} }
input,
textarea {
background-color: -internal-light-dark-color(#ffffff, #3B3B3B);
border-color: -internal-light-dark-color(#767676, #C3C3C3);
}
input, input,
input[type="email" i], input[type="email" i],
input[type="number" i], input[type="number" i],
...@@ -35,7 +39,7 @@ textarea:disabled { ...@@ -35,7 +39,7 @@ textarea:disabled {
input:disabled, input:disabled,
textarea: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 { select:disabled {
......
third_party/blink/web_tests/VirtualTestSuites
View file @ c518e41d
...@@ -540,7 +540,7 @@ ...@@ -540,7 +540,7 @@
"prefix": "dark-color-scheme", "prefix": "dark-color-scheme",
"bases": ["external/wpt/css/css-color-adjust/rendering/dark-color-scheme"], "bases": ["external/wpt/css/css-color-adjust/rendering/dark-color-scheme"],
"args": ["--force-dark-mode", "args": ["--force-dark-mode",
"--enable-blink-features=CSSColorScheme"] "--enable-blink-features=CSSColorScheme,CSSColorSchemeUARendering"]
}, },
{ {
"prefix": "force-defer-script", "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, ...@@ -1576,6 +1576,9 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
return GetHighContrastControlColor(color_id, color_scheme); return GetHighContrastControlColor(color_id, color_scheme);
#endif #endif
if(color_scheme == ColorScheme::kDark)
return GetDarkModeControlColor(color_id);
switch (color_id) { switch (color_id) {
case kBorder: case kBorder:
return SkColorSetRGB(0x76, 0x76, 0x76); return SkColorSetRGB(0x76, 0x76, 0x76);
...@@ -1624,6 +1627,41 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id, ...@@ -1624,6 +1627,41 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
return gfx::kPlaceholderColor; 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( SkColor NativeThemeBase::GetHighContrastControlColor(
ControlColorId color_id, ControlColorId color_id,
ColorScheme color_scheme) const { 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 { ...@@ -257,6 +257,7 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
ColorScheme color_scheme) const; ColorScheme color_scheme) const;
SkColor GetHighContrastControlColor(ControlColorId color_id, SkColor GetHighContrastControlColor(ControlColorId color_id,
ColorScheme color_scheme) const; ColorScheme color_scheme) const;
SkColor GetDarkModeControlColor(ControlColorId color_id) const;
SkColor GetControlColor(ControlColorId color_id, SkColor GetControlColor(ControlColorId color_id,
ColorScheme color_scheme) const; ColorScheme color_scheme) const;
SkRect AlignSliderTrack(const gfx::Rect& slider_rect, 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