一个主题按钮的功能很小,但它影响着用户每次打开网站时的第一眼。
先尊重系统设置
没有手动选择时,可以根据系统的明暗偏好初始化界面。初始化应当尽早执行,减少页面出现之后再改变颜色的闪烁。
把选择保存在本地
try {
localStorage.setItem('lucas-theme', 'dark');
} catch {
// 无法写入时,本次页面的切换仍然可以正常工作。
}
本地存储可能因为浏览器设置而不可用。保留一个合理的默认值,让保存失败只影响记忆,不影响当下的交互。
让按钮说清楚下一步
按钮的可访问名称可以是“切换到暗色主题”或“切换到浅色主题”。与用户接下来会得到的结果保持一致,操作就更容易理解。