Use system accent color on Windows

This commit is contained in:
windingwind 2024-03-10 11:59:23 +08:00
parent d2dc9dd3c0
commit 0c3dce781c
5 changed files with 16 additions and 9 deletions

View file

@ -4,7 +4,7 @@
font-style: normal; font-style: normal;
line-height: 1.3333333333; line-height: 1.3333333333;
@media (-moz-platform: windows) { @media (-moz-platform: windows) {
--color-accent: var(--accent-blue); --color-accent: -moz-accent-color;
@include light-dark(--color-focus-outer-border, var(--fill-primary), var(--accent-white)); @include light-dark(--color-focus-outer-border, var(--fill-primary), var(--accent-white));
@include light-dark(--color-focus-border, var(--accent-white), #00000080); @include light-dark(--color-focus-border, var(--accent-white), #00000080);
--width-focus-outer-border: 2px; --width-focus-outer-border: 2px;

View file

@ -10,14 +10,14 @@ input:is([type=button], [type=submit]) {
color: var(--accent-white); color: var(--accent-white);
&:not([disabled]) { &:not([disabled]) {
--color-form-element-background: var(--accent-blue); --color-form-element-background: var(--color-accent);
&:hover { &:hover {
--color-form-element-background: rgba(64, 114, 229, 0.9); --color-form-element-background: color-mix(in srgb, var(--color-accent) 90%, transparent);
} }
&:active { &:active {
--color-form-element-background: rgba(64, 114, 229, 0.8); --color-form-element-background: color-mix(in srgb, var(--color-accent) 80%, transparent);
} }
@include focus-ring; @include focus-ring;

View file

@ -15,19 +15,19 @@
background-clip: border-box, padding-box; background-clip: border-box, padding-box;
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
border: 1px solid var(--fill-quinary); border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue); border-bottom-color: var(--color-accent);
background-color: unset; background-color: unset;
background-image: background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%), linear-gradient(to top, var(--color-accent) 2px, transparent 2px 100%),
linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border: 1px solid var(--fill-quinary); border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue); border-bottom-color: var(--color-accent);
background-color: unset; background-color: unset;
background-image: background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%), linear-gradient(to top, var(--color-accent) 2px, transparent 2px 100%),
linear-gradient(var(--fill-senary), var(--fill-senary)); linear-gradient(var(--fill-senary), var(--fill-senary));
} }
} }
@ -95,7 +95,7 @@ textarea {
} }
&::selection { &::selection {
background-color: var(--accent-blue); background-color: var(--color-accent);
color: var(--accent-white); color: var(--accent-white);
} }

View file

@ -0,0 +1,6 @@
.text-link,
.zotero-text-link,
a {
// Overwrite the -moz-nativehyperlinktext to respect the accent color
color: var(--color-accent) !important;
}

View file

@ -20,5 +20,6 @@
@import "win/components/button"; @import "win/components/button";
@import "win/components/input"; @import "win/components/input";
@import "win/components/link";
@import "win/components/menulist"; @import "win/components/menulist";
@import "win/components/tabbox"; @import "win/components/tabbox";