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

戴兜

发布于 2023-03-11 01:27:04

1.6K00

代码可运行

文章被收录于专栏：daidrdaidr

运行总次数：0

代码可运行

在 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标签中。

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

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

使用了来自 VueUse 的 useHead 方法

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
})