Nuxt3主题切换实战：Nuxt Color Mode配置暗黑模式全解析｜2025最新指南

前几天在开发时候需要给网站添加主题切换，由于使用的是Nuxt所以最终选择了使用Nuxt Color Mode这个库。这个库已经给了示例代码还是挺简单的，但是在使用时候还是不可避免的遇到了一些问题，事后想想挺好笑的。

安装&配置

安装命令如下

npx nuxi module add color-mode

然后在nuxt.config.ts中简单配置

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/color-mode'
  ]
})

官方示例代码

下面是官方的实例代码，也很简单理解只需要更改$colorMode.preference的值然后定义一些css变量就好，但是很明显这个样式并不符合。咱们稍微更改代码。

<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<script setup>
const colorMode = useColorMode()

console.log(colorMode.preference)
</script>

<style>
body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

修改代码

首先我们要明确我们切换按钮样式，一般来说都是明亮和黑暗主题的切换，但是这个Sepia主题确实好看，我就打算保留。我使用了daisyui和tailwindcss，做了一个类似手风琴的切换。

其实还蛮好看的，代码如下，不过这个代码并不完整有的类名我没有写出来，需要的话可以评论区滴滴下。

<script setup lang="ts">
const theme = ref([
  {
    theme: "light",
    value: 0,
  },
  {
    theme: "dark",
    value: 1,
  },
  {
    theme: "sepia",
    value: 2,
  },
]);
const themeValue = ref(0);
const selectedTheme = ref(0);
const changeTheme = (index: number) => {
  themeValue.value = index;
  selectedTheme.value = index;
  //这样切换
  useColorMode().preference = theme.value[themeValue.value].theme;
};
// 添加计算属性来处理未选中按钮的宽度
const normalThemeWidth = computed(() => {
  return `${55 / (theme.value.length - 1)}%`;
});
onMounted(() => {
  const nuxtColorMode = localStorage.getItem("nuxt-color-mode");
  selectedTheme.value =
    theme.value.find((item) => item.theme === nuxtColorMode)?.value || 0;
});
</script>
<template>
    <div class="w-full flex rounded-lg my-3 theme-switch-group">
      <button
        v-for="(item, index) in theme"
        :key="item.value"
        type="button"
        :class="[
          'flex-auto py-3 transition-all duration-300 theme-btn',
          selectedTheme === index ? 'selected-btn' : 'normal-btn',
        ]"
        @click="changeTheme(index)"
      >
        {{ item.theme }}
      </button>
    </div>
</template>
<style scoped>
.selected-btn {
  width: 45%;
  font-weight: bold;
}

.normal-btn {
  width: v-bind(normalThemeWidth);
}
</style>

然后就是定义css变量，这里咱们使用.xxx-mode的形式，这里有一个坑就是上面代码theme数组对象中的theme必须和这个xxx保持一致(这个就是踩得坑！！！)

:root {
  --transition: all 0.3s,
    --background-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --accent-color: #28a745;
  --border-color: #dddddd;
  /* aside - main */
  --menu-bg-color: #f8f9fa;
  --menu-text-color: #333333;
  --menu-active-bg-color: #e9ecef;
  --menu-active-text-color: #007bff;
  --main-bg-color: #ffffff;
  --main-text-color: #333333;
}

/* 通过类名覆盖变量 */
.dark-mode {
  --background-color: #121212;
  --text-color: #e0e0e0;
  --primary-color: #bb86fc;
  --secondary-color: #03dac6;
  --accent-color: #cf6679;
  --border-color: #333333;
  /* aside - main */
  --menu-bg-color: #1e1e1e;
  --menu-text-color: #e0e0e0;
  --menu-active-bg-color: #333333;
  --menu-active-text-color: #bb86fc;
  --main-bg-color: #121212;
  --main-text-color: #e0e0e0;
}

.sepia-mode {
  --background-color: #f4ecd8;
  --text-color: #5a4a42;
  --primary-color: #8b7355;
  --secondary-color: #a68a6d;
  --accent-color: #d4a373;
  --border-color: #c4b7a6;
  /* aside - main */
  --menu-bg-color: #efe5d8;
  --menu-text-color: #5a4a42;
  --menu-active-bg-color: #d4c4b0;
  --menu-active-text-color: #8b7355;
  --main-bg-color: #f4ecd8;
  --main-text-color: #5a4a42;
}

/* 应用变量 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: var(--transition),
}

结语

更多的配置和用法可以去 Nuxt Color Mode官网 查看。