Dark-Light-Toggle-Mode-with-UI-design

This project demonstrates how to implement a Dark Mode and Light Mode toggle feature with a user-friendly UI design.

Features:

Dark Mode and Light Mode:

Users can switch between dark and light color schemes.

User Interface Design:

The toggle button and UI elements adjust their appearance based on the selected mode.

Persistent Mode Selection:

The selected mode preference is stored and applied across sessions (using local storage).

Easy Toggle Functionality:

Clicking the toggle button instantly switches between modes.

How It Works:

Toggle Button:

Clicking the toggle button switches between dark and light modes.

CSS Changes:

jQuery updates CSS classes or directly manipulates CSS properties to change colors, backgrounds, etc., based on the selected mode.

Local Storage:

Stores the current mode preference locally, ensuring the selected mode persists when the page is refreshed.

Usage:

Clone or download the repository. Open index.html in a web browser. Use the toggle button to switch between Dark Mode and Light Mode. Observe the UI elements and overall page design adjust according to the selected mode.

Technologies Used:

• HTML5
• CSS3 (including CSS variables for color themes)
• jQuery

Structure:

index.html:

Contains the HTML structure and the toggle button for mode switching.

style.css:

Defines styles for UI elements, including dark and light mode CSS variables.

script.js:

Implements the jQuery logic to handle toggle button events and apply dark/light mode styles.

Results

License:

This project is licensed under the MIT License - see the LICENSE file for details.