Add dark mode support via prefers-color-scheme

[Copilot]

Implements automatic dark mode that responds to system color scheme preferences using CSS media queries.

Changes

• Dark mode styles - Added @media (prefers-color-scheme: dark) block to css/main.css with overrides for:
  • Backgrounds: #1a1a1a body, #2a2a2a container
  • Text: #e0e0e0 primary, #d0d0d0 headings
  • Links: #5dade2
  • Buttons: Dark gray defaults, #2980b9 primary
  • Code blocks: #3a3a3a background

Implementation

Pure CSS solution, no JavaScript required. 96 lines added at end of css/main.css. Zero changes to existing styles or HTML.

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }
    
    body > div.container {
        background-color: #2a2a2a;
        box-shadow: 0 0 8px 3px #000;
    }
    
    /* ... additional overrides ... */
}

Screenshots

Light mode (default):

Dark mode (system preference):

Original prompt

Support dark mode (based on system preferences)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[DRSDavidSoft]

Excellent job, exactly how we expected the feature to look like. 👍🏻

Note: When I originally switched from lemonade.css to Bootstrap 4, I should have also applied the font color to the body element as well, otherwise _reboot.scss would override its color. It was unnoticed because the two colors are pretty similar.

Adding dark mode revealed this issue, so I manually force-pushed a commit to also fix this issue.