在 astro 中使用 viewtransition 的深色模式

  // Get the theme toggle input
  const themeToggle: HTMLInputElement = document.querySelector(
    '.theme-switch input[type="checkbox"]'
  );

  // Get the current theme from local storage
  const currentTheme = localStorage.getItem("theme");

  // If the current local storage item can be found
  if (currentTheme) {
    // Set the body data-theme attribute to match the local storage item
    document.documentElement.setAttribute("data-theme", currentTheme);

    // If the current theme is dark, check the theme toggle
    if (currentTheme === "dark") {
      themeToggle.checked = true;
    }
  }

  // Function that will switch the theme based on the if the theme toggle is checked or not
  function switchTheme(e) {
    if (e.target.checked) {
      document.documentElement.setAttribute("data-theme", "dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.setAttribute("data-theme", "default");
      localStorage.setItem("theme", "default");
    }
  }

  // Add an event listener to the theme toggle, which will switch the theme
  themeToggle.addEventListener("change", switchTheme, false);
  document.addEventListener("astro:after-swap", switchTheme, false);

  /* TOGGLE  */
  .theme-switch-wrapper {
    margin-inline: 20px;
    display: inline-block;
    /* justify-content: flex-end; */
    /* align-items: center; */
  }

  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }

  .theme-switch input {
    display: none;
  }

  .slider {
    background-color: #dddddd;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border-radius: 34px;
  }

  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 26px;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #8758ff;
  }

  input:checked + .slider:before {
    transform: translateX(26px);
  }

  .slider svg {
    color: #222;
    position: absolute;
    transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
    pointer-events: none;
  }

  .feather-moon {
    opacity: 0;
    left: 9px;
    bottom: 9px;
    transform: translateX(4px);
  }

  .feather-sun {
    opacity: 1;
    right: 10px;
    bottom: 9px;
    transform: translateX(0px);
  }

  input:checked + .slider .feather-moon {
    opacity: 1;
    transform: translateX(0);
  }

  input:checked + .slider .feather-sun {
    opacity: 0;
    transform: translateX(-4px);
  }

<div class="theme-switch-wrapper py-2 mt-1">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="#FCD53F"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-sun"
      >
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="#FCD53F"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-moon"
      >
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
      </svg>
    </div>
  </label>
</div>