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

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

Introducing a dark mode enhances user experience by providing an alternative theme that can reduce eye strain, especially in low-light environments. Many users prefer dark mode for its aesthetic appeal and comfort. Offering this option can increase user satisfaction, accessibility, and engagement with the website.

How to implement and why

1. Design the Toggle Icon:

   • Create an intuitive icon (e.g., a moon/sun symbol) to represent the theme switch.
   • Ensure the icon aligns with the website's design language for a seamless integration.

2. Position the Icon:

   • Place the icon on the top right corner of the website, where it's easily accessible.
   • Update the navigation or header component to accommodate the new icon without disrupting existing elements.

3. Define Theme Styles:

   • Use CSS variables to define color palettes for both dark and light modes (e.g., background colors, text colors, link colors).
   • Organize the styles in a way that switching themes dynamically updates the necessary CSS variables.

4. Implement Theme Switching Logic:

   • Add a JavaScript function that toggles between dark and light mode by adding or removing a CSS class on the root element.
   • Use an event listener on the toggle icon to trigger the theme switch when clicked.

5. Persist User Preference:

   • Utilize localStorage to save the user's theme preference, ensuring consistency across sessions.
   • On page load, check localStorage for an existing preference and apply the corresponding theme automatically.

6. Update Page Components:

   • Review all components and pages within the pages directory to ensure they reference the new CSS variables.
   • Replace any hardcoded color values with the appropriate CSS variables to enable seamless theme switching.

7. Test Thoroughly:

   • Conduct thorough testing across different browsers and devices to ensure the theme switcher behaves as expected.
   • Verify that all UI elements display correctly in both dark and light modes.

By implementing the feature step by step, we ensure a reliable and user-friendly theme switching experience that enhances the overall usability of the website.

About backward compatibility

The addition of the theme switcher maintains backward compatibility:

• Non-Intrusive Enhancement: The default theme remains the same unless the user chooses to switch, so existing users who prefer the current design are unaffected.
• No Breaking Changes: Existing functionality and navigation are preserved. The feature adds to the website without altering or removing any existing components.
• Progressive Enhancement: Users with older browsers or those who have JavaScript disabled will continue to experience the website in its default mode without issues.

Maintaining backward compatibility ensures that we cater to all users while enhancing the website's functionality.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-b07c3702-d04e-4574-9a80-2e53a86f3252
git pull origin gitauto-wes/issue-#80-b07c3702-d04e-4574-9a80-2e53a86f3252

[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 13, 2024 11:34pm