🏷 Title:
Add Dark/light Mode Support to Schemes Page
📖 Description:
The Schemes page currently does not support dark/light mode styling, which creates inconsistency with the rest of the application when dark theme is enabled.
To maintain UI consistency and improve user experience, dark /lightmode support should be implemented across all components of the Schemes page.
🎯 Objective:
Implement full dark mode compatibility for the Schemes page to align with the global theme system used in the application.
🚨 Current Issues:
Background remains light in dark theme.
Text colors are not adjusted for dark/light mode.
Cards and containers lack dark styling.
Buttons do not follow dark theme color scheme.
Hover and active states are not optimized for dark mode.
Charts (if present) do not adapt to dark background.
✅ Expected Behavior:
Background switches properly when dark mode is enabled.
Text remains readable with proper contrast.
Cards, modals, and containers use dark theme variables.
Buttons adapt to theme colors.
Charts adjust gridlines, labels, and background.
No layout breaking or style conflicts.
🛠 Implementation Suggestions:
Use existing global dark mode class (e.g., body.dark or theme provider).
Replace hardcoded colors with CSS variables.
Ensure components inherit theme styles.
Add smooth transition for theme change.
Test responsiveness in both light and dark modes.
🧪 Testing Checklist:
Desktop view
Tablet view
Mobile view
Buttons & hover states
Charts (if applicable)
Forms and inputs
🏷 Title:
Add Dark/light Mode Support to Schemes Page
📖 Description:
The Schemes page currently does not support dark/light mode styling, which creates inconsistency with the rest of the application when dark theme is enabled.
To maintain UI consistency and improve user experience, dark /lightmode support should be implemented across all components of the Schemes page.
🎯 Objective:
Implement full dark mode compatibility for the Schemes page to align with the global theme system used in the application.
🚨 Current Issues:
Background remains light in dark theme.
Text colors are not adjusted for dark/light mode.
Cards and containers lack dark styling.
Buttons do not follow dark theme color scheme.
Hover and active states are not optimized for dark mode.
Charts (if present) do not adapt to dark background.
✅ Expected Behavior:
Background switches properly when dark mode is enabled.
Text remains readable with proper contrast.
Cards, modals, and containers use dark theme variables.
Buttons adapt to theme colors.
Charts adjust gridlines, labels, and background.
No layout breaking or style conflicts.
🛠 Implementation Suggestions:
Use existing global dark mode class (e.g., body.dark or theme provider).
Replace hardcoded colors with CSS variables.
Ensure components inherit theme styles.
Add smooth transition for theme change.
Test responsiveness in both light and dark modes.
🧪 Testing Checklist:
Desktop view
Tablet view
Mobile view
Buttons & hover states
Charts (if applicable)
Forms and inputs