Dark theme

[wllmwu]

Description

• As a site visitor who uses dark mode,
• I want to view the site in dark theme,
• So that I have a more consistent experience.

See https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/

Requirements

• Scenario 1: Initial light color scheme preference
  • Given my system/browser is set to light mode,
  • When I visit the site for the first time,
  • Then the site displays in light theme.
• Scenario 2: Initial dark color scheme preference
  • Given my system/browser is set to dark mode,
  • When I visit the site for the first time,
  • Then the site displays in dark theme.
• Scenario 3: Toggle color scheme
  • Given Scenario 1,
  • When I toggle the color scheme switch in the navigation bar,
  • Then the site changes to dark theme.
• Scenario 4: Returning with different color scheme preference
  • Given Scenario 2 or 3,
  • And my system/browser is currently set to light mode,
  • When I visit the site again later,
  • Then the site displays in dark theme.

Tasks

• [ ] Create and style a color scheme toggle switch
• [ ] Add dark theme to site CSS
• [ ] Check the prefers-color-scheme media feature for initial user preference (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
• [ ] Save user preference in local storage

[wllmwu]

Done for now via commit 15fd585