hugo-battheme/assets/scss/colors.scss

$light-bg: #dde4ff;
$light-bg-alt: #733c7c;
$light-fg: #4b3d44;
$light-ln: #733c7c;
$light-accent1: #007582;
$light-accent2: #225091;
$light-accent3: #27234c;

$dark-bg: #27234c;
$dark-bg-alt: #f2504b;
$dark-fg: #e88dc3;
$dark-ln: #d3d37c;
$dark-accent1: #b296ff;
$dark-accent2: #39b8a3;
$dark-accent3: #dde4ff;

$transition-time: 2s;
$trans-short: 0.2s;

* {
  transition: $transition-time;
}

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

a {
  &.light {
    background-color: transparent;
    color: $light-ln;
  }
  background-color: transparent;
  color: $dark-ln;
  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: $trans-short;
}

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;
  transition: $transition-time;
}

h2 {
  background-color: $dark-accent1;
  color: $dark-bg;
  transition: $transition-time;
  &.light {
    color: $light-bg;
  }
}

h2 a {
  color: $dark-bg;
}

h3 {
  background-color: $dark-accent2;
  color: $dark-bg;
  transition: $transition-time;
}

h3 a {
  color: $dark-bg;
  &:hover {
    background-color: transparent;
  }
}

h3.light {
  background-color: $light-accent2;
  color: $light-bg;
  transition: $transition-time;
  &a {
    color: $light-bg;
  }
}

h5,
h6,
h4 {
  background-color: $dark-accent3;
  color: $dark-bg;
  transition: $transition-time;
  & a {
    color: $dark-bg;
    background-color: transparent;
  }
}

h4.light,
h5.light,
h6.light {
  background-color: $light-accent3;
  color: $light-bg;
  transition: $transition-time;
}

h2.light {
  background-color: $light-accent1;
  color: $light-bg;
  transition: $transition-time;
}

article.light a {
  background-color: transparent;
  color: $light-ln;
  transition: $transition-time;
  &.hash-link {
    color: $light-bg;
  }
  &.hash-link:hover {
    background-color: transparent;
    color: $light-bg;
  }
}

a:hover {
  color: $dark-bg;
  background-color: $dark-ln;
  transition: $trans-short;
}

.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover {
  color: $light-bg;
  background-color: $light-ln;
  transition: $trans-short;
}

.light.hash-link:hover,
.hash-link:hover {
  background-color: transparent;
  transition: $transition-time;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &a.light {
    background-color: transparent;
    color: $light-bg;
    &:hover {
      background-color: transparent;
    }
  }
}

header.light {
  background-color: $light-bg;
  transition: $transition-time;
}

header {
  transition: $transition-time;
}

.posttitle a {
  background-color: transparent;
  color: $dark-bg;
  &:hover {
    background-color: transparent;
  }
}