Skip to content

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

Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom
gitauto-wes/issue-#80-66b3ab2a-cc06-4a36-a2f0-e3cd93568f38
Open

GitAuto: Add a new icon on the top right to switch this entire website between dark mode and light mode#88
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom
gitauto-wes/issue-#80-66b3ab2a-cc06-4a36-a2f0-e3cd93568f38

Conversation

@gitauto-for-dev

@gitauto-for-dev gitauto-for-dev Bot commented Oct 14, 2024

Copy link
Copy Markdown
Contributor

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's easier on the eyes, especially in low-light environments. It accommodates user preferences, improves accessibility, and aligns with modern web design trends. This feature can increase user engagement and satisfaction by offering a personalized viewing experience.

How to implement and why

Step 1: Design Dark Mode Styles

  • Create a set of CSS variables or a separate stylesheet for dark mode.
  • Define color schemes for backgrounds, text, buttons, and other UI elements.
  • Ensure sufficient contrast for readability and accessibility.

Step 2: Add the Toggle Icon

  • Place a toggle icon (e.g., a moon/sun icon) at the top right corner of the website.
  • Use an accessible <button> element with appropriate aria-labels for screen readers.
  • The icon should be intuitive and easily recognizable by users.

Step 3: Implement Theme Switching Logic

  • Use JavaScript to add or remove a CSS class (e.g., dark-mode) on the root element (<html> or <body>).
  • Attach an event listener to the toggle button to switch themes on click.
  • Store the user's theme preference in localStorage to persist across sessions: 
    // Example code
const toggleSwitch = document.querySelector('.theme-switch');
const currentTheme = localStorage.getItem('theme');

if (currentTheme === 'dark') {
  document.body.classList.add('dark-mode');
}

toggleSwitch.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  let theme = 'light';
  if (document.body.classList.contains('dark-mode')) {
    theme = 'dark';
  }
  localStorage.setItem('theme', theme);
});

Step 4: Update Existing Pages

  • Modify pages within the pages directory to ensure that all elements respond to the theme switch.
  • Replace hard-coded color values with CSS variables or classes that adjust based on the theme.
  • Test each page to verify that layouts and components render correctly in both modes.

Step 5: Optimize for Performance and Accessibility

  • Minimize the performance impact by deferring theme detection and application until after the initial page load.
  • Ensure that the theme switching is smooth and without noticeable delays.
  • Verify that the implementation meets accessibility standards (e.g., WCAG guidelines).

Step 6: Testing

  • Test the feature across different browsers and devices to ensure compatibility.
  • Include unit tests for the theme-switching logic if applicable.

About backward compatibility

This feature is fully backward compatible. It does not affect existing functionalities or alter the default light mode. Users who do not interact with the theme toggle will continue to experience the website as before. By adding the feature as an enhancement rather than a replacement, we ensure that the website remains functional for all users regardless of their interaction with the new theme switch.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-66b3ab2a-cc06-4a36-a2f0-e3cd93568f38
git pull origin gitauto-wes/issue-#80-66b3ab2a-cc06-4a36-a2f0-e3cd93568f38

@vercel

vercel Bot commented Oct 14, 2024 •
edited
Loading

Copy link
Copy Markdown

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:36am

@gitauto-for-dev gitauto-for-dev Bot mentioned this pull request Oct 14, 2024
Open
@gitauto-ai gitauto-ai Bot added the gitauto label Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gitauto

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

0 participants