[{"data":1,"prerenderedAt":95},["ShallowReactive",2],{"content:\u002Farticles\u002Fdark-mode":3,"surround:\u002Farticles\u002Fdark-mode":83},{"id":4,"title":5,"body":6,"categories":59,"date":61,"description":62,"draft":63,"extension":64,"image":65,"meta":66,"navigation":68,"path":69,"permalink":69,"published":65,"readingTime":70,"recommend":65,"references":65,"seo":75,"sitemap":76,"stem":77,"tags":78,"type":81,"updated":65,"__hash__":82},"content\u002Fposts\u002F2026\u002Fdark-mode.md","深色模式，应该由读者决定",{"type":7,"value":8,"toc":52},"minimark",[9,16,19,23,26,29,32,43,46,49],[10,11,12],"blockquote",{},[13,14,15],"p",{},"本文为 mieka 博客的原创示例内容，可替换为自己的文章。",[13,17,18],{},"主题是阅读偏好的一部分。有人喜欢明亮的页面，有人习惯夜间阅读，也有人希望网站始终跟随设备设置。",[20,21,22],"h2",{"id":22},"三种选择",[13,24,25],{},"浅色、跟随系统和深色分别对应明确的需求。默认跟随系统，手动选择后保留偏好，比每次访问都要求重新设置更自然。",[20,27,28],{"id":28},"在第一帧确定主题",[13,30,31],{},"将少量主题初始化逻辑放在页面头部，可以在正文绘制之前读取已保存的偏好。读取失败时，仍然用系统配色作为后备。",[33,34,40],"pre",{"className":35,"code":37,"language":38,"meta":39},[36],"language-js","const preference = localStorage.getItem('theme') || 'system';\nconst dark = preference === 'dark' || (\n  preference === 'system' &&\n  matchMedia('(prefers-color-scheme: dark)').matches\n);\ndocument.documentElement.dataset.theme = dark ? 'dark' : 'light';\n","js","",[41,42,37],"code",{"__ignoreMap":39},[13,44,45],{},"生产代码还要为本地存储不可用的情况加上异常处理。",[20,47,48],{"id":48},"深色模式需要重新检查",[13,50,51],{},"把背景变黑、文字变白只是开始。次要文字、边框、链接、代码高亮和焦点状态，都需要在两种主题中分别查看。",{"title":39,"searchDepth":53,"depth":53,"links":54},4,[55,57,58],{"id":22,"depth":56,"text":22},2,{"id":28,"depth":56,"text":28},{"id":48,"depth":56,"text":48},[60],"开发","2026-10-12","跟随系统，也保留手动选择。关于主题切换、首次加载和阅读对比度的笔记。",false,"md",null,{"slots":67},{},true,"\u002Farticles\u002Fdark-mode",{"text":71,"minutes":72,"time":73,"words":74},"2 min read",1.39,83400,278,{"title":5,"description":62},{"loc":69},"posts\u002F2026\u002Fdark-mode",[79,80],"前端","用户体验","tech","xsGkuDy-7oWElwB-QSWt65KzdaWRIN6VXKmEjoOFL5I",[84,89],{"title":85,"path":86,"stem":87,"date":88,"type":81,"children":-1},"一份以后还能看懂的技术笔记","\u002Farticles\u002Fgood-notes","posts\u002F2026\u002Fgood-notes","2026-09-26",{"title":90,"path":91,"stem":92,"date":93,"type":94,"children":-1},"周末，去有风的地方","\u002Farticles\u002Fa-windy-weekend","posts\u002F2026\u002Fa-windy-weekend","2026-10-19","story",1793799126362]