[reenatoteixeira]

This pull request introduces a dark mode theme to the application by implementing theme initialization logic, defining light and dark color schemes, and updating styles and component classes to use CSS variables. The changes ensure consistent theming and make it easy to switch between light and dark modes based on user preference or system settings.

Dark mode and theme initialization:

• Added a theme initialization script (public/theme-init.js) that sets the dark class on the root element based on localStorage or system preference, and included it in index.html to ensure correct theme is applied before rendering. [1] [2]

Theming infrastructure and color variables:

• Created separate CSS files for light and dark themes (src/styles/themes/light.css, src/styles/themes/dark.css) with custom CSS variables for colors, and imported them in a central theme index (src/styles/themes/index.css). [1] [2] [3]
• Updated src/styles/tailwind.css to map theme variables to Tailwind custom properties, enabling consistent color usage throughout the app.

Global and component style updates:

• Changed the global stylesheet (src/styles/index.css) to import the new theme and Tailwind files, and defined a custom dark variant for easier dark mode targeting.
• Updated the main component (src/App.tsx) to use the new CSS variable-based color classes (bg-background, text-primary, text-muted-foreground, etc.) instead of hardcoded Tailwind colors, ensuring components respond to theme changes.