From 87fc071961fe849c3e46bf1ef3c282a64fa49a20 Mon Sep 17 00:00:00 2001 From: Elijah Date: Sat, 27 Jun 2026 20:56:10 -0700 Subject: [PATCH] feat: Add persistent Dark Mode with ThemeToggle component and layout script --- src/app/globals.css | 30 ++++++++++++ src/app/layout.tsx | 15 ++++++ .../[classSlug]/[type]/[token]/page.tsx | 24 ++++++---- src/components/ui/Navbar.tsx | 16 ++++--- src/components/ui/ThemeToggle.tsx | 48 +++++++++++++++++++ 5 files changed, 117 insertions(+), 16 deletions(-) create mode 100644 src/components/ui/ThemeToggle.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 26b14d7..f5f5e3e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,6 +36,36 @@ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } +@layer base { + .dark { + --color-bg-base: #0f1614; + --color-bg-surface: #17221f; + --color-bg-surface-alt: #1e2d28; + --color-bg-callout: #1a332a; + --color-primary: #4ab2b2; + --color-primary-hover: #5ec7c7; + --color-primary-light: #6cd1d1; + --color-text-heading: #e4f0ec; + --color-text-body: #c3d9d3; + --color-text-secondary: #9cb8b0; + --color-text-muted: #6b8a81; + --color-border: #38524a; + --color-border-light: #253832; + --color-success: #4ade80; + --color-success-bg: #143621; + --color-error: #f87171; + --color-error-bg: #3b1c1c; + --color-badge-bg: #214035; + --color-badge-text: #6fd6b8; + --color-danger: #ef4444; + --color-danger-hover: #f87171; + + --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); + --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); + --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); + } +} + /* ── Base Styles ── */ body { background: var(--color-bg-base); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 98f67c0..d598cbd 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,6 +20,21 @@ export default function RootLayout({ }>) { return ( + +