给网站加上深色模式

前端Tailwind CSS技巧

三种常见方案

实现深色模式大体有三条路：

  1. 纯媒体查询：跟随系统，用户无法手动切换
  2. class 策略：在 <html> 上切换 .dark 类，可控性最强
  3. CSS 变量 + 数据属性：灵活但维护成本略高

本站选择了 class 策略，配合 Tailwind CSS 的 @custom-variant 即可使用 dark: 前缀。

防止闪烁的关键

如果等 JavaScript 加载完再设置主题，页面会先闪一下浅色。解决办法是把一段内联脚本放在 <head> 里，在首次绘制前就决定主题：

<script is:inline>
	const stored = localStorage.getItem('theme');
	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
	if (stored === 'dark' || (!stored && prefersDark)) {
		document.documentElement.classList.add('dark');
	}
</script>

切换按钮

按钮点击时切换类名并记住用户的选择：

const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');

小结

核心思路只有一句话：让主题在首帧渲染前就确定下来。剩下的只是配色变量的整理工作。