replace hardcoded colors with centralized theme-aware styling

[harshitha0539]

Closes #2035

📌 Summary
This Pull Request refactors reusable UI components by replacing hardcoded color values with centralized theme variables. The primary objective is to ensure consistent Light and Dark Mode support throughout the application while improving maintainability, accessibility, and scalability of the styling system.

Previously, several shared components relied on fixed hexadecimal color values, which prevented them from adapting correctly when the application's theme changed. This update removes those static color definitions and integrates the existing theme system so that components automatically respond to theme changes without affecting their functionality or layout.

✨ Changes Implemented
Removed hardcoded hexadecimal color values from reusable UI components.
Replaced static color definitions with centralized theme color variables.
Updated background, text, border, and other UI colors to use theme-aware styling.
Refactored affected components to dynamically adapt to Light and Dark Mode.
Improved text readability by ensuring proper foreground and background contrast.
Preserved the existing UI design and component behavior.
Improved code readability and maintainability by eliminating inline color values wherever applicable.
🔧 Implementation Details
During this implementation, the following improvements were made:

Replaced hardcoded color values such as:

#FFFFFF
#000000
#F5F5F5
#EFEFEF
#333333
#666666
#CCCCCC
Updated components to use centralized theme color tokens, including:

colors.background
colors.surface
colors.text
colors.border
colors.primary
colors.secondary
colors.error
Refactored styles to derive colors from the application's theme instead of static values.

Ensured components automatically update whenever the active application theme changes.

Reviewed reusable UI components for consistent styling and better maintainability.

📂 Components Updated
The following reusable UI elements were reviewed and updated where applicable:

Badge Components
Shared UI Components
Common Cards
List Items
Status Chips
Empty State Components
Reusable Buttons (where required)
Other shared widgets using hardcoded colors
✅ Benefits
Full compatibility with both Light and Dark themes.
Consistent visual appearance across reusable components.
Improved accessibility through better color contrast.
Cleaner, more maintainable, and scalable styling.
Simplified future theme customization.
Reduced reliance on hardcoded styling values.
Better overall user experience.
🧪 Testing
The following checks were performed after implementing the changes:

✅ Verified all updated components in Light Mode.
✅ Verified all updated components in Dark Mode.
✅ Confirmed that theme switching updates colors correctly.
✅ Ensured no UI regressions or layout changes.
✅ Verified that component functionality remains unchanged.
✅ Checked text readability and contrast across supported themes.
📋 Checklist
Replaced hardcoded color values with centralized theme variables.
Maintained existing UI and functionality.
Verified Light and Dark Mode compatibility.
Improved accessibility and visual consistency.
Tested updated components before submitting.Closes #2035

📌 Summary
This Pull Request refactors reusable UI components by replacing hardcoded color values with centralized theme variables. The primary objective is to ensure consistent Light and Dark Mode support throughout the application while improving maintainability, accessibility, and scalability of the styling system.

Previously, several shared components relied on fixed hexadecimal color values, which prevented them from adapting correctly when the application's theme changed. This update removes those static color definitions and integrates the existing theme system so that components automatically respond to theme changes without affecting their functionality or layout.

✨ Changes Implemented
Removed hardcoded hexadecimal color values from reusable UI components.
Replaced static color definitions with centralized theme color variables.
Updated background, text, border, and other UI colors to use theme-aware styling.
Refactored affected components to dynamically adapt to Light and Dark Mode.
Improved text readability by ensuring proper foreground and background contrast.
Preserved the existing UI design and component behavior.
Improved code readability and maintainability by eliminating inline color values wherever applicable.
🔧 Implementation Details
During this implementation, the following improvements were made:

Replaced hardcoded color values such as:

#FFFFFF
#000000
#F5F5F5
#EFEFEF
#333333
#666666
#CCCCCC
Updated components to use centralized theme color tokens, including:

colors.background
colors.surface
colors.text
colors.border
colors.primary
colors.secondary
colors.error
Refactored styles to derive colors from the application's theme instead of static values.

Ensured components automatically update whenever the active application theme changes.

Reviewed reusable UI components for consistent styling and better maintainability.

📂 Components Updated
The following reusable UI elements were reviewed and updated where applicable:

Badge Components
Shared UI Components
Common Cards
List Items
Status Chips
Empty State Components
Reusable Buttons (where required)
Other shared widgets using hardcoded colors
✅ Benefits
Full compatibility with both Light and Dark themes.
Consistent visual appearance across reusable components.
Improved accessibility through better color contrast.
Cleaner, more maintainable, and scalable styling.
Simplified future theme customization.
Reduced reliance on hardcoded styling values.
Better overall user experience.
🧪 Testing
The following checks were performed after implementing the changes:

✅ Verified all updated components in Light Mode.
✅ Verified all updated components in Dark Mode.
✅ Confirmed that theme switching updates colors correctly.
✅ Ensured no UI regressions or layout changes.
✅ Verified that component functionality remains unchanged.
✅ Checked text readability and contrast across supported themes.
📋 Checklist
Replaced hardcoded color values with centralized theme variables.
Maintained existing UI and functionality.
Verified Light and Dark Mode compatibility.
Improved accessibility and visual consistency.
Tested updated components before submitting.

[github-actions]

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

[harshitha0539]

hi @SB2318 i solved the issues plz approve and merge this pr

[github-actions]

Automated Review Feedback

Provide actionable comments grouped by severity:

Important

• Incorrect Theme Token Usage for General Text: The GlobalStyles.text and GlobalStyles.normalText styles in frontend/src/styles/GlobalStyle.ts have been updated to use ON_PRIMARY_COLOR. The PR description explicitly states that colors.text is a centralized theme token to be used for text. ON_PRIMARY_COLOR is typically reserved for text that appears on a primary-colored background (e.g., a button). Using it for general text styles might lead to incorrect color rendering or contrast issues when these styles are applied to text on non-primary backgrounds (like the main app background), especially in dark mode. Please ensure GlobalStyles.text and GlobalStyles.normalText use the appropriate general text color token, likely colors.text, to maintain consistency and accessibility across all themes and backgrounds as per the PR's stated goals.

Suggestions

• Unused Import: In frontend/src/components/NoInternetLayout.tsx, the BUTTON_COLOR import is present but not used. Consider removing unused imports to keep the codebase clean.
• TODO.md Status: The TODO.md file was added with items related to this PR ([Bug/UI] Replace Hardcoded Colors with Theme-Aware Styling for Consistent Dark Mode Support. #2035). Since this PR aims to implement these changes, consider updating the TODO.md to reflect the completed status of these items or removing them if the issue is fully resolved by this PR.

Maintainer Note:

Once the initial automated feedback has been addressed, maintainer @SB2318 will review the pull request for final evaluation.

[harshitha0539]

Hii @SB2318 plz check the pr and merge it

[harshitha0539]

Hii @SB2318 plz check the pr and merge it

[harshitha0539]

Hii @SB2318 plz check the pr and merge it