Feature Plan: Universal Dark Mode
Universal Dark Mode is a core design enhancement for the MuAPI client, transitioning from hardcoded styles to a robust, semantic design system. It leverages the premium color palette from the ViralVadoo project to ensure a consistent and professional aesthetic across all platforms.
Overview
The Dark Mode implementation utilizes CSS variables and Tailwind CSS 4 to provide a seamless theme-switching experience. It replaces static hex codes with semantic tokens that respond to the user's system preferences or manual toggle.
Features
- Semantic Tokens: Standardized CSS variables for backgrounds, text, and actions.
- ViralVadoo Palette Integration: Adopts the battle-tested dark palette from ViralVadoo.
- Auto-Switching: Support for
systempreference and persistent user selection. - Responsive Design: Optimized contrast for both mobile and desktop viewports.
Key Features
- Primary Action Color: Uses
#3898ec(ViralVadoo Blue) for consistent brand identity. - Layered Backgrounds: Implements
#121212for main pages and#1E1E1Efor cards/modals. - High-Legibility Text: Utilizes
#E0E0E0for primary content to reduce eye strain. - Micro-Animations: Smooth color transitions during theme switching.
Implementation Plan
1. Define Design Tokens
Update globals.css with the ViralVadoo color palette in a theme-aware structure.
| Category | Token | Light Value | Dark Value |
|---|---|---|---|
| Colors | --primary | #3898ec | #3898ec |
--secondary | #818CF8 | #A78BFA | |
| Backgrounds | --bg-page | #F8FAFC | #121212 |
--bg-card | #FFFFFF | #1E1E1E | |
| Text | --text-main | #0F172A | #E0E0E0 |
--text-sub | #475569 | #B0B0B0 | |
| Borders | --border-main | #E2E8F0 | #333333 |
2. Update Tailwind Configuration
Map these variables in tailwind.config.js to enable utility classes like bg-primary and text-main.
3. Refactor Components
Replace hardcoded utility classes (e.g., bg-[#121212]) with semantic ones (e.g., bg-bg-page).
Limitations
- Legacy Components: Some third-party libraries (e.g., specific ReactFlow nodes) may require manual styling overrides.
- Image Assets: Logos and icons with fixed backgrounds may need SVG variants or filter adjustments.
Out-of-Scope Use
- This plan does not cover high-contrast accessibility modes (WCAG AAA) in the initial phase.
- Deep-level customization of third-party widget themes (e.g., Stripe Checkout) is not included.
Related Files
muapiapp/client/app/globals.css: Root styling and CSS variables.muapiapp/client/tailwind.config.js: Tailwind theme extensions.muapiapp/client/scripts/dark-mode-plan.js: Design system planning script.muapiapp/client/app/providers.js: Theme provider configuration.