Added light mode feature with toggle button and localStorage support. #8
Conversation
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.
Light Mode Feature: Implemented a light mode feature in the project, providing users with the ability to toggle between light and dark modes.
Toggle Button: Added a toggle button (mode-toggle-btn) for seamless switching between light and dark modes. The button ensures a user-friendly experience.
LocalStorage Integration: Utilized localStorage functionality to remember the user's last activated mode, enhancing user convenience across sessions.
CSS Modifications (style.css):
Introduced a new CSS class, .light-mode, to facilitate styling for the light mode.
Duplicated and modified variables present in ::root to accommodate the unique styling requirements of the light mode.
Added new variables in both :root and .light-mode, resolving conflicts and ensuring a harmonious visual experience.
HTML Enhancements (index.html):
Included all SVGs directly within the HTML file, enabling dynamic color changes based on the selected mode.
Added a
JavaScript Functionality (script.js):
Implemented functionality for the mode-toggle-btn, ensuring a smooth transition between light and dark modes.
Integrated localStorage utility to store and retrieve the user's mode preference for a personalized experience.
Image Assets (images directory):
Added two icons, moon.svg and sun.svg, to the images directory for use in the toggle button.
Responsiveness:
Ensured the code is responsive, providing a consistent user experience across various screen sizes.