如何在Svelte中实现主题切换功能

要在Svelte中实现主题切换功能，您可以按照以下步骤操作：

1. 创建主题样式文件：首先，您需要创建不同的主题样式文件，例如light.css和dark.css，分别代表不同的主题样式。

2. 在Svelte组件中引入主题样式文件：在Svelte组件中引入主题样式文件，并根据当前选定的主题应用对应的样式。您可以使用<link>标签或者在<style>标签中import主题样式文件。

3. 创建一个主题切换按钮：在Svelte组件中添加一个按钮，用于切换主题。

4. 使用Svelte的store来管理主题状态：您可以使用Svelte的store来管理主题状态。创建一个store来存储当前主题的状态，并在主题切换按钮的点击事件中更新主题状态。

下面是一个简单的示例代码：

<!-- App.svelte -->
<script>
  import { writable } from 'svelte/store';

  const themes = {
    light: 'light.css',
    dark: 'dark.css',
  };

  const selectedTheme = writable('light');

  function toggleTheme() {
    selectedTheme.update(theme => theme === 'light' ? 'dark' : 'light');
  }
</script>

<link rel="stylesheet" href={$selectedTheme.map(theme => themes[theme])}>

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

在上面的示例中，我们首先创建了一个store来存储当前选定的主题，然后在<link>标签中根据当前主题来引入对应的主题样式文件。最后，我们在一个按钮的点击事件中切换主题状态。当用户点击按钮时，主题将在light和dark之间切换。您也可以根据您的需求进一步定制主题切换功能。