Improve legibility

This commit is contained in:
MeowcaTheoRange 2023-12-21 03:12:17 -06:00
parent 7417aa331f
commit cc1fe52591

View file

@ -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);
}