在开发博客切换主题模块的时候，发现切换完主题色，刷新页面的时候会有闪屏现象（从默认主题一瞬间切换到对应主题的闪烁现象）。

分析原因

是主题色的类是根据储存在本地的值判断后动态添加上的，当页面还在服务端渲染的时候读取不到值，渲染成默认主题，到客户端渲染的时候能够读取到值，就又重新渲染，但是客户端渲染需要一定时间，所以就造成了屏闪问题。

解决方案：

既然原先的方案导致服务端渲染的时候读取不到主题值，从而渲染的是默认主题，那我就想办法让服务端能读取到值。最后查询各种文献资料发现使用cookie是可以在服务端读取的。

使用useState状态管理从cookie中获取值，在app.vue中使用useHead函数添加主题类，这样做的话，在第一次请求的ssr页面中html上默认就添加了主题

      
vue
      
复制代码
    
<script setup lang="ts">
useHead({
  htmlAttrs: {
    theme: useState('theme')
  }
})
</script>

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