@media (prefers-color-scheme: dark) {
  html,
  .site-header {
    color: $light;
    background-color: $dark;
  }

  .site-header__nav li {
    color: $light;
    border-color: $light;

    &:hover {
      background-color: $dark;
    }
  }

  .site-header__title a {
    color: $light;
  }

  .item-tile {
    &--heading,
    &__header {
      background-color: $light;
    }

    &--heading,
    &__header,
    &__title,
    &__subtitle {
      color: $dark;
    }
  }
}