:root {
            --bg: white;
            --text: black;
        }

        .dark {
            --bg: black;

            --text: white;
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--bg);

            color: var(--text);
            display: grid;

            place-items: center;
            height: 100vh;
            width: 100vw;

        }

        button {
            height: 2rem;
            display: grid;

            place-items: center;


        }

        ::view-transition-group(root) {
            animation-duration: 1.25s;
        }

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

        ::view-transition-new(root) {
            animation-name: reveal-light;
        }

        ::view-transition-old(root),
        .dark::view-transition-old(root) {
            animation: none;
        }

        .dark::view-transition-new(root) {
            animation-name: reveal-dark;
        }

        @keyframes reveal-dark {
            from {
                clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
            }

            to {
                clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
            }
        }

        @keyframes reveal-light {
            from {
                clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
            }

            to {
                clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
            }
        }

const TOGGLE = document.querySelector(".theme-toggle");

const TOGGLE_THEME = () => {
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      document.documentElement.classList.toggle("dark");
    });
  } else {
    document.documentElement.classList.toggle("dark");
  }
};

TOGGLE.addEventListener("click", TOGGLE_THEME);