https://github.com/alizayayesha/dark-light-toggle-mode-with-ui-design

https://github.com/alizayayesha/dark-light-toggle-mode-with-ui-design

html-css-javascript jquery jquery-ajax jquery-ui ui-design

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/alizayayesha/dark-light-toggle-mode-with-ui-design
• Owner: AlizayAyesha
• License: mit
• Created: 2024-07-09T08:19:35.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-09T08:39:58.000Z (6 months ago)
• Last Synced: 2024-07-09T10:49:01.291Z (6 months ago)
• Topics: html-css-javascript, jquery, jquery-ajax, jquery-ui, ui-design
• Language: HTML
• Homepage: https://alizayayesha.github.io/Dark-Light-Toggle-Mode-with-UI-design/
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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 

![image](https://github.com/AlizayAyesha/Dark-Light-Toggle-Mode-with-UI-design/assets/68489612/67dc7827-0cfd-4d8b-ae8c-5f97be880332)

## License:

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