fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +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 {
color: #000;
background-color: #eee7b2;
background-color: #eee8a7;
}
/* Only color <a> if it's a link; if href is empty, let it be. */
@ -29,7 +29,21 @@
}
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 */
@ -40,35 +54,30 @@
}
}
/* Small text needs higher contrast. */
@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.
/* 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. */
* "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: #eee;
color: #f3f3f3;
}
a:link {
color: #feb;
color: #fff970;
}
a:visited {
color: #ffe6ff;
color: #ccfdff;
}
}