Используй view-transitions и clip-path, чтобы анимировать переключение темы вместо простого переключения с transition

document.documentElement.animate(
  { clipPath: ["inset(0 0 100% 0)", "inset(0)"] },
  { pseudoElement: "::view-transition-new(root)", duration: 600 },
)

::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

Здесь clip-path задаёт раскрытие анимации сверху вниз.

@WebDev_Plus