danbarber.me.hugo/assets/sass/components/_logo.scss

$_desaturate_amount: 10%;

$_color_1: #f37001;
$_color_2: #b8d900;
$_color_3: #00a9ff;
$_color_4: #a95ed5;

$_color_1_dark: desaturate($_color_1, $_desaturate_amount);
$_color_2_dark: desaturate($_color_2, $_desaturate_amount);
$_color_3_dark: desaturate($_color_3, $_desaturate_amount);
$_color_4_dark: desaturate($_color_4, $_desaturate_amount);

.logo__wrapper {
  width: 7rem;
  line-height: 0;
  margin-bottom: 1em;
}

.logo__color_1 { fill: $_color_1; transition: fill 200ms ease; }
.logo__color_2 { fill: $_color_2; transition: fill 200ms ease; }
.logo__color_3 { fill: $_color_3; transition: fill 200ms ease; }
.logo__color_4 { fill: $_color_4; transition: fill 200ms ease; }

.logo__link:hover,
.logo__link:focus {
  .logo__color {
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .logo__color_1 {
    animation-name: cycle_color_1;
  }
  .logo__color_2 {
    animation-name: cycle_color_2;
  }
  .logo__color_3 {
    animation-name: cycle_color_3;
  }
  .logo__color_4 {
    animation-name: cycle_color_4;
  }
}

@media (prefers-color-scheme: light) {
  @keyframes cycle_color_1 {
    0%,
    100% { fill: $_color_1; }
    25%  { fill: $_color_2; }
    50%  { fill: $_color_3; }
    75%  { fill: $_color_4; }
  }

  @keyframes cycle_color_2 {
    0%,
    100% { fill: $_color_2; }
    25%  { fill: $_color_3; }
    50%  { fill: $_color_4; }
    75%  { fill: $_color_1; }
  }

  @keyframes cycle_color_3 {
    0,
    100% { fill: $_color_3; }
    25%  { fill: $_color_4; }
    50%  { fill: $_color_1; }
    75%  { fill: $_color_2; }
  }

  @keyframes cycle_color_4 {
    0%,
    100% { fill: $_color_4; }
    25%  { fill: $_color_1; }
    50%  { fill: $_color_2; }
    75%  { fill: $_color_3; }
  }
}

@media (prefers-color-scheme: dark) {
  .logo__color_1 { fill: $_color_1_dark; }
  .logo__color_2 { fill: $_color_2_dark; }
  .logo__color_3 { fill: $_color_3_dark; }
  .logo__color_4 { fill: $_color_4_dark; }

  @keyframes cycle_color_1 {
    0%,
    100% { fill: $_color_1_dark; }
    25%  { fill: $_color_2_dark; }
    50%  { fill: $_color_3_dark; }
    75%  { fill: $_color_4_dark; }
  }

  @keyframes cycle_color_2 {
    0%,
    100% { fill: $_color_2_dark; }
    25%  { fill: $_color_3_dark; }
    50%  { fill: $_color_4_dark; }
    75%  { fill: $_color_1_dark; }
  }

  @keyframes cycle_color_3 {
    0%,
    100% { fill: $_color_3_dark; }
    25%  { fill: $_color_4_dark; }
    50%  { fill: $_color_1_dark; }
    75%  { fill: $_color_2_dark; }
  }

  @keyframes cycle_color_4 {
    0%,
    100% { fill: $_color_4_dark; }
    25%  { fill: $_color_1_dark; }
    50%  { fill: $_color_2_dark; }
    75%  { fill: $_color_3_dark; }
  }
}