feat: set dark mode as default and improve dark theme styles

[udaykiran243]

Feature: Set Dark Mode as Default & Enhance Theme Support

closes #90

Description

This PR updates the application to use Dark Mode as the default theme for all users. It also improves the dark mode implementation across the entire frontend by leveraging Tailwind CSS v4's theming capabilities and adding dedicated dark styles to key components.

Key Changes:

• Default Theme: Updated ThemeContext to default to dark mode if no user preference is found in localStorage.
• Global Styles: Configured index.css to use Tailwind v4's @custom-variant dark and set the body background to black by default.
• Component Styling: Added dark: utility classes to the following components to ensure a consistent and polished dark theme:
  • Home.jsx, Product.jsx
  • Card.jsx, Footer.jsx
  • LatestCollection.jsx, BestSeller.jsx
  • NewLetterBox.jsx, OurPolicy.jsx
  • Login.jsx, Registration.jsx
  • Title.jsx
• Configuration: Cleaned up vite.config.js to correctly support the new Tailwind CSS v4 plugin.

visual Changes

• The website now loads in dark mode instantly.
• Text colors, backgrounds, and gradients have been optimized for better readability and aesthetics in dark environments.
• The theme toggle in the navbar continues to work, allowing users to switch back to light mode if preferred.

Modified Files

• frontend/src/context/ThemeContext.jsx
• frontend/src/index.css
• frontend/vite.config.js
• frontend/src/pages/Home.jsx
• frontend/src/pages/Product.jsx
• frontend/src/pages/Login.jsx
• frontend/src/pages/Registration.jsx
• frontend/src/components/Card.jsx
• frontend/src/components/Footer.jsx
• frontend/src/components/LastestCollection.jsx
• frontend/src/components/BestSeller.jsx
• frontend/src/components/Title.jsx
• frontend/src/components/NewLetterBox.jsx
• frontend/src/components/OurPolicy.jsx

Checklist

• Default theme is set to Dark.
• Toggle button works correctly.
• LocalStorage saves the user's preference.
• All pages have appropriate dark mode styles.

Screen.Recording.2026-02-19.201636.mp4

[akshay0611]

Code Review - PR #96

Approved

Great work on implementing dark mode as the default theme @udaykiran243 !

What's done well

• Clean implementation with localStorage fallback
• Proper Tailwind @custom-variant usage
• Consistent styling across 14 files

Verified

• Theme toggle works in both light and dark modes

Optional enhancement (not blocking)

• Consider adding prefers-color-scheme system preference detection for a more inclusive user experience

Ready to merge!