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

This feature introduces a new icon located in the top right corner of the website that allows users to switch between dark mode and light mode themes.

Why we need the feature

Implementing a dark mode toggle enhances user experience by accommodating individual preferences and reducing eye strain in low-light environments. Many users prefer dark mode for its aesthetic and comfort, and providing this option keeps the website competitive and user-friendly. It aligns with modern web design standards where theme customization is expected.

How to implement and why

Step 1: Create a Theme Context

Set up a React Context to manage the theme state globally across the application.
This ensures that the theme preference is accessible in any component without prop drilling.

Step 2: Develop the Theme Toggle Component

Create a new component, perhaps ThemeToggle.js, within the pages directory or a designated components directory.
This component will contain the icon (e.g., a sun/moon icon) that users can click to switch themes.
Utilize state to handle the toggle action, updating the theme in the Context.

Step 3: Implement Theme Styles

Define CSS variables for both light and dark themes.
In the global CSS or stylesheet, set up the default (light mode) styles.
Create a .dark-mode class that overrides the default CSS variables with dark mode values.
This approach allows for easy maintenance and scalability of theme styles.

Step 4: Apply Theme Class to the Root Element

Use the theme state from the Context to add or remove the .dark-mode class on the root HTML element or a top-level div.
This method ensures that the theme change affects all child elements uniformly.

Step 5: Persist User Preference

Utilize localStorage to save the user's theme preference so it persists across sessions.
On component mount, check for a saved theme in localStorage and apply it accordingly.
This enhances user experience by remembering their choice without additional actions.

Step 6: Update the Layout

Modify the main layout component to include the ThemeToggle icon in the top right corner.
Ensure that the icon is consistently placed across all pages by adding it to a shared header or navigation component within the pages directory.

Step 7: Test Across All Pages and Devices

Verify that the theme toggling works seamlessly on all pages.
Test responsiveness and appearance on different devices and screen sizes to ensure the icon is accessible and the theme styles apply correctly.

Why these steps

Global State Management: Using Context allows for efficient state management without unnecessarily passing props through components.
CSS Variables and Classes: Leveraging CSS variables simplifies theme management and minimizes the need for duplicate styles.
User Experience: Persisting the preference and placing the toggle in an intuitive location enhances usability.
Scalability: This implementation allows for additional themes or further customization in the future with minimal changes.

About backward compatibility

The addition of the dark mode toggle is backward compatible:

No Impact on Existing Features: Existing functionality remains unaffected as all current components will continue to operate with the default theme unless changed by the user.
Progressive Enhancement: Users who do not interact with the toggle will experience the website as before, ensuring continuity.
Optional Feature: The dark mode is an optional enhancement, so it does not force changes upon users unwilling or unprepared to switch themes.

This approach ensures that we improve the website without disrupting the experience for existing users.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-03baa80e-a1c4-447e-a5d4-48a3b1aad71d
git pull origin gitauto-wes/issue-#80-03baa80e-a1c4-447e-a5d4-48a3b1aad71d

hiroshinishio / sample-website