Add dashboard dark mode variants

[nonggde]

Summary

• add Tailwind v4 .dark custom variant support in globals.css
• add dark-mode background, text, border, placeholder, and focus-ring variants for Sidebar, TopHeader, and OverviewCards
• keep the existing light-mode classes in place while improving dark-mode contrast on dashboard surfaces

Validation

• git diff --check
• rg -n "@custom-variant dark|dark:bg|dark:text|dark:border|dark:placeholder|dark:focus" app/src/app/globals.css app/src/components/Sidebar.tsx app/src/components/TopHeader.tsx app/src/components/OverviewCards.tsx
• npm run lint -- src/components/Sidebar.tsx src/components/TopHeader.tsx src/components/OverviewCards.tsx could not complete locally because dependencies are not installed and eslint is not available on PATH in this worktree

Closes #14

[vercel]

@nonggde is attempting to deploy a commit to the akatenvictor's projects Team on Vercel.

A member of the Team first needs to authorize it.

[AliMahmoudDev]

Hey @nonggde, this is a solid improvement! Moving from a hardcoded dark theme to a proper @custom-variant dark setup with CSS variables is the right approach.

A couple of suggestions:

1. System preference: Consider respecting prefers-color-scheme on first load. You can add @media (prefers-color-scheme: dark) { :root { ... } } as a default before the user explicitly toggles.

2. Transition smoothness: Adding a brief transition: background-color 0.2s, color 0.2s on the body or :root makes the theme switch feel smoother rather than an abrupt change.

3. LocalStorage persistence: Make sure the theme choice is saved to localStorage so it persists across page reloads and sessions.

Looking forward to seeing the full implementation!