<form>
  <button class="light">밝음</button>
  <button class="dark">어둠</button>
</form>
form {
  --light: #CCC;
  --dark: #111;
}

button.light {
  color: var(--dark);
  background: var(--light);
}

button.dark {
  color: var(--light);
  background: var(--dark);
}

button {
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: bold;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.