1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-25 18:22:09 +00:00
seirdy.one/assets/css/dark.css
Rohan Kumar c9537a5b89
Rebuild dark + increased-contrast fg palette
New foreground colors when BOTH "prefers-color-scheme: dark" and
"prefers-contrast: more" media queries evaluate to "true" at the same
time. Regular and reduced-contrast dark-mode remain unchanged, and
non-dark colors continue to be browser-defaults.

High-contrast dark-mode now has visually distinct visited/unvisited
links for red-green and blue-yellow color blindness, and targets an even
higher APCA contrast.
2022-10-26 11:59:39 -07:00

91 lines
2.4 KiB
CSS

/* The dark stylesheet is the only place we set custom colors besides
* border colors for inline text. Make sure the perceptual contrast
* stays within the ideal APCA ranges, not lower and preferably not
* higher either. */
@media (prefers-color-scheme: dark) {
button,
html,
input {
/* Pure white on black causes halation.
* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need.
* This is the brightest background that still achieves an APCA
* contrast of 90 Lc.*/
background-color: #191919;
/* Dimming the default text color is not the same as reducing screen
* brightness, since other colors in this stylesheet have brighter
* red and blue channels than the default text. */
color: #e6e6e6;
}
mark {
color: #000;
background-color: #eee8a7;
}
/* Only color <a> if it's a link; if href is empty, let it be. */
a:link {
color: #eee8a7;
}
a:visited {
color: #ffd8ff;
}
/* Small text needs higher contrast.
* Do not apply to "prefers-contrast: less"
* Do not apply to "prefers-contrast: more" since
* we override colors there. */
@media not (prefers-contrast) {
sup a:link:not(:active) {
color: #feb;
}
sup a:visited:not(:active) {
color: #ffe6ff;
}
}
/* For users who request less contrast, target ACPA Lc near -80 */
@media (prefers-contrast: less) {
html,
input {
background-color: #444;
}
}
/* For users who request more contrast, target ACPA Lc near -99.
* I have a monitor with terrible contrast so I use
* "prefers-contrast: more" and this amount works for me. People
* complained that the lobste.rs dark theme has too much contrast, so
* I made that my baseline and exceeded it ever so slightly.
*
* Also, this mode ensures that visited/un-visited links look very
* different under red-green and blue-yellow color blindness.
* Normally, they look very similar under blue-yellow color blindness.
*
* I sometimes use this mode when I need to set my brightness all the
* way down. */
@media (prefers-contrast: more) {
html,
input {
background-color: #0d0d0d;
color: #f3f3f3;
}
a:link {
color: #fff970;
}
a:visited {
color: #ccfdff;
}
}
/* Specified last so it overrides :visited. I chose this color because
* it's dimmer, so it's noticeable even without color vision. However,
* it still meets the experimental SAPC-APCA threshold for "spot"
* contrast. */
a:active {
color: #f83;
}
}