Improve legibility
This commit is contained in:
parent
7417aa331f
commit
cc1fe52591
1 changed files with 23 additions and 7 deletions
|
@ -58,6 +58,8 @@
|
|||
--color: hsl(var(--base-color), 85%);
|
||||
/* The accent color of the page. */
|
||||
--accent-color: hsl(var(--base-color), 50%);
|
||||
/* The background-adjacent accent color of the page. */
|
||||
--accent-color-bg: hsl(var(--base-color), 50%);
|
||||
/* The foreground accent color of the page. */
|
||||
--accent-color-fg: hsl(var(--base-color), 95%);
|
||||
|
||||
|
@ -75,8 +77,9 @@ html.base {
|
|||
--underlay-color: #fff !important;
|
||||
--background-color: transparent !important;
|
||||
--color: #000 !important;
|
||||
--accent-color: #000 !important;
|
||||
--accent-color-fg: #fff !important;
|
||||
--accent-color: #c0c0c0 !important;
|
||||
--accent-color-bg: #000 !important;
|
||||
--accent-color-fg: #000 !important;
|
||||
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
|
@ -91,6 +94,19 @@ html.base {
|
|||
transition: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.base {
|
||||
--underlay-color: #000 !important;
|
||||
--background-color: transparent !important;
|
||||
--color: #fff !important;
|
||||
--accent-color: #404040 !important;
|
||||
--accent-color-bg: #fff !important;
|
||||
--accent-color-fg: #fff !important;
|
||||
|
||||
--border-color: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
html.base body {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -225,7 +241,7 @@ html {
|
|||
}
|
||||
|
||||
*:focus {
|
||||
outline: 2px solid var(--accent-color-fg);
|
||||
outline: 2px solid var(--accent-color-bg);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
@ -257,7 +273,7 @@ iframe {
|
|||
/* Interactive normalize */
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
color: var(--accent-color-bg);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
@ -377,7 +393,7 @@ label.checkbox input[type="checkbox"] + span.checkbox {
|
|||
}
|
||||
|
||||
label.checkbox input[type="checkbox"]:focus + span.checkbox {
|
||||
outline: 2px solid var(--accent-color-fg);
|
||||
outline: 2px solid var(--accent-color-bg);
|
||||
}
|
||||
|
||||
label.checkbox input[type="checkbox"]:checked + span.checkbox {
|
||||
|
@ -426,7 +442,7 @@ input[type="range"]::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
input[type="range"]:focus::-webkit-slider-thumb {
|
||||
outline: 2px solid var(--accent-color-fg);
|
||||
outline: 2px solid var(--accent-color-bg);
|
||||
}
|
||||
|
||||
/******** Firefox styles ********/
|
||||
|
@ -441,5 +457,5 @@ input[type="range"]::-moz-range-thumb {
|
|||
}
|
||||
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
outline: 2px solid var(--accent-color-fg);
|
||||
outline: 2px solid var(--accent-color-bg);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue