Bouton interrupteur de lumière sombre.

2229 jhonnn

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

1 March 2025

Modèle HTML CSS pour site Web de développeur

21 December 2024

Identité

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

Bouton interrupteur de lumière sombre.

Recommandé

Modèle HTML CSS pour site Web de développeur

mot de passe de connexion

Identité

HTML

CSS

JS

Recommandé

Modèle HTML CSS pour site Web de développeur

mot de passe de connexion

Identité

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS