解决切换深色模式出现闪烁的问题

问题表现

切换到深色模式的时候，当刷新页面或者跳转到其他页面的时候，会出现页面主题闪烁，具体表现则是会先显示浅色模式，然后再切换回深色模式。

原因

经搜索后得知，这是因为 Nuxt3 SSR 渲染会先渲染出 DOM 节点后，才会去执行 onMounted 生命周期，乃至后续的代码执行。在博客项目中实现深色模式是通过 VueUse 的 useColorModel 和 Unocss 来实现的。这就导致了页面渲染出来的时候没有检查到模式，当渲染出来的时候执行 script 的时候，才切换回深色模式。

解决方法

在 public 文件夹创建一个 js 脚本
在脚本中通过获取 Localstorage 中的值进行判断
设置主题

在 Nuxt3 的具体应用场景下，代码如下：

javascript

let theme = localStorage.getItem("vueuse-color-scheme");

function setTheme(theme) {
  if (theme === "auto" || !theme) {
    theme =
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light";
  }
  document.querySelector("html").classList.add(theme);
  document.documentElement.setAttribute("data-theme", theme);
}

setTheme(theme);

修改 nuxt.config.ts，引入脚本

typescript

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "/darkModelVerify.js" }],
    },
  },
})