Dark mode toggle and fixes #356
Conversation
There was a problem hiding this comment.
Small quick fixes:
- board and magazine cards still have light-themed headers
- board and committee member placeholder image is black on black
- mobile nav theme toggle has odd active styles (light flash)
- mobile nav sublinks in collapsible sections are black on black
- mobile nav external links have black borders
- landing page event cards don't have backgrounds, so the gradient is seeping through
| <Button | ||
| variant="ghost" | ||
| onClick={() => { | ||
| setTheme(theme === "dark" ? "light" : "dark"); |
There was a problem hiding this comment.
Instead of a pure toggle, what if this was a menu with "System" / "Light" / "Dark" options?
| /* Shadow TOP */ | ||
| radial-gradient( | ||
| farthest-side at 50% 0, | ||
| theme("colors.stone.400 / 30%"), |
There was a problem hiding this comment.
I think we should use the brand / gray palette that the light mode site also uses, or create a new custom palette for dark mode.
The stone color palette looks nice, but it's quite different from the light theme colors
| @@ -70,7 +70,7 @@ export default async function Home({ | |||
| {announcement ? <AnnouncementCard news={announcement} /> : null} | |||
| </div> | |||
| <section className="space-y-4"> | |||
| <h1 className="font-mono text-4xl font-bold text-gray-900"> | |||
| <h1 className="dark:text-dark-heading font-mono text-4xl font-bold text-gray-900"> | |||
There was a problem hiding this comment.
This is a bigger note and imo not in scope of this PR, but we could move toward replacing straight color tokens like gray-900 with more semantic tokens overall like primary-text or similar.
Would also make it easier to assign those tokens in the tailwind theme and avoid having to define both dark: and light colors separately, since primary-text could already have both variants.
Inspired by shadcn
There was a problem hiding this comment.
This would also make the dark mode (or light mode, whichever is not the default) less error prone
No description provided.