fixed dark light toggle on schemes page

[Eshajha19]

Fix Dark/Light Mode Toggle Issue on Government Schemes Page

📌 Description

This PR fixes the dark/light mode toggle issue on the Government Schemes page where global CSS styles were overriding theme-specific styles, preventing proper light mode conversion.

##🐛 Problem

Global styles from expensetracker.css were applying fixed background and text colors.

These styles overrode .dark-mode styles.

As a result:

Light mode was not restoring correctly.

Some elements stayed dark.

Card backgrounds and navbar colors were inconsistent.

🚀 Solution Implemented
1️⃣ Introduced CSS Variable-Based Theme System

Added root-level CSS variables to manage colors dynamically:

:root {
--bg-main: #ffffff;
--bg-card: #ffffff;
--text-main: #111827;
}

body.dark-mode {
--bg-main: #0f172a;
--bg-card: #1e293b;
--text-main: #f1f5f9;
}
2️⃣ Replaced Hardcoded Colors

Overrode global styles using variables with controlled !important where required.

body {
background: var(--bg-main) !important;
color: var(--text-main) !important;
}
3️⃣ Persistent Toggle Functionality

Ensured:

Theme preference is stored in localStorage

Icon switches correctly (moon/sun)

Smooth transition between themes

🎯 Result

Dark mode works correctly

Light mode restores fully

No conflicts with global CSS

Smooth UI transitions

Fully scalable theme system

🧪 Testing

Verified toggle multiple times

Checked page reload persistence

Tested hover states in both themes

Confirmed navbar, cards, and footer update properly

This PR #724 closes issue #722

[vercel]

@Eshajha19 is attempting to deploy a commit to the Renu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @Eshajha19!

We really appreciate you taking the time to contribute to ExpenseFlow! 💙

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/Renu-code123/ExpenseFlow

---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🙌 Thank You for Contributing!

We truly appreciate your interest in contributing to this project.

• Please make sure your code follows the project structure
• Add clear commit messages and comments where necessary
• Ensure your changes do not break existing functionality

We'll review your PR as soon as possible. Keep up the great work! ✨

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
expenseflow	Ready	Preview, Comment	Feb 21, 2026 2:08pm