Toggle dark mode when prefers-color-scheme changes

[gabe565]

Description

Currently, if the prefers-color-scheme media query changes (for example, due to scheduled dark mode), the theme does not update until Homer is refreshed. This PR adds an event listener that toggles the mode dynamically. The dynamic change will not occur if the current mode has been overridden via the navbar toggle.

Examples

Current behavior

before-pr.mov

After this PR

after-pr3.mov

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• I've read & comply with the contributing guidelines
• I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• I have made corresponding changes to the documentation (README.md).
• I've checked my modifications for any breaking changes, especially in the config.yml file

[netlify]

✅ Deploy Preview for homer-demo-content ready!

Name	Link
🔨 Latest commit	92e9fba
🔍 Latest deploy log	https://app.netlify.com/sites/homer-demo-content/deploys/645b4a0feff41f0008b7054f
😎 Deploy Preview	https://deploy-preview-642--homer-demo-content.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[bastienwirtz]

Nice addition @gabe565 !
Looks good to me, Thanks!