Appearance Card

aartigoyal
Jan 30, 2026 2
Live Preview

Live Editor

<div class="card">
  <div class="title">Appearance</div>

  <!-- Sun toggle -->
  <div class="row">
    <div class="toggle active" id="sunToggle">
      <div class="knob">☀️</div>
    </div>

    <!-- Moon toggle -->
    <div class="toggle" id="moonToggle">
      <div class="knob">🌙</div>
    </div>
  </div>

  <!-- Bottom buttons -->
  <div class="group">
    <div class="btn">Gorn</div>
    <div class="btn">Staret</div>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#8b8f98;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* card */
.card{
  width:320px;
  height:300px; /* 👈 fixed height */
  padding:26px;
  border-radius:26px;
  background:linear-gradient(180deg,#0b1220,#060b14);
  color:#fff;
  box-shadow:
    0 40px 90px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* title */
.title{
  text-align:center;
  font-size:22px;
  font-weight:600;
  margin-bottom:20px;
}

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

/* toggle */
.toggle{
  width:90px;
  height:44px;
  border-radius:999px;
  background:#1e293b;
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 0 10px rgba(0,0,0,.6);
}

.knob{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#111;
  position:absolute;
  top:3px;
  left:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:.3s;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
}

.toggle.active .knob{
  transform:translateX(44px);
  background:#ffd166;
}

/* buttons */
.btn{
  padding:12px 26px;
  border-radius:999px;
  background:#1f2937;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 20px rgba(0,0,0,.5);
  font-size:16px;
}

/* spacing */
.group{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
}
const sun = document.getElementById("sunToggle");
const moon = document.getElementById("moonToggle");

sun.onclick = () => {
  sun.classList.add("active");
  moon.classList.remove("active");
};

moon.onclick = () => {
  moon.classList.add("active");
  sun.classList.remove("active");
};
Categories

Appearance Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
