深色模式，应该由读者决定

本文为 mieka 博客的原创示例内容，可替换为自己的文章。

主题是阅读偏好的一部分。有人喜欢明亮的页面，有人习惯夜间阅读，也有人希望网站始终跟随设备设置。

三种选择

浅色、跟随系统和深色分别对应明确的需求。默认跟随系统，手动选择后保留偏好，比每次访问都要求重新设置更自然。

在第一帧确定主题

将少量主题初始化逻辑放在页面头部，可以在正文绘制之前读取已保存的偏好。读取失败时，仍然用系统配色作为后备。

const preference = localStorage.getItem('theme') || 'system';
const dark = preference === 'dark' || (
  preference === 'system' &&
  matchMedia('(prefers-color-scheme: dark)').matches
);
document.documentElement.dataset.theme = dark ? 'dark' : 'light';

生产代码还要为本地存储不可用的情况加上异常处理。

深色模式需要重新检查

把背景变黑、文字变白只是开始。次要文字、边框、链接、代码高亮和焦点状态，都需要在两种主题中分别查看。