Added dark mode button and dark mode theme to all necessary elements #62
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description:
This pull request introduces full support for a Dark Mode theme, along with several UI improvements for better user experience and consistency. Below is a summary of the changes:
Key Features:
Dark Mode Toggle:
Added a Dark Mode toggle button in the header for users to switch between Light and Dark modes seamlessly.
Dark Mode Styling:
Updated the styling of all major components to support Dark Mode:
Headers and Titles: Now adapt to Dark Mode with white text for better visibility.
Countdown Timer: Adjusted text color to ensure clear visibility in both Light and Dark modes.
Drop-down Menus: Fixed colors for both options and hovered items to match the active mode.
QNA Tables: Styled tables with appropriate background, text, and hover effects for Dark Mode.
Improved Consistency:
Ensured consistent colors for all UI elements, including buttons, borders, and hover states.
Performance:
Implemented smooth transitions for color changes between modes, ensuring a polished user experience.
Technical Details:
![DarkModeHomePage](https://private-user-images.githubusercontent.com/148278662/403125670-03ab6348-20f9-44df-b693-dc67d7084e66.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxMTE1MDQsIm5iZiI6MTczOTExMTIwNCwicGF0aCI6Ii8xNDgyNzg2NjIvNDAzMTI1NjcwLTAzYWI2MzQ4LTIwZjktNDRkZi1iNjkzLWRjNjdkNzA4NGU2Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOVQxNDI2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yYWFkY2Q3ODFiOTIxZmQ2MmMzMThiZWFhNzA2NWY0Yjc5ZjE2Yzk1MjQ5NjYxMmY3MjcxNGI3YTMwMDU1NmQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.bt1zk11mJHPdMm8QGKEK2m9xX8fW-PTpRYaXxEPULpk)
![DarkModeQNA](https://private-user-images.githubusercontent.com/148278662/403125674-c9864e35-0c30-4fa5-9565-5b66e60569a2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxMTE1MDQsIm5iZiI6MTczOTExMTIwNCwicGF0aCI6Ii8xNDgyNzg2NjIvNDAzMTI1Njc0LWM5ODY0ZTM1LTBjMzAtNGZhNS05NTY1LTViNjZlNjA1NjlhMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOVQxNDI2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNzA3MDllOTZjM2ExOGUxMzc1YjY4MmM4ODdkYTFhOWU2ZjMwY2E2MzUwNzIwYzBhMDkwNjg5MzcyNzE3YzMyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.mDEoqws29jPmzqJwOhVjT2snmPm1oixRY1vHE8Cf4cU)
![DarkModeQuestions](https://private-user-images.githubusercontent.com/148278662/403125681-32d2621c-43de-4a11-a708-31386682273e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxMTE1MDQsIm5iZiI6MTczOTExMTIwNCwicGF0aCI6Ii8xNDgyNzg2NjIvNDAzMTI1NjgxLTMyZDI2MjFjLTQzZGUtNGExMS1hNzA4LTMxMzg2NjgyMjczZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOVQxNDI2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZDE0OGU5Yzg3YjJhNjY2NjY3MmJkNjkwNzlmNGYxOWVhNzVjYTA5MThhMTk2MTM2M2FlMjA2YjYxMGQ0ODYyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.dJ2S6cS_hBVyUqkvwvQGFKJs54iRqOmtDBn8wpl80_E)
![DarkModeResults](https://private-user-images.githubusercontent.com/148278662/403125684-c02e69cd-f439-4315-ac5f-4077857f8bd8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxMTE1MDQsIm5iZiI6MTczOTExMTIwNCwicGF0aCI6Ii8xNDgyNzg2NjIvNDAzMTI1Njg0LWMwMmU2OWNkLWY0MzktNDMxNS1hYzVmLTQwNzc4NTdmOGJkOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOVQxNDI2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lMGE4MGM2YWE0N2RmYTY1NDg3NWExNTI2NTIwOTk2NDk4ZmFhNTFiOWIzN2RjZGMyZmM2MWJjMTJhNjgyYTkxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.GpH5HY6AQ6M9tF5fWEdMYeN19X-GU0JBdgVaiTovm20)
Modified the following components to enable Dark Mode:
App/index.js
Countdown/index.js
Header/index.js
Main/index.js
QNA.js
index.css
Utilized CSS transitions for smooth color changes and ensured compatibility with the Semantic UI framework.
Testing:
Manually tested in both Light and Dark modes to ensure:
Proper color contrast and readability.
Functional toggle behavior without breaking other features.
Consistent appearance across all major components.