2022-04-27 15:41:36 +00:00
|
|
|
/* 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. */
|
2020-11-03 23:46:20 +00:00
|
|
|
@media (prefers-color-scheme: dark) {
|
2022-05-27 00:06:56 +00:00
|
|
|
button,
|
|
|
|
html,
|
|
|
|
input {
|
2022-04-27 15:41:36 +00:00
|
|
|
/* Pure white on black causes halation.
|
|
|
|
* "background" is short for a bunch of unnecessary CSS rules
|
2022-05-23 15:54:06 +00:00
|
|
|
* background-color is all I need.
|
|
|
|
* This is the brightest background that still achieves an APCA
|
|
|
|
* contrast of 90 Lc.*/
|
2022-05-27 01:00:02 +00:00
|
|
|
background-color: #191919;
|
2022-04-27 15:41:36 +00:00
|
|
|
/* 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. */
|
2022-05-23 15:54:06 +00:00
|
|
|
color: #e6e6e6;
|
2022-04-23 22:35:08 +00:00
|
|
|
}
|
|
|
|
|
2022-06-28 15:52:07 +00:00
|
|
|
mark {
|
|
|
|
color: #000;
|
2022-10-26 18:48:35 +00:00
|
|
|
background-color: #eee8a7;
|
2022-06-28 15:52:07 +00:00
|
|
|
}
|
|
|
|
|
2022-04-14 01:19:49 +00:00
|
|
|
/* Only color <a> if it's a link; if href is empty, let it be. */
|
|
|
|
a:link {
|
2022-08-12 07:00:04 +00:00
|
|
|
color: #eee8a7;
|
2020-11-23 23:47:27 +00:00
|
|
|
}
|
2020-11-03 23:46:20 +00:00
|
|
|
|
2020-12-16 07:18:18 +00:00
|
|
|
a:visited {
|
2022-10-26 18:48:35 +00:00
|
|
|
color: #ffd8ff;
|
2022-05-23 15:54:06 +00:00
|
|
|
}
|
|
|
|
|
2022-10-26 18:48:35 +00:00
|
|
|
/* 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) {
|
2022-08-02 04:24:53 +00:00
|
|
|
sup a:link:not(:active) {
|
2022-05-23 15:42:24 +00:00
|
|
|
color: #feb;
|
|
|
|
}
|
|
|
|
|
2022-08-02 04:24:53 +00:00
|
|
|
sup a:visited:not(:active) {
|
|
|
|
color: #ffe6ff;
|
2022-05-23 15:42:24 +00:00
|
|
|
}
|
2022-05-02 00:04:20 +00:00
|
|
|
}
|
|
|
|
|
2022-10-26 18:48:35 +00:00
|
|
|
/* 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.
|
2022-08-12 07:00:04 +00:00
|
|
|
* I have a monitor with terrible contrast so I use
|
2022-10-26 18:48:35 +00:00
|
|
|
* "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. */
|
2022-05-23 15:54:06 +00:00
|
|
|
@media (prefers-contrast: more) {
|
2022-08-12 07:00:04 +00:00
|
|
|
html,
|
|
|
|
input {
|
|
|
|
background-color: #0d0d0d;
|
2022-10-26 18:48:35 +00:00
|
|
|
color: #f3f3f3;
|
2022-03-31 00:44:39 +00:00
|
|
|
}
|
2022-08-02 04:24:53 +00:00
|
|
|
|
|
|
|
a:link {
|
2022-10-26 18:48:35 +00:00
|
|
|
color: #fff970;
|
2022-08-02 04:24:53 +00:00
|
|
|
}
|
|
|
|
a:visited {
|
2022-10-26 18:48:35 +00:00
|
|
|
color: #ccfdff;
|
2022-08-02 04:24:53 +00:00
|
|
|
}
|
2022-03-31 00:44:39 +00:00
|
|
|
}
|
2022-05-23 15:54:06 +00:00
|
|
|
|
2022-08-02 04:24:53 +00:00
|
|
|
/* Specified last so it overrides :visited. I chose this color because
|
2022-08-04 04:31:05 +00:00
|
|
|
* it's dimmer, so it's noticeable even without color vision. However,
|
|
|
|
* it still meets the experimental SAPC-APCA threshold for "spot"
|
|
|
|
* contrast. */
|
2022-08-02 04:24:53 +00:00
|
|
|
a:active {
|
|
|
|
color: #f83;
|
|
|
|
}
|
2020-11-03 23:46:20 +00:00
|
|
|
}
|