Dark mode theme

[phette23]

See this Code4Lib 2022 poster and CSS Tricks. Two examples:

• IUPUI Library
• Lesley Library

CSS color-scheme may also be relevant here.

Basically, just add a new stylesheet with a media query and swap all the necessary colors within it. Certain sections (e.g. the main home page image) can probably remain as they are but a lot will need to change.

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
}

Or in JavaScript:

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)")

if (prefersDarkScheme.matches) {
  document.body.classList.add("dark-theme")
} else {
  document.body.classList.remove("dark-theme")
}

After implementing dark mode, create a button to toggle between states and store the preferred state in localStorage so people can opt in/out if they want.