1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-27 02:42:11 +00:00
seirdy.one/assets/css/dark.css
Rohan Kumar 02b1a8421e
Support reduced-contrast + RTL in dark mode
Use -inline-start instead of -left for machine translators that change
direction. Wrap that in a feature query so browsers that don't support
these rules can fall back to default styling. Those browsers are desktop
browsers anyway, where this doesn't relaly make a huge difference.

Add reduced-contrast for dark mode, for readers with severe astigmatism.
Reduced-contrast is the same as regular dark mode, except that the
background is lighter.

Somehow fit all of this in <1kb, any bigger and I'll have to stop
inlining.
2022-03-30 17:44:39 -07:00

37 lines
594 B
CSS

@media (prefers-color-scheme: dark) {
html {
/* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need
* I've been told that pure white on black is a bit harsh */
background-color: #0c0c0c;
color: #ececec;
}
a {
color: #ed7;
}
a:visited {
color: #ddc;
}
a:active {
color: #c80;
}
blockquote,
:not(pre) > code,
hr,
img,
pre {
border-color: #333;
}
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
@media (prefers-contrast: less) {
/* stylelint-enable */
html {
background-color: #222;
}
}
}