Dark light switch button.

3,085 jhonnn

Open In Editor Publish Your Code

Dark light switch button.

Recommended

24 May 2025

Neumorphism Dark Submit Button

26 June 2024

28 October 2025

Light Mode Toggle Button HTML/CSS/JS

HTML

CSS

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.5s, color 0.5s;
}

/* Light and Dark colors */
:root {
  --light-bg: #f3f4f6;
  --light-text: #1a1a1a;
  --dark-bg: #1a1a1a;
  --dark-text: #f3f4f6;
}

/* Light Mode as default */
body {
  background-color: var(--light-bg);
  color: var(--light-text);
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container for styling */
.container {
  text-align: center;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  margin: 20px auto;
}

/* Hide the default checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider with border */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.4s;
  border: 2px solid #aaa; /* Add border here */
}

/* Circle inside slider */
.slider::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
  border: 1px solid #ddd; /* Border around the inner circle */
}

/* Checked state */
input:checked + .slider {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

input:checked + .slider::before {
  transform: translateX(30px);
}

body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

JS