Random Geekery

Collecting my attempts to improve at tech, art, and life

cover image

Added dark mode for the site

Got tired of blowing my eyeballs out during evening work.

How? I used prefers-color-scheme. It tries to respect existing light/dark mode settings. Here’s the stylesheet short version.

scss
:root {
--text-color: hsl(0, 0%, 0%);
--content-background-color: hsla(0, 0%, 100%, 0.8);
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: hsl(0, 0%, 100%);
--content-background-color: hsla(0, 0%, 0%, 0.8);
}
}
#page-content {
background-color: var(--content-background-color)
color: var(--text-color);
}