1v9alex / Light-and-Dark-Mode

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Simple HTML/CSS/JavaScript Dark Mode Toggle

This project presents a simple, yet elegant Dark Mode toggle switch implemented using HTML, CSS, and JavaScript. The design and functionality are inspired by the creation on Uiverse.io by JkHuger, specifically the "Switch" toggle switch.

Features

  • Toggle Switch: A user-friendly toggle switch to switch between light and dark modes.
  • Smooth Transitions: Ensures a seamless switch between modes with smooth transitions.
  • Pure CSS for Styling: The toggle switch is styled purely with CSS, showcasing a neat and clean UI.
  • JavaScript for Functionality: JavaScript is used to switch themes and ensure the state persists across page reloads.

Demo

Check out the live demo here: Simple Dark Mode

Usage

To use this in your project:

  1. Clone the Repository: Clone this repository to your local machine or download the files.
  2. Integrate HTML: Add the HTML snippet for the toggle switch into your webpage.
  3. Link CSS: Link the CSS file or integrate the CSS code into your stylesheet.
  4. Add JavaScript: Include the JavaScript file or the script tag to handle the toggle functionality.

TODO

Center the icon inside the button

Acknowledgments

About


Languages

Language:CSS 87.4%Language:HTML 9.2%Language:JavaScript 3.3%