<div class="page">
  <!--Theme switch-->
  <input type="checkbox" id="themeSwitch" name="theme-switch" class="theme-switch__input" />
  <label for="themeSwitch" class="theme-switch__label">
    <span>Switch theme</span>
  </label>
  
  <!--Main page content-->
  <main>
    <div class="wrapper">
    <h1>CSS Theme Switcher</h1>
    <p>Switch from light to dark mode using the toggle.</p>
    </div>
  </main>
</div>
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");

* {
  box-sizing: border-box;
}

body {
  font-family: Merriweather, serif;
}

label,
main {
  background: var(--bg, white);
  color: var(--text, black);
}

main {
  --gradDark: hsl(144, 100%, 89%);
  --gradLight: hsl(42, 94%, 76%);
  background: linear-gradient(to bottom, var(--gradDark), var(--gradLight));
  padding: 120px 40px 40px 40px;
  min-height: 100vh;
  text-align: center;
}

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.theme-switch__input:checked ~ main,
.theme-switch__input:checked ~ label {
  --text: white;
}

.theme-switch__input:checked ~ main {
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}


// Toggle switch
.theme-switch__input,
.theme-switch__label {
  position: absolute;
  z-index: 1;
}

.theme-switch__input {
  opacity: 0;
  
  &:hover,
  &:focus {
    + .theme-switch__label {
      background-color: lightSlateGray;
    }
    
    + .theme-switch__label span::after {
      background-color: lighten(lightBlue, 10%);
    }
  }
}

.theme-switch__label {
  padding: 20px;
  margin: 60px;
  transition: background-color 200ms ease-in-out;
  width: 120px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  background-color: slateGray;
  box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
  
  &::before,
  &::after {
    font-size: 2rem;
    position: absolute;
    transform: translate3d(0, -50%, 0);
    top: 50%;
  }
  
  &::before {
    content: '\263C';
    right: 100%;
    margin-right: 10px;
    color: orange;
  }
  
  &::after {
    content: '\263E';
    left: 100%;
    margin-left: 10px;
    color: lightSlateGray;
  }
  
  span {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%;
  }
  
  span::after {
    position: absolute;
    top: calc(100% + 15px);
    left: 5px;
    width: 40px;
    height: 40px;
    content: '';
    border-radius: 50%;
    background-color: lightBlue;
    transition: transform 200ms, background-color 200ms;
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
  }
}

// Checked label styles
.theme-switch__input:checked ~ .theme-switch__label {
    background-color: lightSlateGray;
  
  &::before {
    color: lightSlateGray;
  }
  
  &::after {
    color: turquoise;
  }
  
  span::after {
    transform: translate3d(70px, 0, 0);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.