Notes → Added dark mode for the site

Added dark mode for the site

· #site · #css ·

Added by to on

inv note Random Geekery a la Gatsby.js
Added dark mode for the site
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.

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