Polish dark mode theme and ensure consistent theming across all pages

[siribeesu]

Summary

ChaatBazaar already has a visually rich interface, and dark mode/theme support is an important part of modern UI/UX. Ensuring that dark mode is consistently applied and visually polished across all pages will make the experience more cohesive and comfortable, especially for users browsing at night or on OLED screens.

Problem

• Light and dark themes may not be fully consistent across all pages (home, menu, cart, favourites, profile, orders, FAQ, etc.).
• Some elements (texts, icons, borders, backgrounds) might have colors that look good in light mode but are too bright, low-contrast, or mismatched in dark mode.
• Certain components may not update correctly when switching themes, leading to mixed or “half-dark, half-light” UI.
• As more features are added, theme inconsistencies can increase if they are not regularly reviewed.

Proposed Improvement

Perform a dedicated dark mode/theme polish pass across the entire application.

Suggested behavior:

• Ensure both light and dark themes use a consistent set of colors and spacing for common components (cards, buttons, nav, badges).
• Fix any text or icon colors that lose contrast in dark mode.
• Make sure backgrounds, borders, and shadows feel visually balanced and not too harsh or too flat.
• Verify that theme switching (if supported) updates all relevant UI parts on each page.

Why This Is Needed

A polished dark mode:

• Improves comfort for users browsing in low-light environments.
• Makes the app feel more professional and cohesive.
• Reduces visual bugs and inconsistencies when contributors add new components or styles.
• Aligns ChaatBazaar with modern UI expectations.

Expected Result

• Dark mode feels as intentional and well-designed as light mode.
• Text remains readable and high-contrast on all surfaces.
• Common components (cards, buttons, modals, navigation) look consistent across pages in both themes.
• Theme-related bugs or “mixed mode” areas are reduced.

Implementation Sketch

• Audit key pages (home/index, menu, cart, favourites, orders, profile, FAQ, contact) in dark mode.
• Identify elements where:
  • Text contrast is too low or too high.
  • Backgrounds or borders feel inconsistent with the rest of the theme.
  • Icons or badges are hard to see.
• Adjust colors, shadows, and border styles for dark mode while keeping visual hierarchy intact.
• Verify theme switching behaviour (if available) and ensure all components respond correctly.
• Optionally document basic theme guidelines for future contributors (e.g., which color tokens to use for text, surfaces, and accents).

Additional Context

This issue is focused on visual polish and consistency for theming rather than introducing new functionality. It complements other UI/UX and accessibility work by making the overall appearance more coherent and user-friendly in both light and dark environments.

[anshujod]

I want to work on this issue

[akshaya988]

/assign