.valatoggle {
    --tsize: 1rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
  width: var(--tsize);
  height: var(--tsize);
  box-shadow: inset calc(var(--tsize) * 0.33) calc(var(--tsize) * -0.25) 0;
  border-radius: 999px;
  {{if theme.vala_thememode_custom}}
  color: {theme="vala_thememode_light_color"};
  {{else}}
  color:inherit;
  {{endif}}
  transition: all 500ms;
}
.valatoggle:checked {
  --tray-size: calc(var(--tsize) * -0.4);
  --toffset-orthogonal: calc(var(--tsize) * 0.65);
  --toffset-diagonal: calc(var(--tsize) * 0.45);
  transform: scale(0.75);
  {{if theme.vala_thememode_custom}}
  	color: {theme="vala_thememode_dark_color"};
  {{else}}
  	color:#ffaa00;
  {{endif}}
  box-shadow: inset 0 0 0 var(--tsize), calc(var(--toffset-orthogonal) * -1) 0 0 var(--tray-size), var(--toffset-orthogonal) 0 0 var(--tray-size), 0 calc(var(--toffset-orthogonal) * -1) 0 var(--tray-size), 0 var(--toffset-orthogonal) 0 var(--tray-size), calc(var(--toffset-diagonal) * -1) calc(var(--toffset-diagonal) * -1) 0 var(--tray-size), var(--toffset-diagonal) var(--toffset-diagonal) 0 var(--tray-size), calc(var(--toffset-diagonal) * -1) var(--toffset-diagonal) 0 var(--tray-size), var(--toffset-diagonal) calc(var(--toffset-diagonal) * -1) 0 var(--tray-size);
}

.valadarktogglebackground {
  --tbg: hsl(240, 100%, 10%);
  background: var(--tbg);
  position: fixed;
  height: 100vh;
  width: 100vw;
  transition: background 500ms;
}

.valatoggle {
  z-index: 1;
}
.valatoggle:checked ~ .valadarktogglebackground {
  --tbg: white;
}
.valatoggle:checked ~ .valatoggletitle {
  --tcolor: hsl(40, 100%, 50%);
}

.valatoggletitle {
  --tcolor: hsl(240, 100%, 95%);
  color: var(--tcolor);
  z-index: 1;
  cursor: pointer;
  display: block;
  padding: 0.5rem 0 0;
  transition: color 500ms;
}
@media screen and (max-width: 979px) {
  .valatoggle {
    margin-bottom: 2px;
    --tsize: 1.2rem;
    color:inherit;
  }
}