如何在Svelte项目中实现主题切换并持久化用户偏好设置

要在Svelte项目中实现主题切换并持久化用户偏好设置，你可以按照以下步骤操作：

1. 创建一个可以切换主题的组件，比如ThemeSwitcher。这个组件可以包含一个按钮或下拉菜单，用来切换不同的主题。

2. 在Svelte的store中创建一个主题设置store，用来存储用户选择的主题。你可以使用Svelte的writable store来实现。比如：

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

export const theme = writable('light');

3. 在主题设置store中添加一个函数，用来切换主题并将用户的选择持久化到本地存储中。比如：

// 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()函数来实现主题的切换。比如：

// 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应用的根组件中，监听主题设置store的变化，然后动态地加载对应的主题样式。比如：

// 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项目中实现主题切换并持久化用户偏好设置了。当用户切换主题时，主题设置将被保存到本地存储中，并在应用重新加载时恢复用户之前的选择。