[WIP] Update UI color system to Indigo-based design

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Update the UI color system across the entire repository from a simple purple/white theme to a consistent, modern professional Indigo-based design system.

Repository: SharmaHridya/BlogPost

Implement the following theme palette and apply it consistently across the app:

Primary Theme (required):

• Primary color: #4f46e5 (indigo)
• Background (light mode): #f8fafc
• Background (dark mode): #0b1220
• Card backgrounds: slate/gray shades appropriate to light/dark mode
• Text: slate-700 in light mode and slate-200 in dark mode
• Borders: subtle gray shades (avoid stark black/white)

Requirements:

1. Do not use random one-off colors in individual components.
2. Establish a consistent color system/tokens and reuse them in navbar, buttons, cards, links, and key UI surfaces.
3. Ensure hover/focus/active states use slightly darker/lighter variants of the primary indigo color.
4. Maintain accessibility: ensure readable contrast in both light and dark modes.
5. Apply the theme consistently across the entire app (all pages/components where existing purple/white styling appears).

Implementation guidance:

• Identify current color definitions/usages (CSS variables, global styles, component styles, utility classes) and replace legacy purple/white-centric styling with the new tokenized palette.
• Prefer centralizing color tokens in a global stylesheet/config so components consume shared values.
• Update dark mode color mappings to align with #0b1220 background and slate text/borders.
• Ensure cards and elevated surfaces use subtle slate shades and not pure white/black.
• Verify interactive elements (buttons, links, nav items) have coherent default + hover states tied to primary indigo.

Deliverables:

• Code changes implementing the new color system.
• A pull request summarizing what was updated and where consistency/accessibility improvements were made.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: ```

🎨 COLOR SCHEME UPDATE (IMPORTANT)

Redesign the UI color system from a simple purple/white theme to a modern professional theme.

Use a consistent design system with:

Primary Theme (choose this):

• Primary color: Indigo (#4f46e5)
• Background (light mode): #f8fafc
• Background (dark mode): #0b1220
• Card background: slate/gray shades
• Text: slate-700 / slate-200 depending on theme
• Borders: subtle gray (not harsh black/white)

---

RULES:

• Do NOT use random colors per component
• Create consistency across navbar, buttons, cards, and links
• Ensure hover states use slightly darker/lighter shades of primary color
• Maintain accessibility (contrast must be readable)
• Apply theme consistently across the entire app

Assistant: Great — I’ll apply this as a **global design-system update** for `SharmaHridya/BlogPost` using the Indigo-based palette you specified, and ensure consistency across navbar, buttons, cards, links, backgrounds, borders, and hover states (including dark mode contrast/readability).

If you want, I can proceed to make the actual repo changes now.

User: yes

Assistant: We’re just waiting on your confirmation in the GitHub prompt, and as soon as you accept it I’ll continue with the color-system update.