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 pull request introduces a new icon located in the top right corner of the website that allows users to switch between dark mode and light mode. When clicked, the icon toggles the website's theme, providing an option for users to choose their preferred viewing mode.

Why we need the feature

Implementing a dark mode enhances user experience by providing a comfortable viewing option, especially in low-light conditions. It reduces eye strain and caters to user preferences, which can increase engagement and satisfaction. Additionally, offering theme customization aligns with modern web standards and expectations.

How to implement and why

Step 1: Design the Toggle Icon

• Create a theme switch icon (e.g., a moon and sun icon) that clearly indicates the functionality.
• Ensure the icon is intuitive and accessible.

Step 2: Implement Theme State Management

• Utilize a state management solution (such as React's Context API or useState hook) to track the current theme.
• Store the user's theme preference in local storage to persist the setting across sessions.

Step 3: Update Global Styles

• Define CSS variables for colors and styles that change between themes.
• Create a global stylesheet (e.g., styles/globals.css) that applies these variables based on the theme state.

Step 4: Integrate the Icon into the Navigation Bar

• Locate the navigation component within the pages directory or a components folder.
• Add the theme toggle icon to the top right section of the navigation bar.
• Attach an onClick event to the icon that switches the theme state and updates the styles accordingly.

Step 5: Ensure Theme Applies to All Pages

• Wrap the application with a ThemeProvider if using Context API to pass the theme state to all components.
• Verify that the theme switch affects all pages uniformly without glitches.

Reasons for This Implementation:

• User-Centric Approach: Enhances usability by providing a feature that users expect in modern websites.
• Maintainability: Using global styles and state management makes the theme easier to maintain and update.
• Performance: Storing preferences in local storage and applying styles via CSS variables ensures quick theme switching without reloading pages.

About backward compatibility

The addition of the theme switcher is backward compatible:

• Default Behavior: Users who do not interact with the toggle will experience the website in its default (light) theme, ensuring their experience remains unchanged.
• No Breaking Changes: Existing components and pages will continue to function as before since styles are extended to support theming without altering base functionality.
• Progressive Enhancement: The feature adds value without impacting users on older browsers that may not support CSS variables; they will continue to see the default theme.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-7ce1ccaf-6c25-41ad-b420-1b7ab2549568
git pull origin gitauto-wes/issue-#80-7ce1ccaf-6c25-41ad-b420-1b7ab2549568

[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:47am