Feature/system aware theme toggle

[Suhaskumard]

Centralized System-Aware Theme Architecture

This PR introduces a centralized and system-aware theming architecture, eliminating duplicated theme definitions across the frontend while adding automatic synchronization with the user's operating system theme preferences.

Closes #185

Type of Change

☑️ Feature
☑️ Frontend
☑️ UI/UX Enhancement
☑️ Refactoring
☑️ Documentation

Changes Made

• Added centralized theme management through a dedicated theme.css file
• Removed duplicated CSS theme variables from multiple stylesheets
• Implemented shared theme variables for all frontend pages
• Added automatic theme detection using prefers-color-scheme
• Added real-time synchronization with OS theme changes
• Added support for dynamic theme switching without page reloads
• Enhanced theme persistence using localStorage
• Added manual theme override functionality
• Updated theme toggle behavior to prioritize user-selected preferences
• Improved maintainability by creating a single source of truth for theme variables
• Ensured consistent appearance across all frontend pages
• Added implementation walkthrough documentation

Files Added

File	Purpose
Frontend/theme.css	Centralized theme variables and shared styling configuration
walkthrough.md	Implementation and testing documentation

Files Modified

File	Purpose
Frontend/theme.js	Added system-aware theme detection, persistence, and OS theme change listeners
Frontend/style.css	Removed duplicated theme variables and migrated to centralized theme system
Frontend/index.html	Added shared theme stylesheet integration
Frontend/Analysis/analysis.css	Removed duplicated theme variables and migrated to centralized theme system
Frontend/Analysis/analysis.html	Added shared theme stylesheet integration

How Has This Been Tested?

• Verified automatic theme detection on first visit
• Verified correct initialization based on OS theme preference
• Verified manual theme toggle functionality
• Verified theme persistence across page reloads
• Verified localStorage override behavior
• Verified dynamic theme updates when OS theme changes while the application is open
• Verified consistent theme rendering across all frontend pages
• Verified icon updates between light and dark modes
• Verified no visual regressions after CSS centralization
• Verified successful local browser testing using a live server

Test Results

• ✅ Light theme initialized correctly on page load
• ✅ Dark theme toggle applied instantly
• ✅ Theme persisted after browser refresh
• ✅ Toggle successfully reverted theme state
• ✅ Dynamic system theme synchronization working as expected
• ✅ Cross-page theme consistency verified

Checklist

☑️ My code follows the existing code style of the project
☑️ I have performed a self-review of my own code
☑️ I have tested the functionality manually
☑️ My changes do not introduce any new warnings or errors
☑️ I have updated documentation where necessary
☑️ I have linked the related issue

[Suhaskumard]

Hi @thetechguardians,

I have solved the issue and attached a demo video showcasing the implementation. My system is currently using Light Mode, so the application initially loads in the light theme. The video demonstrates the theme behavior and verifies that the changes are working as expected.

If there are any changes or improvements required, kindly let me know.

V1.1.1.mp4