一个主题按钮的功能很小,但它影响着用户每次打开网站时的第一眼。

先尊重系统设置

没有手动选择时,可以根据系统的明暗偏好初始化界面。初始化应当尽早执行,减少页面出现之后再改变颜色的闪烁。

把选择保存在本地

try {
  localStorage.setItem('lucas-theme', 'dark');
} catch {
  // 无法写入时,本次页面的切换仍然可以正常工作。
}

本地存储可能因为浏览器设置而不可用。保留一个合理的默认值,让保存失败只影响记忆,不影响当下的交互。

让按钮说清楚下一步

按钮的可访问名称可以是“切换到暗色主题”或“切换到浅色主题”。与用户接下来会得到的结果保持一致,操作就更容易理解。