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

[gitauto-ai]

Resolves #80

What is the feature

Add a new icon on the top right corner of the website that allows users to switch between dark mode and light mode.

Why we need the feature

Providing a dark mode enhances user experience by reducing eye strain in low-light conditions and catering to user preferences. It also aligns the website with modern design trends, as many users expect sites to offer both light and dark themes.

How to implement and why

1. Design the Toggle Icon: Create a theme switcher icon (e.g., a sun/moon or brightness icon) and place it in the top right corner for easy accessibility.

2. Implement Theme Switching Logic:

   • Use CSS variables to define base colors.
   • Add a JavaScript function that toggles a dark-mode class on the body element.
   • Store the user's theme preference in localStorage to persist between sessions.

3. Update CSS Styles:

   • Define CSS variables for colors (background, text, links) in :root.
   • Create a .dark-mode class that overrides these variables with dark theme values.
   • Ensure that all components and elements use these variables for styling.

4. Modify Existing Pages:

   • Since the website structure includes a pages directory, update all pages to include the theme toggle script and ensure they reference the CSS variables.

5. Test Thoroughly:

   • Verify that the theme switch works on all pages.
   • Check for any visual issues in both themes.
   • Ensure that third-party components or libraries are compatible with theme switching.

6. Fallback Support:

   • Provide a default theme for browsers that do not support localStorage or CSS variables.

By following these steps, we create a maintainable and scalable solution that improves user satisfaction.

About backward compatibility

The feature is backward-compatible as it introduces an optional enhancement without altering existing functionalities. Users who prefer the current light theme will experience no changes unless they choose to switch themes. Additionally, by using progressive enhancement techniques, older browsers will continue to display the site correctly without the dark mode feature.

Test these changes locally

git checkout -b gitauto/issue-#80-9e588dcc-2c3c-4a1c-9f07-0b5ca651396a
git pull origin gitauto/issue-#80-9e588dcc-2c3c-4a1c-9f07-0b5ca651396a

[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 22, 2024 0:03am