[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"content-/blog/dark-mode-support":3,"related-blog":208},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":202,"_id":203,"_source":204,"_file":205,"_stem":206,"_extension":207},"/blog/dark-mode-support","blog",false,"","深色模式支持","全新的深色模式，保护眼睛，提升夜间使用体验","深色模式支持, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":190},"root",[18,26,32,42,47,55,60,68,73,78,84,89,94,132,138,146,151,159,163,168],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","深色模式（Dark Mode）支持在视觉层面和可访问性层面都需谨慎设计。本文列出实现策略与注意事项。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"实现方式",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"使用 CSS 变量或媒体查询（prefers-color-scheme）实现主题切换。",{"type":19,"tag":27,"props":43,"children":45},{"id":44},"视觉与可访问性",[46],{"type":24,"value":44},{"type":19,"tag":33,"props":48,"children":49},{},[50],{"type":19,"tag":37,"props":51,"children":52},{},[53],{"type":24,"value":54},"确保文本与背景对比度在深色模式下仍然满足可读性标准，避免纯黑背景与高饱和色组合。",{"type":19,"tag":27,"props":56,"children":58},{"id":57},"工程实践",[59],{"type":24,"value":57},{"type":19,"tag":33,"props":61,"children":62},{},[63],{"type":19,"tag":37,"props":64,"children":65},{},[66],{"type":24,"value":67},"提供主题切换开关并保存用户偏好；支持自动跟随系统首选项与手动覆盖。",{"type":19,"tag":27,"props":69,"children":71},{"id":70},"结论",[72],{"type":24,"value":70},{"type":19,"tag":20,"props":74,"children":75},{},[76],{"type":24,"value":77},"深色模式应作为设计系统的一等公民，保证在不同主题下的可访问性与视觉一致性。",{"type":19,"tag":79,"props":80,"children":82},"h2",{"id":81},"初步纲要",[83],{"type":24,"value":81},{"type":19,"tag":20,"props":85,"children":86},{},[87],{"type":24,"value":88},"暗色模式支持不仅是配色切换，更涉及图像、阴影与对比度的整体适配。本文给出在模板与编辑器中实现暗色模式的工程方案与可访问性建议。",{"type":19,"tag":79,"props":90,"children":92},{"id":91},"实现要点",[93],{"type":24,"value":91},{"type":19,"tag":33,"props":95,"children":96},{},[97,119],{"type":19,"tag":37,"props":98,"children":99},{},[100,102,109,111,117],{"type":24,"value":101},"使用 CSS 变量抽象语义颜色（",{"type":19,"tag":103,"props":104,"children":106},"code",{"className":105},[],[107],{"type":24,"value":108},"--bg-primary",{"type":24,"value":110},"、",{"type":19,"tag":103,"props":112,"children":114},{"className":113},[],[115],{"type":24,"value":116},"--text-primary",{"type":24,"value":118},"），并为浅色/暗色主题提供各自值。",{"type":19,"tag":37,"props":120,"children":121},{},[122,124,130],{"type":24,"value":123},"利用 ",{"type":19,"tag":103,"props":125,"children":127},{"className":126},[],[128],{"type":24,"value":129},"prefers-color-scheme",{"type":24,"value":131}," 提供默认主题，并允许用户在编辑器中覆盖主题选择。",{"type":19,"tag":79,"props":133,"children":135},{"id":134},"图像与-asset-适配",[136],{"type":24,"value":137},"图像与 Asset 适配",{"type":19,"tag":33,"props":139,"children":140},{},[141],{"type":19,"tag":37,"props":142,"children":143},{},[144],{"type":24,"value":145},"对图片和图标提供暗色版本或使用 CSS filter/overlay 以确保在暗色背景下依然清晰。",{"type":19,"tag":79,"props":147,"children":149},{"id":148},"对比度与可访问性",[150],{"type":24,"value":148},{"type":19,"tag":33,"props":152,"children":153},{},[154],{"type":19,"tag":37,"props":155,"children":156},{},[157],{"type":24,"value":158},"暗色主题中需保证文本与背景的对比度满足 WCAG 要求；监控不同主题下的对比度并在生成时验证。",{"type":19,"tag":160,"props":161,"children":162},"hr",{},[],{"type":19,"tag":20,"props":164,"children":165},{},[166],{"type":24,"value":167},"相关链接：",{"type":19,"tag":33,"props":169,"children":170},{},[171,181],{"type":19,"tag":37,"props":172,"children":173},{},[174],{"type":19,"tag":175,"props":176,"children":178},"a",{"href":177},"/blog",[179],{"type":24,"value":180},"返回博客分类",{"type":19,"tag":37,"props":182,"children":183},{},[184],{"type":19,"tag":175,"props":185,"children":187},{"href":186},"/blog/topic/multi-agent-system",[188],{"type":24,"value":189},"查看热门话题",{"title":7,"searchDepth":191,"depth":191,"links":192},3,[193,194,195,196,197,199,200,201],{"id":29,"depth":191,"text":29},{"id":44,"depth":191,"text":44},{"id":57,"depth":191,"text":57},{"id":70,"depth":191,"text":70},{"id":81,"depth":198,"text":81},2,{"id":91,"depth":198,"text":91},{"id":134,"depth":198,"text":137},{"id":148,"depth":198,"text":148},"markdown","content:blog:dark-mode-support.md","content","blog/dark-mode-support.md","blog/dark-mode-support","md",[209,217,225],{"_path":210,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":211,"description":212,"keywords":213,"author":11,"date":12,"category":13,"image":14,"_type":202,"_id":214,"_source":204,"_file":215,"_stem":216,"_extension":207},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":218,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":219,"description":220,"keywords":221,"author":11,"date":12,"category":13,"image":14,"_type":202,"_id":222,"_source":204,"_file":223,"_stem":224,"_extension":207},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":226,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":227,"description":228,"keywords":229,"author":11,"date":12,"category":13,"image":14,"_type":202,"_id":230,"_source":204,"_file":231,"_stem":232,"_extension":207},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945286130]