Botón interruptor de luz oscura.

1187 jhonnn

Abrir en el editor Publica tu código

Recomendado

27 August 2024

Formulario de inicio de sesión

23 August 2024

Página de inicio de React Netflix

3 February 2025

Un código de zegarekdawida

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);
}

Recomendado

Formulario de inicio de sesión

Página de inicio de React Netflix

Un código de zegarekdawida

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS