Início / user-24497022

LionLive's questions

Martin Hope
LionLive
Asked: 2025-02-18 08:40:39 +0800 CST
  • 3

Vou implementar uma mudança de tema semelhante para meu site como parte do meu estudo. Consegui implementar uma mudança suave de tema na forma de um círculo. Mas não entendo como fazer a mudança de tema na forma de uma faixa caótica, se você tiver as habilidades ou conhecimento, por favor me diga. Anexei um código compactado para um lançamento compacto da mudança que obtive.

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

    for (let i = 1; i <= 6; i++) {
        const card = document.createElement("div");
        card.className = "card";

        const title = document.createElement("h2");
        title.textContent = `Title${i}`;

        const paragraph = document.createElement("p");
        paragraph.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

        card.appendChild(title);
        card.appendChild(paragraph);
        container.appendChild(card);
    }

    document.addEventListener("DOMContentLoaded", () => {
        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());
    });
      :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;
      }
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="header">
  <button class="toggle-button">Change theme</button>
</div>

<div class="cards"></div>

</body>
</html>

javascript