Frontend: dark mode theme + toggle

[gitgrahamdunn]

Motivation

• Provide a modern, production-ready dark theme as the default UI mode and give users a simple way to switch to light mode.
• Centralize color tokens so theme maintenance and future tweaks are straightforward and consistent across components.
• Ensure forms, banners, tables, and overlays remain readable and accessible in both modes without touching backend code.

Description

• Added client-side theme state that defaults to dark, stored in localStorage under gitplant.theme, and applied via data-theme on the document root.
• Added an accessible theme toggle button in the header with an aria-label that switches instantly between dark and light modes.
• Consolidated styling into frontend/src/styles.css using CSS variables (tokens include --bg, --panel, --panel-elevated, --text, --muted, --border, --primary, --danger, --success, --overlay) and provided a :root[data-theme="light"] override for light mode.
• Applied variables globally to body, header, nav, cards, inputs, buttons, tables, banners, modals, and toast so login and main pages render with good contrast and readable controls in both themes.

Testing

• Built the frontend with npm --prefix frontend run build and the build completed successfully.
• Started the dev server with npm --prefix frontend run dev -- --host 0.0.0.0 --port 4173 and confirmed the app loads (dev server ready).
• Ran an automated Playwright script that captured screenshots showing the app in default dark mode and after toggling to light mode, and confirmed the toggle switches instantly.
• Verified preference persistence by toggling and refreshing the page; the selected mode is restored from localStorage (gitplant.theme).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gitplant	Ready	Preview, Comment	Feb 19, 2026 1:35am
gitplant-backend	Ready	Preview, Comment	Feb 19, 2026 1:35am
gitplant-oggy	Ready	Preview, Comment	Feb 19, 2026 1:35am