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 that allows users to switch between dark mode and light mode themes seamlessly.

Why we need the feature

Offering a dark mode option enhances user experience by catering to individual preferences and accessibility needs. Dark mode can reduce eye strain in low-light conditions and is preferred by many users for its modern aesthetic. Including this feature aligns the website with current UI/UX standards and increases user satisfaction by providing more control over their viewing experience.

How to implement and why

Implementation steps:

1. Design the Toggle Icon:

   • Create an intuitive icon (e.g., a moon/sun or lightbulb symbol) representing the theme switch.
   • Ensure the icon is visually appealing and easily recognizable.

2. Add the Icon to the Layout:

   • Place the icon in the common layout component that is used across all pages (e.g., in pages/_app.js or a components/Layout.js file).
   • Position the icon at the top right corner using appropriate CSS styling for consistency across the site.

3. Implement Theme Styles:

   • Define two sets of CSS variables or theme objects for dark mode and light mode.
   • Use these variables to style global elements, ensuring that colors, backgrounds, and other stylistic properties switch appropriately between themes.

4. Manage Theme State:

   • Utilize a state management solution (e.g., React's useState hook or Context API) to keep track of the current theme.
   • Initialize the theme based on user preference if previously set or default to light mode.

5. Persist User Preference:

   • Store the user's theme choice in localStorage to maintain their preference across sessions.
   • On component mount, retrieve the stored preference and apply it to the application state.

6. Handle Theme Switching:

   • Attach a click event handler to the toggle icon that switches the theme state between dark and light modes.
   • Ensure that the UI updates immediately upon toggling to reflect the new theme.

7. Ensure Smooth Transitions:

   • Add CSS transitions to enhance the aesthetic of theme switching.
   • Test transitions to make sure they are smooth and do not hinder performance.

8. Accessibility Considerations:

   • Provide alternative text or aria-labels for the toggle icon to support screen readers.
   • Ensure sufficient color contrast in both themes to meet accessibility standards.

9. Testing:

   • Test the implementation across different browsers and devices to ensure compatibility.
   • Verify that the theme persists correctly and that the toggle functions without issues.

By following these steps, we ensure a robust implementation that enhances user experience without introducing significant overhead or complexity to the existing codebase.

About backward compatibility

This addition is backward compatible. It does not interfere with existing functionalities or user workflows. Users who prefer the default (light mode) experience are unaffected unless they choose to interact with the new toggle. Existing styles remain intact, and the theme switcher only modifies styling when activated. Since it builds upon the current structure without altering fundamental components, it maintains stability across the website.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-3a6a35b5-e2ad-4a26-8b31-1f90fb09206a
git pull origin gitauto-wes/issue-#80-3a6a35b5-e2ad-4a26-8b31-1f90fb09206a

[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 0:14am