在 Nuxt.js 中配合 windicss 实现暗黑模式适配
2023-02-09
Windicss提供了媒体查询和class两种方式实现暗黑模式适配,使用class的方式切换暗黑模式。为了方便控制,可以给根元素赋予类名dark来切换到暗黑模式。自动检测用户选择的适配模式并将其存储在cookie中,在前端提供一个下拉框让用户选择自动适应、保持暗黑/明亮模式。最终决定将该配置储存到cookie而非localstorage中,避免页面初载入时样式切换导致的闪屏。

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

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

基础样式

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

滚动条颜色改变

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

html.dark {
    color-scheme: dark;
}
css

图片亮度降低

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

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

自动检测

接下来就是重头戏了,如何判断并给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'
  }
}
typescript

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

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' }],
    })
  }
}
typescript

一个用于设置暗黑模式样式的工具函数,当传入布尔值时,会同时设置 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
})
typescript

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

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

留言功能还在努力开发中,你可以前往旧版博客留下评论