feat: implement full dark mode support with next-themes#281
feat: implement full dark mode support with next-themes#281brodapeethar wants to merge 2 commits into
Conversation
- Install and configure next-themes with attribute='class' for Tailwind dark mode - Wrap root layout with ThemeProvider (defaultTheme='system', enableSystem) - Create reusable ThemeToggle component with icon and full variants - Add ThemeToggle to landing page header, auth layout, dashboard layout, admin layout, and settings page - Audit all pages and components for dark mode: - Landing, auth (login, signup, OTP, forgot/reset password) - Dashboard, transactions, profile, settings, notifications - Admin overview, transactions, users, analytics, push notifications - Error page, not-found page, error-boundary, api-error-state - Use Tailwind dark: variants with semantic color tokens - Remove all hardcoded background/text colors in favor of CSS variables Closes Nexacore-Org#242
|
@brodapeethar is attempting to deploy a commit to the Emmanuel Dorcas' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@brodapeethar Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
portableDD
left a comment
portableDD
left a comment
There was a problem hiding this comment.
please resolve conflicts, nice work
|
conflicts resolved |
|
@brodapeethar sorry about this please resolve conflicts |
|
resolved |
|
pls check again i have resolved it all, thanks |
|
This PR has merge conflicts. Please rebase on latest |
3 similar comments
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has merge conflicts. Please rebase on latest |
|
This PR has extensive merge conflicts with |
2 participants
Summary
Implements full dark mode support across the entire application using
next-themesand Tailwind'sdark:variant.Changes
Install and configure
next-themes— Wraps the root layout withThemeProviderusingattribute="class",defaultTheme="system", andenableSystemfor system preference detection.Theme toggle component (
components/shared/theme-toggle.tsx) — Reusable toggle with two variants:icon: Cycles through light → dark → system (compact, for nav bars)full: Shows all three options as buttons (for settings pages)Theme toggle placement:
app/page.tsx)Dark mode audit — Every page and component uses
dark:Tailwind variants and semantic CSS variable tokens:bg-background/text-foregroundfor page backgroundsbg-card/text-card-foregroundfor cardsbg-muted/text-muted-foregroundfor muted elementsborder-border/border-inputfor bordersbg-primary/text-primary-foregroundfor buttonsdark:bg-zinc-900,dark:bg-zinc-800Verification
npm run buildpasses with zero errorsnpm run lintpasses with zero errorsPages covered
Landing, login, signup, OTP, forgot-password, reset-password, dashboard, transactions, profile, settings, notifications, admin dashboard, admin transactions, admin users, admin analytics, admin push notifications, error page, not-found page, all shared components.
Acceptance Criteria
npm run buildandnpm run lintpassCloses #242