Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？开发者社区

Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？

原创

<!DOCTYPE html>
<html lang="zh">
    <meta charset="UTF-8">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
  </head>
    <header>
      <h1>My Website</h1>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
    </header>
      <h2>Welcome to my website</h2>
      <p>This is a paragraph of text.</p>
      <button>Click me</button>
    </main>
  </body>
</html>

# 限定含有dark类时候的main
.dark main{
    background-color: #1a1a1a;
    color: #ffffff;
}

<!-- 未激活Dark模式 -->
  <!-- 这里显示白色 -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
</body>
</html>
<!-- 激活Dark模式 -->
<html class="dark">
  <!-- 这里将是黑色 -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
</body>
</html>

:root {
  --primary-color: #1a1a1a; /* 定义一个名为primary-color的自定义属性 */
.dark main {
  background-color: var(--primary-color); /* 使用名为primary-color的自定义属性 */
  color: white;
  padding: 8px 16px;
}

// 使用localstorge存储深色和亮色模式
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { // 媒体查询系统模式
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

<script setup>
import { ref, onMounted } from 'vue';
const dark = ref(false);
// 设置初始主题
onMounted(() => {
  const localStorageTheme = localStorage.getItem('tool-theme-mode');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (localStorageTheme === 'dark' || (!localStorageTheme && prefersDark)) {
    document.documentElement.classList.add('dark');
    dark.value = true;
// 切换主题
const handleToggleTheme = () => {
  dark.value = !dark.value;
  if (dark.value) {
    localStorage.setItem('tool-theme-mode', 'dark');
    document.documentElement.classList.add('dark');
  } else {
    localStorage.removeItem('tool-theme-mode');
    document.documentElement.classList.remove('dark');
</script>

app:{
    // 生成的静态资源根目录
    buildAssetsDir:"/_toolStatic/",
    rootId:"contentId",
    head: {
        // 深色模式判断
        script: ["/darkVerify.js"],
},

// darkVerify.js
    localStorage.getItem('tool-theme-mode') === "dark" ||
    (!localStorage.getItem('tool-theme-mode') &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    document.querySelector('html').classList.add('dark');
    document.querySelector('html').classList.remove('light');
} else {
    document.querySelector('html').classList.add('light');
    document.querySelector('html').classList.remove('dark');
}

<script setup>
import { ref, onMounted } from 'vue';
const dark = ref(false);
// 设置初始主题
onMounted(() => {
  const localStorageTheme = localStorage.getItem('tool-theme-mode');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  // 监听
  prefersDark.addEventListener('change', handleToggleTheme);
// 切换主题
const handleToggleTheme = () => {
  dark.value = !dark.value;
  if (dark.value) {
    localStorage.setItem('tool-theme-mode', 'dark');
    document.documentElement.classList.add('dark');
  } else {
    localStorage.removeItem('tool-theme-mode');
    document.documentElement.classList.remove('dark');
</script>

// 监听系统主题变化  
let darkWatcher: MediaQueryList
function watchMedia() {
  // 已经监听或不支持则返回
  if (darkWatcher || !window.matchMedia) { return } 
  darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
  darkWatcher.addEventListener('change', () => {
    // 如果没强制指定模式并且默认是系统模式,设置系统模式 
    if (!colorMode.forced && colorMode.preference === 'system') {
      colorMode.value = helper.getColorScheme()
// 首选项变化时处理 
watch(() => colorMode.preference, (preference) => {
  // 强制指定模式时返回
  if (colorMode.forced) {
    return
  // 设置对应的值
  if (preference === 'system') {
    colorMode.value = helper.getColorScheme()
    watchMedia()
  } else {
    colorMode.value = preference
  // 保存在localStorage中
  window.localStorage?.setItem(storageKey, preference)
}, { immediate: true })
// 值变化时添加删除类
watch(() => colorMode.value, (newValue, oldValue) => {
  helper.removeColorScheme(oldValue)
  helper.addColorScheme(newValue)
// 如果是系统模式,开始监听
if (colorMode.preference === 'system') {
  watchMedia()
// mounted时初始化
nuxtApp.hook('app:mounted', () => {
  if (colorMode.unknown) {
    colorMode.preference = helper.preference
    colorMode.value = helper.value
    colorMode.unknown = false 
// 提供colorMode
nuxtApp.provide('colorMode', colorMode)

useRouter().afterEach((to) => {
    const forcedColorMode = isVue2
      ? (to.matched[0]?.components.default as any)?.options.colorMode
      : to.meta.colorMode
    if (forcedColorMode && forcedColorMode !== 'system') {
      colorMode.value = forcedColorMode
      colorMode.forced = true
    } else {
      if (forcedColorMode === 'system') {
        // eslint-disable-next-line no-console
        console.warn('You cannot force the colorMode to system at the page level.')
      colorMode.forced = false
      colorMode.value = colorMode.preference === 'system'
        ? helper.getColorScheme()
        : colorMode.preference
  })

# 使用路由配置的话
    // 简体字、繁体字 互相转换
    path: '/zhConvertTradSimp',
    name: 'zhConvertTradSimp',
    meta: {
        colorMode: 'light',
    component: () => import('@/pages/characterTool/zhConvertTradSimp.vue'),
# 使用Nuxt3 Page自动装载
<script setup>
definePageMeta({
  colorMode: 'light',
</script>

import { globalName, storageKey, dataValue } from '#color-mode-options'
if (dataValue) {
    if (isVue3) {
        useHead({
        htmlAttrs: { [`data-${dataValue}`]: computed(() => colorMode.value) }
    } else {
        const app = nuxtApp.nuxt2Context.app
        const originalHead = app.head
        app.head = function () {
        const head = (typeof originalHead === 'function' ? originalHead.call(this) : originalHead) || {}
        head.htmlAttrs = head.htmlAttrs || {}
        head.htmlAttrs[`data-${dataValue}`] = colorMode.value
        return head
}

{
  // 首选颜色模式，可以是 'light'、'dark' 或 'system'
  // 如果设置为 'system'，则会根据用户的系统设置自动选择颜色模式
  // 默认值为 'system'
  preference: 'system',
  // 回退颜色模式，可以是 'light' 或 'dark'
  // 如果首选颜色模式无法使用，则会使用回退颜色模式
  // 默认值为 'light'
  fallback: 'light',
  // 存储颜色模式的键名，用于在本地存储中存储颜色模式的值
  // 默认值为 'nuxt-color-mode'
  storageKey: 'nuxt-color-mode',
  // 自定义数据属性的名称，用于在 HTML 标签上添加颜色模式的值
  // 如果设置为 undefined，则不会添加自定义数据属性
  // 默认值为 undefined
  dataValue: undefined
}

import { reactive } from 'vue'
import type { ColorModeInstance } from './types'
import { defineNuxtPlugin, isVue2, isVue3, useHead, useState, useRouter } from '#imports'
import { preference, hid, script, dataValue } from '#color-mode-options'
// 重点ヾ(≧≦)〃 添加脚本到 head 中
const addScript = (head) => {
  head.script = head.script || []
  head.script.push({
    innerHTML: script
  const serializeProp = '__dangerouslyDisableSanitizersByTagID'
  head[serializeProp] = head[serializeProp] || {}
  head[serializeProp][hid] = ['innerHTML']
  // 在路由切换后处理颜色模式的变化
  useRouter().afterEach((to) => {
    // 获取强制的颜色模式
    const forcedColorMode = isVue2
      ? (to.matched[0]?.components.default as any)?.options?.colorMode
      : to.meta.colorMode
    // 如果存在强制的颜色模式，则更新颜色模式状态，并添加对应的自定义属性到 htmlAttrs 中
    if (forcedColorMode && forcedColorMode !== 'system') {
      colorMode.value = htmlAttrs['data-color-mode-forced'] = forcedColorMode
      if (dataValue) {
        htmlAttrs[`data-${dataValue}`] = colorMode.value
      colorMode.forced = true
    } else if (forcedColorMode === 'system') {
      // 如果强制的颜色模式是 'system'，则输出警告信息
      // eslint-disable-next-line no-console
      console.warn('You cannot force the colorMode to system at the page level.')
  // 将颜色模式状态对象作为 provide 提供给子组件
  nuxtApp.provide('colorMode', colorMode)
})

const addScript = (head) => {
  head.script = head.script || []
  head.script.push({
    innerHTML: script
  const serializeProp = '__dangerouslyDisableSanitizersByTagID'
  head[serializeProp] = head[serializeProp] || {}
  head[serializeProp][hid] = ['innerHTML']
}

yarn add --dev @nuxtjs/color-mode

module.exports = {
    // 使用class进行暗色模式判断，而非媒体查询自动判断
  darkMode: 'class'
}

colorMode: {
    classSuffix: '', // 在 dark 或 light 类名后面添加 -mode 后缀
    storageKey: 'tool-theme-mode' // 存储颜色模式的键名，用于在本地存储中存储颜色模式的值
},

// components/ColorModeButtom.vue
<script setup>
let colorMode;
colorMode = useColorMode();
const isDark = computed({
    get() {
        return colorMode.value === 'dark';
    set() {
        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
</script>
<template>
    <ClientOnly>
        <UButton
            :icon="
                isDark
                    ? 'i-heroicons-moon-20-solid'
                    : 'i-heroicons-sun-20-solid'
            color="gray"
            variant="ghost"
            aria-label="Theme"
            @click="isDark = !isDark"
        <template #fallback>

Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？

Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？

深色模式

Nuxt3&Tailwindcss

深色模式实现

样式叠加

CSS变量

切换模式

存在问题

Nuxt Color Mode

源码解析

使用演示