1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 15:22:09 +00:00
seirdy.one/assets/css/dark.css
Rohan Kumar 05dbdb7748
Add CSS for <mark> elements.
Will be using them in a future post.
2022-06-28 08:52:07 -07:00

63 lines
1.3 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: #eee7b2;
}
/* Only color <a> if it's a link; if href is empty, let it be. */
a:link {
color: #eee7b2;
}
a:active {
color: #b93;
}
a:visited {
color: #ffdaff;
}
@media (prefers-contrast: less) {
html {
background-color: #333;
}
}
/* Small text needs higher contrast. */
@media not (prefers-contrast: less) {
sup a:link {
color: #feb;
}
sup a:visited {
color: #ffe5ff;
}
}
@media (prefers-contrast: more) {
html {
background-color: #111;
color: #eee;
}
}
}