Toggle dark mode 🌒

[EthanThatOneKid]

What's your idea?

My eyes, they burn!

This is what most of us think when we open up https://acmcsuf.com because, well, it’s so darn bright! The white background provides a clean feel, but we are due for a darker option for our most loyal visitors.

UI Implementation

There are a few UI approaches for toggling light/dark mode:

1. We can place a toggle switch input component in a place where the user is able to easily reach via keyboard navigation
2. We listen for a keyboard combination (e.g. ctrl+l)
3. We can listen for secret keystrokes (e.g. “acmdark”) ¹ — which opens the door for future Easter eggs

Stylesheet Implementation

When the visitor prefers dark mode, some of the CSS variable colors in global.css are to be appropriately adjusted.