如何在Svelte項目中實現(xiàn)主題切換并持久化用戶偏好設置

要在Svelte項目中實現(xiàn)主題切換并持久化用戶偏好設置，你可以按照以下步驟操作：

1. 創(chuàng)建一個可以切換主題的組件，比如ThemeSwitcher。這個組件可以包含一個按鈕或下拉菜單，用來切換不同的主題。

2. 在Svelte的store中創(chuàng)建一個主題設置store，用來存儲用戶選擇的主題。你可以使用Svelte的writable store來實現(xiàn)。比如：

// theme.js
import { writable } from 'svelte/store';

export const theme = writable('light');

3. 在主題設置store中添加一個函數(shù)，用來切換主題并將用戶的選擇持久化到本地存儲中。比如：

// theme.js
import { writable } from 'svelte/store';

export const theme = writable('light');

export function setTheme(newTheme) {
  theme.set(newTheme);
  localStorage.setItem('theme', newTheme);
}

4. 在主題切換組件中引入主題設置store，并通過setTheme()函數(shù)來實現(xiàn)主題的切換。比如：

// ThemeSwitcher.svelte
<script>
  import { theme, setTheme } from './theme.js';

  function toggleTheme() {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  }
</script>

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

5. 在你的Svelte應用的根組件中，監(jiān)聽主題設置store的變化，然后動態(tài)地加載對應的主題樣式。比如：

// App.svelte
<script>
  import { theme } from './theme.js';
  import './App.{#if $theme === 'light'}light{:else}dark{/if}.css';
</script>

<main>
  <!-- Your app content here -->
</main>

通過這些步驟，你就可以在Svelte項目中實現(xiàn)主題切換并持久化用戶偏好設置了。當用戶切換主題時，主題設置將被保存到本地存儲中，并在應用重新加載時恢復用戶之前的選擇。