diff options
| author | silverwind <me@silverwind.io> | 2022-10-28 07:45:08 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-28 13:45:08 +0800 |
| commit | 07178f4d0ce4a15f6c3a9ff6073a306d44266432 (patch) | |
| tree | 04b28a67babfafa0d32bf26955688760fe4f76e6 /web_src | |
| parent | 2cc7408b98a3f295f73a34e05a0a46b0c767c322 (diff) | |
| download | gitea-07178f4d0ce4a15f6c3a9ff6073a306d44266432.tar.gz gitea-07178f4d0ce4a15f6c3a9ff6073a306d44266432.zip | |
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:
<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>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/less/_base.less | 1 | ||||
| -rw-r--r-- | 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 6846a21ef9..f1691d8156 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 a2d2e5d082..229ffd8937 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 */ |