[{"data":1,"prerenderedAt":280},["ShallowReactive",2],{"navigation_docs":3,"-advanced-caveats":49,"-advanced-caveats-surround":275},[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":38,"body":51,"description":268,"extension":269,"links":270,"meta":271,"navigation":272,"path":39,"seo":273,"stem":40,"__hash__":274},"docs/3.advanced/1.caveats.md",{"type":52,"value":53,"toc":263},"minimark",[54,71,76,90,95,259],[55,56,57,58,62,63,66,67,70],"p",{},"When ",[59,60,61],"code",{},"$colorMode.preference"," is set to ",[59,64,65],{},"'system'",", using ",[59,68,69],{},"$colorMode"," in your Vue template will lead to a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page since they are detected on client-side.",[72,73,75],"h2",{"id":74},"avoiding-the-flash","Avoiding the Flash",[55,77,78,79,81,82,85,86,89],{},"To avoid the flash, you have to guard any rendering path which depends on ",[59,80,69],{}," with ",[59,83,84],{},"$colorMode.unknown"," to render a placeholder or use the ",[59,87,88],{},"\u003CColorScheme>"," component.",[91,92,94],"h3",{"id":93},"example","Example",[96,97,102],"pre",{"className":98,"code":99,"language":100,"meta":101,"style":101},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CColorScheme placeholder=\"...\" tag=\"span\">\n    Color mode: \u003Cb>{{ $colorMode.preference }}\u003C/b>\n    \u003Cspan v-if=\"$colorMode.preference === 'system'\">\n      (\u003Ci>{{ $colorMode.value }}\u003C/i> mode detected)\n    \u003C/span>\n  \u003C/ColorScheme>\n\u003C/template>\n","vue","",[59,103,104,120,158,183,205,230,240,250],{"__ignoreMap":101},[105,106,109,113,117],"span",{"class":107,"line":108},"line",1,[105,110,112],{"class":111},"sMK4o","\u003C",[105,114,116],{"class":115},"swJcz","template",[105,118,119],{"class":111},">\n",[105,121,123,126,129,133,136,139,143,145,148,150,152,154,156],{"class":107,"line":122},2,[105,124,125],{"class":111},"  \u003C",[105,127,128],{"class":115},"ColorScheme",[105,130,132],{"class":131},"spNyl"," placeholder",[105,134,135],{"class":111},"=",[105,137,138],{"class":111},"\"",[105,140,142],{"class":141},"sfazB","...",[105,144,138],{"class":111},[105,146,147],{"class":131}," tag",[105,149,135],{"class":111},[105,151,138],{"class":111},[105,153,105],{"class":141},[105,155,138],{"class":111},[105,157,119],{"class":111},[105,159,161,165,167,170,173,176,179,181],{"class":107,"line":160},3,[105,162,164],{"class":163},"sTEyZ","    Color mode: ",[105,166,112],{"class":111},[105,168,169],{"class":115},"b",[105,171,172],{"class":111},">",[105,174,175],{"class":163},"{{ $colorMode.preference }}",[105,177,178],{"class":111},"\u003C/",[105,180,169],{"class":115},[105,182,119],{"class":111},[105,184,186,189,191,194,196,198,201,203],{"class":107,"line":185},4,[105,187,188],{"class":111},"    \u003C",[105,190,105],{"class":115},[105,192,193],{"class":131}," v-if",[105,195,135],{"class":111},[105,197,138],{"class":111},[105,199,200],{"class":141},"$colorMode.preference === 'system'",[105,202,138],{"class":111},[105,204,119],{"class":111},[105,206,208,211,213,216,218,221,223,225,227],{"class":107,"line":207},5,[105,209,210],{"class":163},"      (",[105,212,112],{"class":111},[105,214,215],{"class":115},"i",[105,217,172],{"class":111},[105,219,220],{"class":163},"{{ $colorMode.value }}",[105,222,178],{"class":111},[105,224,215],{"class":115},[105,226,172],{"class":111},[105,228,229],{"class":163}," mode detected)\n",[105,231,233,236,238],{"class":107,"line":232},6,[105,234,235],{"class":111},"    \u003C/",[105,237,105],{"class":115},[105,239,119],{"class":111},[105,241,243,246,248],{"class":107,"line":242},7,[105,244,245],{"class":111},"  \u003C/",[105,247,128],{"class":115},[105,249,119],{"class":111},[105,251,253,255,257],{"class":107,"line":252},8,[105,254,178],{"class":111},[105,256,116],{"class":115},[105,258,119],{"class":111},[260,261,262],"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":101,"searchDepth":122,"depth":122,"links":264},[265],{"id":74,"depth":122,"text":75,"children":266},[267],{"id":93,"depth":160,"text":94},"Important considerations when using Color Mode","md",null,{},true,{"title":38,"description":268},"TilI3LuKIZl7r09K5Y1bMbqXmWQI91K-l_gyRIWIpgU",[276,278],{"title":28,"path":29,"stem":30,"description":277,"children":-1},"Configure the Color Mode module",{"title":42,"path":43,"stem":44,"description":279,"children":-1},"Guide for migrating between major versions",1770815682844]