feat: dark theme

[ExampleWasTaken]

Summary of changes

Introduces support for @prefers-color-scheme: dark for surfaces with white background.

Screenshots(if applicable)

dark_theme_1.mp4

dark_theme_2.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 2, 2024 7:33pm

[NathanInnes]

It would be much more efficient if this was done at the higher level, this conflicts with the whole hard set themes of light and dark, a bigger rework should be done in order to achieve this more cleanly.

[ExampleWasTaken]

I agree that my implementation is inconsistent with the theme prop of the <Section> component. This is because the theme prop simply sets a dark background with white foreground and vice versa. This doesn't allow for different backgrounds in either theme. In fact, Donate.tsx seems to have the same problem.

Furthermore, setting a hard-coded theme does not support @prefers-color-scheme.

In my opinion, using a hard-coded theme as is done at the moment, defies tailwind's dark: property that natively supports @prefers-color-scheme and/or a separate toggle while also allowing individually styled components.

Based on this, I would suggest a refactor to remove the theme prop from the <Section> component and instead using tailwind's dark: variant on each individual component. As outlined above, this would allow for native @prefers-color-scheme support, as well as a toggle (if that is ever wanted).

[NathanInnes]

Would be nice to keep our light sections as is as its part of the design and clearer to differentiate sections from one another, if we want an implementation of dark mode and have it be beneficial, I think we should approach the NOTAMs posts for it and allow a dark reader to be available with a toggle switch.