tildes-issue-log/source/pages/scss/_theme.scss

@use 'sass:list';
@use 'sass:map';

@mixin theme($colors) {
  background-color: map.get($colors, 'background-1');
  color: map.get($colors, 'foreground-1');

  a,
  a:visited {
    color: map.get($colors, 'accent-1');

    &:hover {
      color: map.get($colors, 'accent-2');
    }
  }

  code,
  pre {
    background-color: map.get($colors, 'background-1');
  }

  ul > li {
    $highlights: map.get($colors, 'highlights');
    @for $index from 1 through list.length($highlights) {
      $highlight: nth($highlights, $index);

      &:nth-child(#{list.length($highlights)}n + #{$index})::marker {
        color: $highlight;
      }
    }
  }

  table {
    border: 0.1rem solid map.get($colors, 'background-1');
  }

  thead > tr {
    background-color: map.get($colors, 'background-1');
    border-bottom: 0.1rem solid map.get($colors, 'background-1');
  }

  tbody > tr {
    background-color: map.get($colors, 'background-3');
    border-bottom: 0.1rem solid map.get($colors, 'background-1');

    &:last-child {
      border-bottom: none;
    }
  }

  #header {
    a {
      color: map.get($colors, 'foreground-1');
    }

    button {
      background-color: transparent;
      color: map.get($colors, 'accent-1');

      &:hover {
        background-color: map.get($colors, 'accent-2');
      }
    }
  }

  #main {
    background-color: map.get($colors, 'background-2');
  }

  #footer {
    background-color: scale-color(map.get($colors, 'background-3'), $lightness: -3.5%);
    border-top: 0.25rem solid map.get($colors, 'accent-2');
  }

  #post {
    $highlights: map.get($colors, 'highlights');

    h2 {
      border-bottom: 0.5rem solid map.get($colors, 'accent-1');
    }

    @for $index from 1 through list.length($highlights) {
      $highlight: nth($highlights, $index);

      h3:nth-of-type(#{list.length($highlights)}n + #{$index}) {
        border-bottom: 0.5rem solid $highlight;
      }
    }

    .link-group {
      color: map.get($colors, 'highlight-2');

      &:hover {
        color: map.get($colors, 'accent-2');
      }
    }

    .link-user {
      color: map.get($colors, 'highlight-5');

      &:hover {
        color: map.get($colors, 'accent-2');
      }
    }
  }

  #posts .year {
    $highlights: map.get($colors, 'highlights');
    @for $index from 1 through list.length($highlights) {
      $highlight: nth($highlights, $index);

      &:nth-child(#{list.length($highlights)}n + #{$index}) {
        h3 {
          border-bottom: 0.5rem solid $highlight;
        }

        a {
          border-bottom: 0.25rem solid scale-color($highlight, $alpha: -75%);
          border-left: 0.25rem solid scale-color($highlight, $alpha: -75%);

          &:hover {
            background-color: $highlight;
            color: map.get($colors, 'background-1');
          }
        }
      }
    }
  }
}

#dark-theme {
  @include theme($dark-theme);
}

#light-theme {
  @include theme($light-theme);
}