Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added dark mode button and dark mode theme to all necessary elements #62

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Polyzosk
Copy link

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:
Modified the following components to enable Dark Mode:
App/index.js
Countdown/index.js
Header/index.js
Main/index.js
QNA.js
index.css
DarkModeHomePage
DarkModeQNA
DarkModeQuestions
DarkModeResults

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant