Как правильно реализовать анимированное изменение темы? ⇐ Javascript

[Anonymous]

Я собираюсь внедрить аналогичное изменение темы для моего сайта в рамках моего исследования. Мне удалось внедрить плавное изменение темы в форме круга. Но я не понимаю, как изменить тему в форме хаотической полосы, если у вас есть навыки или знания, скажите мне. Я прикрепил сжатый код для компактного запуска сдвига, который я получил.

Код: Выделить всё

    const container = document.querySelector(".cards");

for (let i = 1; i  {
const btn = document.querySelector(".toggle-button");

const isDarkMode = () => document.documentElement.getAttribute("data-theme") === "dark";
const setDarkMode = (enabled) => {
document.documentElement.setAttribute("data-theme", enabled ? "dark" : "light");
};

btn.addEventListener("click", async () => {
if (!document.startViewTransition || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
return setDarkMode(!isDarkMode());
}

await document.startViewTransition(() => {
setDarkMode(!isDarkMode());
}).ready;

const {top, left, width, height} = btn.getBoundingClientRect();
const right = window.innerWidth - left;
const bottom = window.innerHeight - top;
const maxRadius = Math.hypot(Math.max(left, right), Math.max(top, bottom));

document.documentElement.animate(
{
clipPath: [
`circle(0px at ${left + width / 2}px ${top + height / 2}px)`,
`circle(${maxRadius}px at ${left + width / 2}px ${top + height / 2}px)`,
],
},
{
duration: 1500,
easing: "ease-in",
pseudoElement: "::view-transition-new(root)",
}
);
});

setDarkMode(isDarkMode());
});< /code>
      :root {
color-scheme: dark;
--theme-text: white;
--theme-bg: black;

--bg-card: #29292d;
--border-card: #3b3b41;
}

[data-theme="light"] {
color-scheme: light;
--theme-text: black;
--theme-bg: white;

--bg-card: #dedfe1;
--border-card: #cacbcc;
}

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

body {
background: var(--theme-bg);
}

.header {
display: flex;
justify-content: end;
margin-bottom: 10px;
}

.cards {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
border: 1px solid var(--border-card);
color: var(--theme-text);
background: var(--bg-card);
border-radius: 14px;
padding: 6px 10px;
}< /code>




Title



Change theme

Подробнее здесь: https://stackoverflow.com/questions/794 ... eme-change