Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/md-emon-hasan/dark-mode-with-toggle-button
🌙 Dark and light mode toggle feature with smooth transitions and persistent theme preferences using localStorage. Adapting to different lighting condition
https://github.com/md-emon-hasan/dark-mode-with-toggle-button
dark-mode dark-theme light-theme theme-switcher theme-ui toggle-buttons toggle-switches
Last synced: about 14 hours ago
JSON representation
🌙 Dark and light mode toggle feature with smooth transitions and persistent theme preferences using localStorage. Adapting to different lighting condition
- Host: GitHub
- URL: https://github.com/md-emon-hasan/dark-mode-with-toggle-button
- Owner: Md-Emon-Hasan
- License: mit
- Created: 2025-01-15T15:45:11.000Z (26 days ago)
- Default Branch: master
- Last Pushed: 2025-01-15T15:52:26.000Z (26 days ago)
- Last Synced: 2025-01-15T18:19:54.648Z (26 days ago)
- Topics: dark-mode, dark-theme, light-theme, theme-switcher, theme-ui, toggle-buttons, toggle-switches
- Language: CSS
- Homepage: https://md-emon-hasan.github.io/Dark-Mode-with-Toggle-Button/
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dark & Light Mode
This is a simple web project that demonstrates a dark and light mode theme toggle functionality. The project is built with HTML, CSS, and JavaScript. It allows users to toggle between a light and dark theme, which is saved in their browser preferences.
## Features
- Light and Dark mode toggle.
- Persistent theme preferences using `localStorage`.
- Smooth transitions for a better user experience.
- Responsive design for different screen sizes (Desktop, Tablet, Mobile).
## Project Structure
The project is divided into three main files:
- `index.html`: The main HTML structure of the page.
- `styles.css`: The stylesheet that includes the styling for light and dark modes.
- `script.js`: The JavaScript file responsible for the theme toggle functionality and saving preferences.
## Installation
1. **Clone or download the repository:**
You can either clone this repository or download the files directly.
```bash
git clone
```
2. **File Structure:**
After cloning or downloading, the project will have the following structure:
```
/Techy-Dark-Light-Mode
├── index.html
├── css/styles.css
├── js/script.js
└── README.md
```
3. **Run the Project:**
Open the `index.html` file in any web browser (e.g., Chrome, Firefox, Safari). You should see the page with the light mode enabled by default.
## Usage
- The page will load in **light mode** initially.
- There is a toggle button (a switch) in the top-right corner of the page.
- Clicking the toggle will switch between **light** and **dark** modes.
- The selected theme is saved in `localStorage`, so when the page is reloaded or revisited, the theme preference is maintained.
### Dark Mode Example
In dark mode, the background color of the page changes to a darker shade, and the text color changes to white, improving readability in low-light environments.
### Light Mode Example
In light mode, the page has a light background and dark text, which is typically more suitable for well-lit environments.
## Technologies Used
- **HTML**: Used to create the structure of the page.
- **CSS**: Used for styling the page and creating responsive designs.
- **JavaScript**: Handles the dark/light mode toggle functionality and stores user preferences.
## Code Explanation
### `index.html`
This file contains the structure of the page, including:
- A header section with the title and the toggle button.
- A main content area with a brief description of the project.
- A footer with the author's information and a link to their LinkedIn profile.
### `styles.css`
This stylesheet:
- Defines the global styles, including background and text colors.
- Uses CSS variables to manage light and dark mode colors.
- Styles the toggle button to make it look like a switch.
- Implements responsive design to make the website look good on mobile devices.
### `script.js`
The JavaScript file:
- Handles the theme toggle functionality. When the toggle button is clicked, it toggles between light and dark modes.
- Saves the selected theme in the browser's `localStorage` so the theme preference persists across page reloads.
- Loads the saved theme preference on page load.
## License
This project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT).
## Contact
For any questions or suggestions, feel free to reach out to [Md Emon Hasan](https://www.linkedin.com/in/md-emon-hasan-695483237/).
---