如何在Svelte中利用CSS變量實現主題切換和樣式定制

在Svelte中利用CSS變量實現主題切換和樣式定制可以通過以下步驟實現：

1. 創建一個包含主題相關的CSS變量的CSS文件，例如theme.css：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
}

2. 在Svelte組件中引入theme.css文件，并使用CSS變量來設置組件的樣式：

<!-- App.svelte -->
<script>
  import './theme.css';
</script>

<style>
  .container {
    background-color: var(--background-color);
    color: var(--primary-color);
  }
</style>

<div class="container">
  <!-- content goes here -->
</div>

3. 如果要實現主題切換功能，可以在Svelte組件中定義一個變量來表示當前主題，然后根據當前主題動態修改CSS變量的值：

<!-- App.svelte -->
<script>
  import './theme.css';

  let isDarkTheme = false;

  function toggleTheme() {
    isDarkTheme = !isDarkTheme;
    document.documentElement.style.setProperty('--primary-color', isDarkTheme ? '#ffffff' : '#000000');
    document.documentElement.style.setProperty('--background-color', isDarkTheme ? '#000000' : '#ffffff');
  }
</script>

<button on:click={toggleTheme}>Toggle Theme</button>

<div class="container">
  <!-- content goes here -->
</div>

通過以上步驟，您可以在Svelte中利用CSS變量實現主題切換和樣式定制的功能。您可以根據需要修改CSS變量的值來改變組件的樣式，從而實現不同主題的切換和樣式定制。