在 Nuxt.js 中配合 windicss 实现暗黑模式适配

在 windicss 中，提供了媒体查询和 class 两种方式实现暗黑模式适配。而且比较省心的是——其提供的 dark 变体会自动根据选择的适配模式，生成对应的代码，可以有效避免写出一堆没用的css，看起来也比较清晰。

为了方便控制，我们选择使用 class 的方式来切换暗黑模式（即给根元素赋予类名 dark 来切换到暗黑模式）

基础样式

首先，需要一些全局 css 来解决 windicss 无法覆盖的样式。

滚动条颜色改变

正常情况下，你可能会想用 -webkit-scrollbar 伪类，但是，其实有更优雅的写法。浏览器提供了一个 color-scheme css 属性，将其设置为dark，浏览器便会自动将页面内所有浏览器自带的元素渲染成暗色风格

html.dark {
    color-scheme: dark;
}

图片亮度降低

也很简单，应用一个 filter 就好了

html.dark img {
    filter: brightness(0.8);
}

自动检测

接下来就是重头戏了，如何判断并给html元素加上dark类名，毕竟windicss可不会帮我们自动处理。

我们会在前端为用户提供一个下拉框，用户可以选择自动适应、保持暗黑模式、保持明亮模式

为了避免页面初载入时样式切换导致的闪屏，最终决定将该配置储存到cookie而非localstorage中，这样能够发挥ssr的作用，当用户强制暗黑/明亮时，服务端就能将类名写入html标签中。

import { useCookie } from 'nuxt/app'
// ---cut---
function readDarkModeInStorage() {
  const darkMode = useCookie('darkMode')
  const possibleValues = ['auto', 'dark', 'light']
  if (darkMode.value && possibleValues.includes(darkMode.value)) {
    return darkMode.value
  } else {
    return 'auto'
  }
}

上面是一个辅助函数，用于从储存中读出暗黑模式配置（服务端/客户端均可用）

import { useHead } from '@unhead/vue'
// ---cut---
function setModeClass(isDark: boolean): void {
  if (isDark) {
    useHead({
      htmlAttrs: { class: 'dark' },
      meta: [{ name: 'theme-color', content: '#121212' }],
    })
  } else {
    useHead({
      htmlAttrs: { class: '' },
      meta: [{ name: 'theme-color', content: '#ffffff' }],
    })
  }
}

一个用于设置暗黑模式样式的工具函数，当传入布尔值时，会同时设置 html 的类名和 theme-color 的 meta 标签（ssr/csr均可用）

使用了来自 VueUse 的 useHead 方法

import { useCookie } from 'nuxt/app'
import { ref, watchEffect } from 'vue'
import { usePreferredDark } from '@vueuse/core'
import { useHead } from '@unhead/vue'
function readDarkModeInStorage() {
  const darkMode = useCookie('darkMode')
  const possibleValues = ['auto', 'dark', 'light']
  if (darkMode.value && possibleValues.includes(darkMode.value)) {
    return darkMode.value
  } else {
    return 'auto'
  }
}
function setModeClass(isDark: boolean): void {
  if (isDark) {
    useHead({
      htmlAttrs: { class: 'dark' },
      meta: [{ name: 'theme-color', content: '#121212' }],
    })
  } else {
    useHead({
      htmlAttrs: { class: '' },
      meta: [{ name: 'theme-color', content: '#ffffff' }],
    })
  }
}
// ---cut---
const currentMode = ref(readDarkModeInStorage())
const preferredDark = usePreferredDark()

watchEffect(() => {
  if (currentMode.value === 'auto') {
    if (preferredDark.value) {
      setModeClass(true)
    } else {
      setModeClass(false)
    }
  } else if (currentMode.value === 'dark') {
    setModeClass(true)
  } else if (currentMode.value === 'light') {
    setModeClass(false)
  }

  useCookie('darkMode').value = currentMode.value
})

这里便是关键，首先，读入配置并初始化到 currentMode 变量，接着，使用 VueUse 提供的 usePreferredDark 来获取当前浏览器的颜色模式。

使用一个监听副作用的函数，当上面两个值发生改变时，调用 setModeClass 工具函数去完成最终的类名修改，并将配置写入 cookie。