[{"data":1,"prerenderedAt":142},["ShallowReactive",2],{"content-\u002Fdocs\u002Fthemes":3},{"id":4,"title":5,"body":6,"description":134,"extension":135,"meta":136,"navigation":137,"path":138,"seo":139,"stem":140,"__hash__":141},"content\u002Fdocs\u002Fthemes.md","主题",{"type":7,"value":8,"toc":128},"minimark",[9,12,21,25,28,63,66,86,93,96,103,106,124],[10,11,5],"h1",{"id":5},[13,14,15,16,20],"p",{},"MoriUI 的主题状态只写在根元素的 ",[17,18,19],"code",{},"data-theme"," 属性上。组件读取同一组语义 Token，因此业务页面无需为浅色和深色分别维护样式分支。",[22,23,24],"h2",{"id":24},"主题入口",[13,26,27],{},"浅色模式使用：",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-html shiki shiki-themes github-light github-dark","\u003Chtml data-theme=\"light\">\n","html","",[17,36,37],{"__ignoreMap":34},[38,39,42,46,49,53,56,60],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sVt8B","\u003C",[38,47,33],{"class":48},"s9eBZ",[38,50,52],{"class":51},"sScJk"," data-theme",[38,54,55],{"class":44},"=",[38,57,59],{"class":58},"sZZnC","\"light\"",[38,61,62],{"class":44},">\n",[13,64,65],{},"深色模式使用：",[29,67,69],{"className":31,"code":68,"language":33,"meta":34,"style":34},"\u003Chtml data-theme=\"dark\">\n",[17,70,71],{"__ignoreMap":34},[38,72,73,75,77,79,81,84],{"class":40,"line":41},[38,74,45],{"class":44},[38,76,33],{"class":48},[38,78,52],{"class":51},[38,80,55],{"class":44},[38,82,83],{"class":58},"\"dark\"",[38,85,62],{"class":44},[13,87,88,89,92],{},"不要同时维护额外的 ",[17,90,91],{},".dark"," 选择器；一个明确的根属性更容易被服务端渲染、持久化逻辑和自动化测试共同识别。",[22,94,95],{"id":95},"切换模式",[13,97,98,99,102],{},"主题切换只需要更新 ",[17,100,101],{},"document.documentElement.dataset.theme","。在 Nuxt 中，建议用客户端安全的组合式函数保存选择，并在首次渲染前恢复它，避免页面闪烁。",[22,104,105],{"id":105},"保持一致",[13,107,108,109,112,113,112,116,119,120,123],{},"页面布局优先使用 ",[17,110,111],{},"bg-background","、",[17,114,115],{},"text-foreground",[17,117,118],{},"bg-muted"," 与 ",[17,121,122],{},"text-muted-foreground"," 等语义工具类。不要在局部组件重新声明主题变量；这样新增组件时会自然继承当前模式。",[125,126,127],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":34,"searchDepth":129,"depth":129,"links":130},2,[131,132,133],{"id":24,"depth":129,"text":24},{"id":95,"depth":129,"text":95},{"id":105,"depth":129,"text":105},"使用 html[data-theme] 切换 Nova 的浅色与深色模式。","md",{},true,"\u002Fdocs\u002Fthemes",{"title":5,"description":134},"docs\u002Fthemes","XqaRybjMBrmsXKL3Yk_juOrnybykFICAurvcEOyqY2Y",1784368649990]