Summary
Merchants frequently operate in low-light environments, such as night markets. The current stark white UI is glaring and causes eye strain. We need a pristine, enterprise-grade dark mode implementation. Concurrently, our tailwind.config.js has accumulated bloat and unused custom utilities that are degrading our build times.
We need to integrate next-themes to manage a persistent, hydration-safe dark mode toggle. The color palette should utilize a sophisticated slate/emerald combination (e.g., slate-950 backgrounds). Simultaneously, the Tailwind configuration must be aggressively pruned, removing custom CSS in favor of standard v3.4 utility classes.
Acceptance Criteria
Tech Stack
Next.js 14, React, Tailwind CSS, next-themes.
Summary
Merchants frequently operate in low-light environments, such as night markets. The current stark white UI is glaring and causes eye strain. We need a pristine, enterprise-grade dark mode implementation. Concurrently, our
tailwind.config.jshas accumulated bloat and unused custom utilities that are degrading our build times.We need to integrate
next-themesto manage a persistent, hydration-safe dark mode toggle. The color palette should utilize a sophisticated slate/emerald combination (e.g.,slate-950backgrounds). Simultaneously, the Tailwind configuration must be aggressively pruned, removing custom CSS in favor of standard v3.4 utility classes.Acceptance Criteria
next-themesand ensure preference is saved tolocalStorage.Tech Stack
Next.js 14, React, Tailwind CSS,
next-themes.