$light-bg:  #f0f0eb ;
$light-bg-alt:   #545155  ;
$light-fg:  #545155 ;
$light-ln:   #d8828e ;
$light-active:  #7be098 ;

$dark-bg:  #2e4052 ;
$dark-bg-alt:  #c97064 ;
$dark-fg: #fbbbad;
$dark-ln: #ee8695;
$dark-active: #4a7a96;

body {
  &.light {
    background-color: $light-bg;
    color: $light-fg;
  }
  background-color: $dark-bg;
  color: $dark-fg;
}

a {
  &.light {
    background-color: $light-ln;
    color: $light-bg;
  }
  background-color: $dark-ln;
  color: $dark-bg;
}

a.footer-nav-item.active {
  &.light {
    color: $light-active;
  }
  color: $dark-active;
}

footer {
  &.light {
    background-color: $light-bg-alt;
    color: $light-bg;
  }
  background-color: $dark-bg-alt;
  color: $dark-bg;
}

footer a {
  &.light {
    color: $light-bg;
    background-color: $light-bg-alt;
  }
  color: $dark-bg;
  background-color: $dark-bg-alt;
}

.togglelabel {
  &.light {
    background-color: $light-bg;
  }
  background-color: $dark-bg;
}

.togglelabel.light::after{
  background-color: $light-fg;
  color: $light-bg;
}

.togglelabel::after{
  background-color: $dark-fg;
  color: $dark-bg;
}