简介#
本文主要是探讨 最适合 Next.js(SSG、SSR)的 主题方案。
当前流行的一些主题方案#
daisyui 官网的 主题方案#
daisyui 官网使用的是 svelte,其最核心的主题方案是在 html head 中插入一个 会阻塞 html 解析的 script 来初始化 theme:
<script>
try {
document.documentElement.setAttribute(
"data-theme",
localStorage.getItem("theme")
);
} catch (e) {}
</script>
在初始化完 theme 之后再解析 html,所以 1. 页面能正常展示对应的 theme 2. 切换页面时不会闪烁
NextUI 的 主题方案#
NextUI 官网使用的是 Next.js,他的 theme 控制用的方案 是 next-themes
https://github.com/pacocoursey/next-themes
注意点#
import {ThemeProvider} from "next-themes";
需要在 'use client' 下使用?- 但好像不影响 SSR,Provider 内部的组件即使停用浏览器 js,也能正常渲染(html 已经在服务端生成了)(不过 theme 的不正确,所以初始化设置 theme 的逻辑还是和 daisyui 的方案一样利用 script 更新 css 变量)
疑惑点#
- 'use client' 到底对组件的影响是什么?