Dark mode fully operative

[patobottos]

Objective: Implement a dark mode theme for improved user experience and accessibility.

Steps:

Define Theme Colors:

• Add dark mode colors to your tailwind.config.js under extend.colors.
• Define colors for background, text, borders, and other UI elements to ensure high contrast and readability.

Enable Dark Mode in Tailwind:

• In tailwind.config.js, set darkMode: 'class' to enable class-based dark mode switching.

Dark Mode Toggle Button:

• Create a toggle button to switch between themes. Use Next.js state management or context to manage the toggle state globally.
• Save user preference with localStorage so it persists across sessions.

Set up Theme Context:

• Create a theme context in Next.js (ThemeProvider) to manage the state of the dark mode toggle and add it to _app.js.
• This context will allow any component to access or update the current theme.

Apply Dark Mode Styles:

• In your components, add Tailwind’s dark: variants to set styles for dark mode, e.g., dark:bg-gray-800 for backgrounds or dark:text-white for text.
• For complex components, consider using CSS modules or Tailwind CSS with conditional classes based on the theme context.

Add prefers-color-scheme (Optional):

• Add a check to set the initial theme based on the user’s system preference by using the CSS media query prefers-color-scheme if no previous preference is stored.

Testing:

• Review each page/component in both light and dark modes.
• Ensure all colors, charts, and UI elements adjust properly to the theme switch.

Deliverables:

• Functional dark mode toggle that persists via localStorage.
• Dark and light themes fully styled and tested for all components.
• Documentation on theme setup in the codebase to guide future modifications.