Skip to content

GitLab

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

[Controls Refresh] Adds dark mode styling for the checkbox and radio native control 

This change uses the native_theme_base controls properties to set
correct dark mode styling for input checkbox and radio controls.

Bug: 929098
Change-Id: I4d9a247d81d576bce688e75abd7c5fa240ff42e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2118893Reviewed-by: default avatarElly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: default avatarIonel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#753652}
parent 8294bfb2
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 0 deletions
third_party/blink/web_tests/virtual/dark-color-scheme/checkbox/checkbox-appearance-basic.html 0 → 100644
View file @ 8ee501a0
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<!-- no style for reference -->
<input type="checkbox" style="color-scheme:dark;">
<input type="checkbox" checked style="color-scheme:dark;">
<br>
<!-- border -->
<input type="checkbox" style="color-scheme:dark; border: 3px solid lime;">
<input type="checkbox" style="color-scheme:dark; border-radius: 6px;"> <br>
<!-- background -->
<input type="checkbox" style="color-scheme:dark; background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);"> <br>
<!-- shadow -->
<input type="checkbox" style="color-scheme:dark; box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>
<!-- size -->
<input type="checkbox" style="color-scheme:dark; width: 8px; height; 8px;">
<input type="checkbox" style="color-scheme:dark; width: 16px; height; 16px;">
<input type="checkbox" style="color-scheme:dark; width: 24px; height; 24px;">
<input type="checkbox" style="color-scheme:dark; width: 26px; height: 20px;">
<input type="checkbox" style="color-scheme:dark; width: 1px; height: 1px;"> <br>
<!-- disabled -->
<input type="checkbox" disabled style="color-scheme:dark;">
<input type="checkbox" disabled checked style="color-scheme:dark;"> <br>
<!-- zoom -->
<input type="checkbox" style="color-scheme:dark; zoom: 1.5;">
<input type="checkbox" style="color-scheme:dark; zoom: 2;">
<input type="checkbox" style="color-scheme:dark; zoom: 4;"> <br>
<input type="checkbox" id="hoverTarget" style="color-scheme:dark;"/>
<input type="checkbox" id="pressTarget" style="color-scheme:dark;"/>
<script>
runAfterLayoutAndPaint(function() {
var target = document.getElementById('hoverTarget');
var target2 = document.getElementById('pressTarget');
internals.setPseudoClassState(target, ":hover", true);
internals.setPseudoClassState(target2, ":active", true);
}, true);
</script>
</body>
third_party/blink/web_tests/virtual/dark-color-scheme/radio/radio-appearance-basic.html 0 → 100644
View file @ 8ee501a0
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<!-- no style for reference -->
<input type="radio" style="color-scheme:dark;">
<input type="radio" checked style="color-scheme:dark;">
<br>
<!-- border -->
<input type="radio" style="color-scheme:dark; border: 3px solid lime;">
<input type="radio" style="color-scheme:dark; border-radius: 6px;"> <br>
<!-- background -->
<input type="radio" style="color-scheme:dark; background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);"> <br>
<!-- shadow -->
<input type="radio" style="color-scheme:dark; box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>
<!-- size -->
<input type="radio" style="color-scheme:dark; width: 8px; height; 8px;">
<input type="radio" style="color-scheme:dark; width: 16px; height; 16px;">
<input type="radio" style="color-scheme:dark; width: 24px; height; 24px;">
<input type="radio" style="color-scheme:dark; width: 26px; height: 20px;">
<input type="radio" style="color-scheme:dark; width: 1px; height: 1px;"> <br>
<!-- disabled -->
<input type="radio" disabled style="color-scheme:dark;">
<input type="radio" disabled checked style="color-scheme:dark;"> <br>
<!-- zoom -->
<input type="radio" style="color-scheme:dark; zoom: 1.5;">
<input type="radio" style="color-scheme:dark; zoom: 2;">
<input type="radio" style="color-scheme:dark; zoom: 4;"> <br>
<input type="radio" id="hoverTarget" style="color-scheme:dark;"/>
<input type="radio" id="pressTarget" style="color-scheme:dark;"/>
<script>
runAfterLayoutAndPaint(function() {
var target = document.getElementById('hoverTarget');
var target2 = document.getElementById('pressTarget');
internals.setPseudoClassState(target, ":hover", true);
internals.setPseudoClassState(target2, ":active", true);
}, true);
</script>
</body>
ui/native_theme/native_theme_base.cc
View file @ 8ee501a0
......@@ -1627,9 +1627,13 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
ControlColorId color_id) const {
switch (color_id) {
case kAccent:
return SkColorSetRGB(0xC3, 0xC3, 0xC3);
case kHoveredAccent:
return SkColorSetRGB(0xD8, 0xD8, 0xD8);
case kPressedAccent:
return SkColorSetRGB(0xB9, 0xB9, 0xB9);
case kDisabledAccent:
return SkColorSetARGB(0x4D, 0xC3, 0xC3, 0xC3);
case kFill:
case kLightenLayer:
case kProgressValue:
......
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