在 Vue 3 + TypeScript 项目中实现主题切换功能

在 Vue 3 + TypeScript 项目中实现主题切换功能，可以通过以下步骤完成。以下是一个完整的示例，展示如何在 Vue 3 + TypeScript 项目中实现主题切换，并动态应用主题样式。

创建配置文件
首先，创建一个配置文件 config.ts，用于定义主题列表和默认主题。

javascript 复制代码

// src/config.ts
export const config = {
  Theme: "lightTheme",
  ThemeList: ["lightTheme", "darkTheme", "blackTheme"]
};

创建主题切换逻辑
在 main.ts 文件中，添加主题切换逻辑。这个逻辑会在应用初始化时运行，并根据配置文件中的主题设置动态应用主题样式。

javascript 复制代码

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { config } from "./config";

const initTheme = () => {
  let theme = config.ThemeList.includes(config.Theme)
    ? config.Theme
    : "blackTheme";
  document.documentElement.className = "";
  document.documentElement.classList.add(theme);
};

const app = createApp(App);

app.mount("#app");

initTheme();

定义主题样式
在 styles 文件夹中，创建主题样式文件，例如 themes.css，定义不同主题的样式。

javascript 复制代码

/* src/styles/themes.css */
.lightTheme {
  --background-color: #ffffff;
  --text-color: #000000;
}

.darkTheme {
  --background-color: #000000;
  --text-color: #ffffff;
}

.blackTheme {
  --background-color: #000000;
  --text-color: #ffffff;
}

也可以创建多个scss文件，每个文件对应不一样的主题

javascript 复制代码

dark.scss
html.dark{}
black.scss
html.black{}

在 main.ts 中引入主题样式文件：

javascript 复制代码

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { config } from "./config";
import "./styles/themes.css";

const initTheme = () => {
  let theme = config.ThemeList.includes(config.Theme)
    ? config.Theme
    : "blackTheme";
  document.documentElement.className = "";
  document.documentElement.classList.add(theme);
};

const app = createApp(App);

app.mount("#app");

initTheme();

动态切换主题
在 Vue 组件中，添加一个方法来动态切换主题。例如，在 App.vue 文件中：

javascript 复制代码

<template>
  <div>
    <h1>Theme Switcher</h1>
    <button @click="switchTheme('lightTheme')">Light Theme</button>
    <button @click="switchTheme('darkTheme')">Dark Theme</button>
    <button @click="switchTheme('blackTheme')">Black Theme</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { config } from "./config";

export default defineComponent({
  name: "App",
  methods: {
    switchTheme(theme: string) {
      if (config.ThemeList.includes(theme)) {
        config.Theme = theme;
        document.documentElement.className = "";
        document.documentElement.classList.add(theme);
      }
    }
  }
});
</script>

<style>
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>

使用 CSS 变量
在主题样式中使用 CSS 变量，这样可以在组件中动态应用主题样式。例如：

javascript 复制代码

/* src/styles/themes.css */
.lightTheme {
  --background-color: #ffffff;
  --text-color: #000000;
}

.darkTheme {
  --background-color: #000000;
  --text-color: #ffffff;
}

.blackTheme {
  --background-color: #000000;
  --text-color: #ffffff;
}

在组件中使用 CSS 变量：

javascript 复制代码

<template>
  <div>
    <h1>Theme Switcher</h1>
    <button @click="switchTheme('lightTheme')">Light Theme</button>
    <button @click="switchTheme('darkTheme')">Dark Theme</button>
    <button @click="switchTheme('blackTheme')">Black Theme</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { config } from "./config";

export default defineComponent({
  name: "App",
  methods: {
    switchTheme(theme: string) {
      if (config.ThemeList.includes(theme)) {
        config.Theme = theme;
        document.documentElement.className = "";
        document.documentElement.classList.add(theme);
      }
    }
  }
});
</script>

<style>
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>

保存主题设置
如果需要保存主题设置，可以使用 localStorage 或 sessionStorage。例如：

javascript 复制代码

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { config } from "./config";
import "./styles/themes.css";

const initTheme = () => {
  let theme = localStorage.getItem("theme") || config.Theme;
  if (!config.ThemeList.includes(theme)) {
    theme = "blackTheme";
  }
  document.documentElement.className = "";
  document.documentElement.classList.add(theme);
  config.Theme = theme;
};

const app = createApp(App);

app.mount("#app");

initTheme();

在 App.vue 中保存主题设置：

javascript 复制代码

<script lang="ts">
import { defineComponent } from "vue";
import { config } from "./config";

export default defineComponent({
  name: "App",
  methods: {
    switchTheme(theme: string) {
      if (config.ThemeList.includes(theme)) {
        config.Theme = theme;
        document.documentElement.className = "";
        document.documentElement.classList.add(theme);
        localStorage.setItem("theme", theme);
      }
    }
  }
});
</script>

总结

通过以上步骤，你可以在 Vue 3 + TypeScript 项目中实现主题切换功能。主题切换逻辑在 main.ts 中初始化，并在组件中提供动态切换主题的方法。使用 CSS 变量可以方便地在组件中应用主题样式。

记录一下这个需求，AI生成