Dark Mode

aartigoyal
Jan 30, 2026 2
Live Preview

Live Editor

<div class="card">
  <!-- Header -->
  <div class="header">
    <div>Appearance</div>
    <div class="toggle" id="appearanceToggle">
      <span></span>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="mode">
    <div>Dark Mode</div>
    <div class="sun" id="icon"></div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <div class="status">
      <div class="label">Status</div>
      <div class="pill" id="statusText">OFF</div>
    </div>

    <div class="toggle" id="darkToggle">
      <span></span>
    </div>
  </div>
</div>
:root{
  --bg-dark: radial-gradient(circle at top,#0b2a4a,#040814);
  --bg-light: radial-gradient(circle at top,#e8f0ff,#c7d8ff);
}

body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--bg-dark);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  transition:.4s;
}

/* glass card */
.card{
  width:330px;
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  color:#fff;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.15);
  position:relative;
}

/* header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  font-size:18px;
}

/* toggle */
.toggle{
  width:48px;
  height:26px;
  border-radius:999px;
  background:#1e293b;
  position:relative;
  cursor:pointer;
}
.toggle span{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  top:2px;
  left:2px;
  transition:.3s;
}
.toggle.active span{
  transform:translateX(22px);
}

/* dark mode row */
.mode{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  margin-bottom:18px;
}

.sun{
  width:26px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,#facc15);
  box-shadow:0 0 18px rgba(250,204,21,.8);
}

/* footer */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.status{
  display:flex;
  gap:10px;
  align-items:center;
}
.label{
  opacity:.7;
}
.pill{
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
const body = document.body;

const appearanceToggle = document.getElementById("appearanceToggle");
const darkToggle = document.getElementById("darkToggle");
const statusText = document.getElementById("statusText");

let darkMode = true;

function updateUI(){
  if(darkMode){
    body.style.background = "var(--bg-dark)";
    statusText.textContent = "ON";
    darkToggle.classList.add("active");
  }else{
    body.style.background = "var(--bg-light)";
    statusText.textContent = "OFF";
    darkToggle.classList.remove("active");
  }
}

appearanceToggle.onclick = () => {
  appearanceToggle.classList.toggle("active");
};

darkToggle.onclick = () => {
  darkMode = !darkMode;
  updateUI();
};

updateUI();
Categories

Dark Mode

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
