svelte如何在两种颜色之间变得轻松？

<style>
  :root {
    --primary-color: #ff0000;
    --secondary-color: #00ff00;
  }
</style>

<script>
  import { fade } from 'svelte/transition';

  let showPrimary = true;

  function toggleColor() {
    showPrimary = !showPrimary;
  }
</script>

<button on:click={toggleColor}>Toggle Color</button>

{#if showPrimary}
  <div transition:fade style="background-color: var(--primary-color); width: 200px; height: 200px;"></div>
{:else}
  <div transition:fade style="background-color: var(--secondary-color); width: 200px; height: 200px;"></div>
{/if}