hugo-battheme/assets/scss/colors.scss

$light-bg: #d2c9a5;
$light-bg-alt:  #4b726e ;
$light-fg: #4b3d44;
$light-ln:  #79444a ;

$dark-bg: #4b3d44;
$dark-bg-alt: #8caba1;
$dark-fg: #d2c9a5;
$dark-ln: #c77b58;

$transition-time: 1s;

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

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

a.footer-nav-item.active,
a.footer-nav-item:hover {
  &.light {
    color: $light-bg-alt;
    background-color: $light-bg;
    border-color: $light-bg;
  }
  color: $dark-bg-alt;
  background-color: $dark-bg;
  border-color: $dark-bg;
  transition: 0.24s;
}

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

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

.togglelabel {
  &.light {
    background-color: $light-bg-alt;
    border-color: $light-bg;
  }
  background-color: $dark-bg-alt;
  border-color: $dark-bg;
  transition: $transition-time;
}

.togglelabel.light::after {
  background-color: $light-bg;
  color: $light-bg-alt;
  transition: $transition-time;
}

.togglelabel::after {
  background-color: $dark-bg;
  color: $dark-bg-alt;
  transition: $transition-time;
}

body.light #title {
  color: $light-bg;
  background-color: $light-bg-alt;
  transition: $transition-time;
}

body #title {
  color: $dark-bg;
  background-color: $dark-bg-alt;
  transition: $transition-time;
}

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

article h2,
article h3{
  background-color: $dark-bg-alt;
  color: $dark-bg;
}

article.light h2,
article.light h3{
  background-color: $light-bg-alt;
  color: $light-bg;
}