Use CSS color-scheme instead of invert (go-gitea#21616)

silverwind · lunny · silverwind · commit a17c9dddb905 · 2022-10-28T12:46:24.000+02:00
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: <img width="840" alt="Screen Shot 2022-10-27 at 11 42 54" src="https://user-images.githubusercontent.com/115237/198251927-b742e14e-0c62-492c-b667-ee6c69de4ad8.png"> <img width="238" alt="Screen Shot 2022-10-27 at 12 23 28" src="https://user-images.githubusercontent.com/115237/198260413-37c1ca85-c2de-4c09-8b37-6aa8a23ab575.png"> After: <img width="841" alt="Screen Shot 2022-10-27 at 11 43 05" src="https://user-images.githubusercontent.com/115237/198251934-568fa291-0d18-4cd4-adec-58ae1ad90ab2.png"> <img width="839" alt="Screen Shot 2022-10-27 at 11 44 36" src="https://user-images.githubusercontent.com/115237/198251936-a435105e-572b-41f6-8262-a53820f1d364.png"> <img width="243" alt="Screen Shot 2022-10-27 at 12 23 42" src="https://user-images.githubusercontent.com/115237/198260432-5eaffc82-ffb8-4559-b1c2-08a39e8f4427.png"> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
diff --git 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
@@ -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 */

Original file line number	Diff line number	Diff line change
`@@ -168,6 +168,7 @@`
`168`	`168`	`--color-active-line: #fffbdd;`
`169`	`169`
`170`	`170`	`accent-color: var(--color-accent);`
	`171`	`+ color-scheme: light;`
`171`	`172`	`}`
`172`	`173`
`173`	`174`	`:root * {`