fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Rebuild dark + increased-contrast fg palette

Browse source 
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.
This commit is contained in:
Rohan Kumar 2022-10-26 11:48:35 -07:00
parent 19c3f86ea3
commit c9537a5b89
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
1 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
assets/css/dark.css
View file

@ -20,7 +20,7 @@
mark { mark {
color: #000; color: #000;
background-color: #eee7b2; background-color: #eee8a7;
} }
/* Only color <a> if it's a link; if href is empty, let it be. */ /* Only color <a> if it's a link; if href is empty, let it be. */
@ -29,7 +29,21 @@
} }
a:visited { a:visited {
color: #ffdaff; 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 */ /* For users who request less contrast, target ACPA Lc near -80 */
@ -40,35 +54,30 @@
} }
} }
/* Small text needs higher contrast. */ /* For users who request more contrast, target ACPA Lc near -99.
@media not (prefers-contrast: less) {
sup a:link:not(:active) {
color: #feb;
}
sup a:visited:not(:active) {
color: #ffe6ff;
}
}
/* For users who request more contrast, target ACPA Lc near -96.
* I have a monitor with terrible contrast so I use * I have a monitor with terrible contrast so I use
* "prefers-contrast: more" and this amount works for me. * "prefers-contrast: more" and this amount works for me. People
* People complained that the lobste.rs dark theme has too much * complained that the lobste.rs dark theme has too much contrast, so
* contrast, so I made that my baseline and exceeded it ever so * I made that my baseline and exceeded it ever so slightly.
* 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) { @media (prefers-contrast: more) {
html, html,
input { input {
background-color: #0d0d0d; background-color: #0d0d0d;
color: #eee; color: #f3f3f3;
} }
a:link { a:link {
color: #feb; color: #fff970;
} }
a:visited { a:visited {
color: #ffe6ff; color: #ccfdff;
} }
} }