What needs to be done
Add a dark/light mode toggle button to the dashboard. Clicking it switches between dark (current default) and light theme.
Why this matters
Many users prefer light mode. This is one of the most-requested features and a great entry point into the component architecture.
Exact files to edit
1. src/app/dashboard/page.tsx — add the toggle button to the top bar area
2. src/components/DashboardHeader.tsx — place the toggle button here (next to the sign-out button)
3. src/app/globals.css — add light mode CSS variables (or use Tailwind dark: classes throughout)
Recommended approach
Use Tailwind's built-in dark mode. In tailwind.config.ts, set:
Then toggle a dark class on <html> using localStorage to persist the preference.
A minimal toggle component:
"use client";
import { useEffect, useState } from "react";
export default function ThemeToggle() {
const [dark, setDark] = useState(true);
useEffect(() => {
document.documentElement.classList.toggle("dark", dark);
localStorage.setItem("theme", dark ? "dark" : "light");
}, [dark]);
return (
<button onClick={() => setDark((d) => !d)}>
{dark ? "☀️ Light" : "🌙 Dark"}
</button>
);
}Acceptance criteria
Setup
See DEVELOPMENT.md to get running locally in under 10 minutes.
Mentorship
Comment "I'd like to work on this" to get assigned. Maintainer will respond within 48h.
What needs to be done
Add a dark/light mode toggle button to the dashboard. Clicking it switches between dark (current default) and light theme.
Why this matters
Many users prefer light mode. This is one of the most-requested features and a great entry point into the component architecture.
Exact files to edit
1.
src/app/dashboard/page.tsx— add the toggle button to the top bar area2.
src/components/DashboardHeader.tsx— place the toggle button here (next to the sign-out button)3.
src/app/globals.css— add light mode CSS variables (or use Tailwinddark:classes throughout)Recommended approach
Use Tailwind's built-in dark mode. In
tailwind.config.ts, set:darkMode: 'class'Then toggle a
darkclass on<html>usinglocalStorageto persist the preference.A minimal toggle component:
Acceptance criteria
npm run lintandnpm run type-checkpassSetup
See DEVELOPMENT.md to get running locally in under 10 minutes.
Mentorship
Comment "I'd like to work on this" to get assigned. Maintainer will respond within 48h.