Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

wants to merge 1 commit into from

Conversation

@gitauto-for-dev
Copy link
Contributor

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

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 a visual option that's easier on the eyes in low-light environments. It caters to user preferences, improves accessibility, and aligns the website with modern UI/UX trends where dark mode has become a standard feature.

How to implement and why

  1. Design the Theme Toggle Icon:

    • Create an icon representing the theme switch (e.g., a sun/moon symbol).
    • Ensure the icon is intuitive and universally understood.

  2. Update the Layout:

    • Modify the website's header component to include the new icon on the top right.
    • Ensure the icon integrates seamlessly without disrupting existing elements.

  3. Implement Theme Switching Logic:

    • Utilize CSS variables to define color schemes for both light and dark modes.
    • Add a click event listener to the icon to toggle the data-theme attribute on the <body> tag.
    • Use JavaScript to handle theme changes dynamically.
    • Store the user's theme preference in localStorage to persist it across sessions.

  4. Refactor Stylesheets:

    • Update existing CSS files to use CSS variables for colors and backgrounds.
    • Define variables for light and dark themes, switching based on the data-theme attribute.
    • Ensure all components and pages adapt their styles according to the active theme.

  5. Accessibility Considerations:

    • Verify that text contrast ratios meet WCAG guidelines in both themes.
    • Provide aria-labels for the toggle icon for screen readers.

  6. Testing:

    • Test the feature across different browsers and devices.
    • Confirm that theme preference persists on page reloads and navigations.
    • Ensure no visual glitches occur when switching themes on various pages.

Implementing the feature step by step ensures a smooth integration while maintaining the existing codebase's integrity.

About backward compatibility

This addition is backward compatible. It doesn't alter existing functionalities but enhances the user interface by providing an optional feature. Users who prefer the default light mode or choose not to interact with the theme toggle will experience the website as before. Existing styles and scripts remain unaffected unless interacting with the new theme variables.

Test these changes locally

git checkout -b gitauto-wes/issue-#80-3350763c-0589-4a36-aa2c-204236bf5aa2
git pull origin gitauto-wes/issue-#80-3350763c-0589-4a36-aa2c-204236bf5aa2

@vercel
Copy link

vercel bot commented Oct 14, 2024 •
edited
Loading

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

@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 30, 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

1 participant