sunandmoon.scss

@keyframes dark-mode-icon-in {
  0%   { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

@keyframes dark-mode-icon-out {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

.icon-sun,
.icon-moon {
  transform-origin: 50% 200%;
  transition: opacity 0.4s ease;
  animation-fill-mode: forwards;
}

.icon-sun {
  animation: dark-mode-icon-in 0.4s ease;
}

.icon-moon {
  color: yellow;
  opacity: 0;
  animation: dark-mode-icon-out 0.4s ease;
}

[data-speaker-theme="dark"] .icon-sun {
  opacity: 0;
  animation: dark-mode-icon-out 0.4s ease;
}

[data-speaker-theme="dark"] .icon-moon {
  opacity: 1;
  animation: dark-mode-icon-in 0.4s ease;
}