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

[gitauto-for-dev]

Resolves #80

What is the feature

This feature introduces a new icon located at the top right corner of the website, allowing users to switch between dark mode and light mode themes for the entire site.

Why we need the feature

Providing a dark mode option enhances user experience by accommodating individual preferences and improving readability in low-light environments. It can reduce eye strain, save battery life on devices with OLED screens, and align the website with modern design standards where dark mode is a common expectation.

How to implement and why

1. Design the Toggle Icon: Create an intuitive icon (e.g., a sun/moon or light bulb symbol) that clearly indicates its function to switch themes.

2. Add Icon to Navigation: Insert the icon into the website's header or navigation component, ensuring it's consistently displayed across all pages. This can be done in a shared layout component within the pages directory.

3. Implement Theme State Management:

   • Use React's useState hook or context API to manage the theme state across the application.
   • Initialize the theme state based on the user's system preference by accessing the prefers-color-scheme media query.

4. Persist Theme Preference:

   • Store the user's theme choice in localStorage to remember their preference on subsequent visits.
   • On component mount, check for a stored preference and apply it.

5. Apply Theming to Stylesheets:

   • Utilize CSS variables for defining color schemes.
   • Create two sets of variables for light and dark modes.
   • Update the global styles in styles/global.css or equivalent to reference these variables.
   • Ensure that all components use these variables for styling to enable dynamic theme switching.

6. Update Existing Components:

   • Audit existing components to replace hard-coded color values with CSS variables.
   • This ensures all elements respond correctly to theme changes.

7. Ensure Responsive and Accessible Design:

   • Test the theme switch across different devices and screen sizes.
   • Verify that color contrasts meet accessibility guidelines in both themes.

8. Testing:

   • Perform thorough testing to ensure the theme toggle does not introduce bugs.
   • Test in multiple browsers and consider edge cases, such as users with JavaScript disabled.

9. Documentation and Updates:

   • Update README.md with information about the new feature.
   • Provide instructions for developers on how to work with theming in the project.

By implementing the feature step by step, we ensure a seamless integration that enhances the user interface without disrupting existing functionality.

About backward compatibility

The addition is backward compatible. Users who do not interact with the theme toggle will continue to experience the website in its default light mode. Since we're adding new functionality without altering existing features, there should be no negative impact on current users or site behavior.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-d5acd91c-319f-40a7-ae1b-101aea6ab1f5
git pull origin gitauto-wes/issue-#80-d5acd91c-319f-40a7-ae1b-101aea6ab1f5

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sample-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 1:05am