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

Added dark mode for the site

Tags: site css

Got tired of blowing my eyeballs out during evening work.

attachments/img/2020/cover-2020-02-02.png

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

: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);
}

Got a comment? A question? More of a comment than a question?

Talk to me about this page on: mastodon

Added to vault 2024-01-15. Updated on 2024-01-26