From 07178f4d0ce4a15f6c3a9ff6073a306d44266432 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 28 Oct 2022 07:45:08 +0200 Subject: [PATCH] Use CSS color-scheme instead of invert (#21616) The [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) property changes the base color of certain form elements like the datepicker icon in Chrome. Set it and remove the previous invert hack. Before with invert removed: Screen Shot 2022-10-27 at 11 42 54 Screen Shot 2022-10-27 at 12 23 28 After: Screen Shot 2022-10-27 at 11 43 05 Screen Shot 2022-10-27 at 11 44 36 Screen Shot 2022-10-27 at 12 23 42 Co-authored-by: Lunny Xiao --- web_src/less/_base.less | 1 + web_src/less/themes/theme-arc-green.less | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 6846a21ef..f1691d815 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -168,6 +168,7 @@ --color-active-line: #fffbdd; accent-color: var(--color-accent); + color-scheme: light; } :root * { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index a2d2e5d08..229ffd893 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -153,10 +153,9 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; -} -::-webkit-calendar-picker-indicator { - filter: invert(.8); + accent-color: var(--color-accent); + color-scheme: dark; } /* invert emojis that are hard to read otherwise */