[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"navigation_docs":3,"-usage-force-mode":49,"-usage-force-mode-surround":224},[4,14,32,45],{"title":5,"path":6,"stem":7,"children":8},"Introduction","/getting-started","1.getting-started/1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":31},"Usage","/usage","2.usage",[19,23,27],{"title":20,"path":21,"stem":22},"Basic Usage","/usage/basic","2.usage/1.basic",{"title":24,"path":25,"stem":26},"Force Color Mode","/usage/force-mode","2.usage/2.force-mode",{"title":28,"path":29,"stem":30},"Configuration","/usage/configuration","2.usage/3.configuration",false,{"title":33,"path":34,"stem":35,"children":36,"page":31},"Advanced","/advanced","3.advanced",[37,41],{"title":38,"path":39,"stem":40},"Caveats","/advanced/caveats","3.advanced/1.caveats",{"title":42,"path":43,"stem":44},"Migration Guide","/advanced/migration","3.advanced/2.migration",{"title":46,"path":47,"stem":48},"Contributing","/contributing","4.contributing",{"id":50,"title":24,"body":51,"description":218,"extension":219,"links":220,"meta":221,"navigation":130,"path":25,"seo":222,"stem":26,"__hash__":223},"docs/2.usage/2.force-mode.md",{"type":52,"value":53,"toc":216},"minimark",[54,67,197,204,212],[55,56,57,58,62,63,66],"p",{},"You can force the color mode at the page level by setting the ",[59,60,61],"code",{},"colorMode"," property using ",[59,64,65],{},"definePageMeta",":",[68,69,75],"pre",{"className":70,"code":71,"filename":72,"language":73,"meta":74,"style":74},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Ch1>This page is forced with light mode\u003C/h1>\n\u003C/template>\n\n\u003Cscript setup>\ndefinePageMeta({\n  colorMode: 'light',\n})\n\u003C/script>\n","pages/light.vue","html","",[59,76,77,93,116,125,132,146,158,179,188],{"__ignoreMap":74},[78,79,82,86,90],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sMK4o","\u003C",[78,87,89],{"class":88},"swJcz","template",[78,91,92],{"class":84},">\n",[78,94,96,99,102,105,109,112,114],{"class":80,"line":95},2,[78,97,98],{"class":84},"  \u003C",[78,100,101],{"class":88},"h1",[78,103,104],{"class":84},">",[78,106,108],{"class":107},"sTEyZ","This page is forced with light mode",[78,110,111],{"class":84},"\u003C/",[78,113,101],{"class":88},[78,115,92],{"class":84},[78,117,119,121,123],{"class":80,"line":118},3,[78,120,111],{"class":84},[78,122,89],{"class":88},[78,124,92],{"class":84},[78,126,128],{"class":80,"line":127},4,[78,129,131],{"emptyLinePlaceholder":130},true,"\n",[78,133,135,137,140,144],{"class":80,"line":134},5,[78,136,85],{"class":84},[78,138,139],{"class":88},"script",[78,141,143],{"class":142},"spNyl"," setup",[78,145,92],{"class":84},[78,147,149,152,155],{"class":80,"line":148},6,[78,150,65],{"class":151},"s2Zo4",[78,153,154],{"class":107},"(",[78,156,157],{"class":84},"{\n",[78,159,161,164,166,169,173,176],{"class":80,"line":160},7,[78,162,163],{"class":88},"  colorMode",[78,165,66],{"class":84},[78,167,168],{"class":84}," '",[78,170,172],{"class":171},"sfazB","light",[78,174,175],{"class":84},"'",[78,177,178],{"class":84},",\n",[78,180,182,185],{"class":80,"line":181},8,[78,183,184],{"class":84},"}",[78,186,187],{"class":107},")\n",[78,189,191,193,195],{"class":80,"line":190},9,[78,192,111],{"class":84},[78,194,139],{"class":88},[78,196,92],{"class":84},[55,198,199,200,203],{},"This feature is perfect for implementing dark mode to a website incrementally by setting the not-ready pages to ",[59,201,202],{},"colorMode: 'light'",".",[205,206,207,208,211],"callout",{},"We recommend to hide or disable the color mode picker on the page since it won't be able to change the current page color mode, using ",[59,209,210],{},"$colorMode.forced"," value.",[213,214,215],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":74,"searchDepth":95,"depth":95,"links":217},[],"Learn how to force a specific color mode on a page","md",null,{},{"title":24,"description":218},"Xf6eaoUunx_D0k2PXsqSoOwkspl4PiUK4LtJHs-A7hw",[225,227],{"title":20,"path":21,"stem":22,"description":226,"children":-1},"Learn how to use the color mode composable",{"title":28,"path":29,"stem":30,"description":228,"children":-1},"Configure the Color Mode module",1770815682455]