GitAuto: Add a new icon on the top right to switch this entire website between dark mode and light mode#84
Open
gitauto-for-dev[bot] wants to merge 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 giving users the option to choose a theme that is comfortable for them, especially in low-light environments. It can reduce eye strain and make the website more accessible to a wider audience. Offering theme customization can also increase user engagement and satisfaction.
How to implement and why
Design the Theme Toggle Icon:
Update the Website Layout:
pages/_app.jsor similar) to include the new icon in the top right corner.Implement Theme State Management:
useStatehook to manage the current theme state (lightordark).Create Theme Stylesheets:
themes/light.cssandthemes/dark.css) that modify these variables.Apply Themes Dynamically:
<html>or<body>) to scope the styles appropriately.Persist User Preference:
localStorageto save the user's theme choice so it persists across sessions.localStoragefor an existing theme preference and apply it.Accessibility Considerations:
Update Documentation:
README.mdfor future developers.Testing:
About backward compatibility
This feature is backward compatible. By default, the website will continue to display in light mode unless a user actively switches to dark mode. Existing functionality and layout are not affected. Users who do not interact with the theme toggle will experience the website as before. Additionally, storing preferences in
localStorageensures no impact on server-side logic or data structures.Test these changes locally