GitAuto: Add a new icon on the top right to switch this entire website between dark mode and light mode

Resolves #80

What is the feature

Add a new icon on the top right of the website that allows users to switch between dark mode and light mode.

Why we need the feature

Implementing a dark mode enhances user experience by providing an option that is easier on the eyes in low-light conditions. It caters to user preferences, as many users now expect websites to offer theme customization. This feature can increase user engagement and satisfaction by making the website more accessible and comfortable to use at any time of day.

How to implement and why

Step 1: Design the Theme Toggle Icon

Why: An intuitive icon (like a moon/sun) makes it easy for users to understand its function.
Place the icon on the top right corner of the website for visibility and easy access.

Step 2: Implement State Management for Themes

Why: To switch themes dynamically, we need to track the current theme.
Use React's useState hook or a global state management library like Redux to manage the theme state.

Step 3: Create Theme Styles

Why: Separate styling is needed for dark and light modes.
Define CSS variables or use CSS classes for both themes.
Store theme styles in a global stylesheet or use CSS-in-JS solutions for component-scoped styling.

Step 4: Toggle Theme on Icon Click

Why: To allow users to switch themes interactively.
Add an onClick event handler to the icon that toggles the theme state between 'light' and 'dark'.

Step 5: Apply Themes to the Application

Why: To reflect the theme change across the entire website.
Apply the theme class to the root element (e.g., <body> or a top-level <div>).
Ensure all components reference theme variables or classes for styling.

Step 6: Persist User Preference

Why: To remember the user's choice across sessions.
Use localStorage to save the selected theme.
On app load, check localStorage and set the theme accordingly.

Step 7: Test Across All Pages

Why: To ensure consistency and catch any styling issues.
Navigate through all pages in both themes to verify that styles are applied correctly.
Fix any elements that do not conform to the theme styles.

Step 8: Accessibility Considerations

Why: To make the feature usable for all users.
Ensure sufficient color contrast in dark mode.
Add aria-label attributes to the toggle icon for screen readers.

Step 9: Update Documentation

Why: To inform other developers about the new feature.
Document the theme implementation in the README or a dedicated section.
Include instructions on how to use and maintain theme styles.

About backward compatibility

This feature is backward compatible because it doesn't interfere with existing functionalities. The default theme will remain as light mode, ensuring that users who do not interact with the theme switch will experience the website as before. All new theme-related code will be additive and will not break or alter existing components or pages.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-c33664f5-945a-4756-a91f-768aaadb4cbb
git pull origin gitauto-wes/issue-#80-c33664f5-945a-4756-a91f-768aaadb4cbb

hiroshinishio / sample-website