[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"navigation_docs":3,"-usage-basic":49,"-usage-basic-surround":626},[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":20,"body":51,"description":620,"extension":621,"links":622,"meta":623,"navigation":347,"path":21,"seo":624,"stem":22,"__hash__":625},"docs/2.usage/1.basic.md",{"type":52,"value":53,"toc":617},"minimark",[54,67,103,108,597,614],[55,56,57,58,62,63,66],"p",{},"You can access the color mode helper by either calling ",[59,60,61],"code",{},"useColorMode()"," or accessing ",[59,64,65],{},"$colorMode"," directly in your template. This helper has the following properties:",[68,69,70,81,91,97],"ul",{},[71,72,73,76,77,80],"li",{},[59,74,75],{},"preference",": Actual color-mode selected (can be ",[59,78,79],{},"'system'","), update it to change the user preferred color mode",[71,82,83,86,87,90],{},[59,84,85],{},"value",": Useful to know what color mode has been detected when ",[59,88,89],{},"$colorMode === 'system'",", you should not update it",[71,92,93,96],{},[59,94,95],{},"unknown",": Useful to know if during SSR or Generate, we need to render a placeholder",[71,98,99,102],{},[59,100,101],{},"forced",": Useful to know if the current color mode is forced by the current page (useful to hide the color picker)",[104,105,107],"h2",{"id":106},"example","Example",[109,110,116],"pre",{"className":111,"code":112,"filename":113,"language":114,"meta":115,"style":115},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Color mode: {{ $colorMode.value }}\u003C/h1>\n    \u003Cselect v-model=\"$colorMode.preference\">\n      \u003Coption value=\"system\">System\u003C/option>\n      \u003Coption value=\"light\">Light\u003C/option>\n      \u003Coption value=\"dark\">Dark\u003C/option>\n      \u003Coption value=\"sepia\">Sepia\u003C/option>\n    \u003C/select>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst colorMode = useColorMode()\n\nconsole.log(colorMode.preference)\n\u003C/script>\n\n\u003Cstyle>\nbody {\n  background-color: #fff;\n  color: rgba(0,0,0,0.8);\n}\n.dark body {\n  background-color: #091a28;\n  color: #ebf4f1;\n}\n.sepia body {\n  background-color: #f1e7d0;\n  color: #433422;\n}\n\u003C/style>\n","pages/index.vue","html","",[59,117,118,134,145,168,194,226,255,284,313,323,333,342,349,362,380,385,405,414,419,429,439,458,493,499,511,525,539,544,555,569,583,588],{"__ignoreMap":115},[119,120,123,127,131],"span",{"class":121,"line":122},"line",1,[119,124,126],{"class":125},"sMK4o","\u003C",[119,128,130],{"class":129},"swJcz","template",[119,132,133],{"class":125},">\n",[119,135,137,140,143],{"class":121,"line":136},2,[119,138,139],{"class":125},"  \u003C",[119,141,142],{"class":129},"div",[119,144,133],{"class":125},[119,146,148,151,154,157,161,164,166],{"class":121,"line":147},3,[119,149,150],{"class":125},"    \u003C",[119,152,153],{"class":129},"h1",[119,155,156],{"class":125},">",[119,158,160],{"class":159},"sTEyZ","Color mode: {{ $colorMode.value }}",[119,162,163],{"class":125},"\u003C/",[119,165,153],{"class":129},[119,167,133],{"class":125},[119,169,171,173,176,180,183,186,190,192],{"class":121,"line":170},4,[119,172,150],{"class":125},[119,174,175],{"class":129},"select",[119,177,179],{"class":178},"spNyl"," v-model",[119,181,182],{"class":125},"=",[119,184,185],{"class":125},"\"",[119,187,189],{"class":188},"sfazB","$colorMode.preference",[119,191,185],{"class":125},[119,193,133],{"class":125},[119,195,197,200,203,206,208,210,213,215,217,220,222,224],{"class":121,"line":196},5,[119,198,199],{"class":125},"      \u003C",[119,201,202],{"class":129},"option",[119,204,205],{"class":178}," value",[119,207,182],{"class":125},[119,209,185],{"class":125},[119,211,212],{"class":188},"system",[119,214,185],{"class":125},[119,216,156],{"class":125},[119,218,219],{"class":159},"System",[119,221,163],{"class":125},[119,223,202],{"class":129},[119,225,133],{"class":125},[119,227,229,231,233,235,237,239,242,244,246,249,251,253],{"class":121,"line":228},6,[119,230,199],{"class":125},[119,232,202],{"class":129},[119,234,205],{"class":178},[119,236,182],{"class":125},[119,238,185],{"class":125},[119,240,241],{"class":188},"light",[119,243,185],{"class":125},[119,245,156],{"class":125},[119,247,248],{"class":159},"Light",[119,250,163],{"class":125},[119,252,202],{"class":129},[119,254,133],{"class":125},[119,256,258,260,262,264,266,268,271,273,275,278,280,282],{"class":121,"line":257},7,[119,259,199],{"class":125},[119,261,202],{"class":129},[119,263,205],{"class":178},[119,265,182],{"class":125},[119,267,185],{"class":125},[119,269,270],{"class":188},"dark",[119,272,185],{"class":125},[119,274,156],{"class":125},[119,276,277],{"class":159},"Dark",[119,279,163],{"class":125},[119,281,202],{"class":129},[119,283,133],{"class":125},[119,285,287,289,291,293,295,297,300,302,304,307,309,311],{"class":121,"line":286},8,[119,288,199],{"class":125},[119,290,202],{"class":129},[119,292,205],{"class":178},[119,294,182],{"class":125},[119,296,185],{"class":125},[119,298,299],{"class":188},"sepia",[119,301,185],{"class":125},[119,303,156],{"class":125},[119,305,306],{"class":159},"Sepia",[119,308,163],{"class":125},[119,310,202],{"class":129},[119,312,133],{"class":125},[119,314,316,319,321],{"class":121,"line":315},9,[119,317,318],{"class":125},"    \u003C/",[119,320,175],{"class":129},[119,322,133],{"class":125},[119,324,326,329,331],{"class":121,"line":325},10,[119,327,328],{"class":125},"  \u003C/",[119,330,142],{"class":129},[119,332,133],{"class":125},[119,334,336,338,340],{"class":121,"line":335},11,[119,337,163],{"class":125},[119,339,130],{"class":129},[119,341,133],{"class":125},[119,343,345],{"class":121,"line":344},12,[119,346,348],{"emptyLinePlaceholder":347},true,"\n",[119,350,352,354,357,360],{"class":121,"line":351},13,[119,353,126],{"class":125},[119,355,356],{"class":129},"script",[119,358,359],{"class":178}," setup",[119,361,133],{"class":125},[119,363,365,368,371,373,377],{"class":121,"line":364},14,[119,366,367],{"class":178},"const",[119,369,370],{"class":159}," colorMode ",[119,372,182],{"class":125},[119,374,376],{"class":375},"s2Zo4"," useColorMode",[119,378,379],{"class":159},"()\n",[119,381,383],{"class":121,"line":382},15,[119,384,348],{"emptyLinePlaceholder":347},[119,386,388,391,394,397,400,402],{"class":121,"line":387},16,[119,389,390],{"class":159},"console",[119,392,393],{"class":125},".",[119,395,396],{"class":375},"log",[119,398,399],{"class":159},"(colorMode",[119,401,393],{"class":125},[119,403,404],{"class":159},"preference)\n",[119,406,408,410,412],{"class":121,"line":407},17,[119,409,163],{"class":125},[119,411,356],{"class":129},[119,413,133],{"class":125},[119,415,417],{"class":121,"line":416},18,[119,418,348],{"emptyLinePlaceholder":347},[119,420,422,424,427],{"class":121,"line":421},19,[119,423,126],{"class":125},[119,425,426],{"class":129},"style",[119,428,133],{"class":125},[119,430,432,436],{"class":121,"line":431},20,[119,433,435],{"class":434},"sBMFI","body",[119,437,438],{"class":125}," {\n",[119,440,442,446,449,452,455],{"class":121,"line":441},21,[119,443,445],{"class":444},"sqsOY","  background-color",[119,447,448],{"class":125},":",[119,450,451],{"class":125}," #",[119,453,454],{"class":159},"fff",[119,456,457],{"class":125},";\n",[119,459,461,464,466,469,472,476,479,481,483,485,487,490],{"class":121,"line":460},22,[119,462,463],{"class":444},"  color",[119,465,448],{"class":125},[119,467,468],{"class":375}," rgba",[119,470,471],{"class":125},"(",[119,473,475],{"class":474},"sbssI","0",[119,477,478],{"class":125},",",[119,480,475],{"class":474},[119,482,478],{"class":125},[119,484,475],{"class":474},[119,486,478],{"class":125},[119,488,489],{"class":474},"0.8",[119,491,492],{"class":125},");\n",[119,494,496],{"class":121,"line":495},23,[119,497,498],{"class":125},"}\n",[119,500,502,504,506,509],{"class":121,"line":501},24,[119,503,393],{"class":125},[119,505,270],{"class":434},[119,507,508],{"class":434}," body",[119,510,438],{"class":125},[119,512,514,516,518,520,523],{"class":121,"line":513},25,[119,515,445],{"class":444},[119,517,448],{"class":125},[119,519,451],{"class":125},[119,521,522],{"class":159},"091a28",[119,524,457],{"class":125},[119,526,528,530,532,534,537],{"class":121,"line":527},26,[119,529,463],{"class":444},[119,531,448],{"class":125},[119,533,451],{"class":125},[119,535,536],{"class":159},"ebf4f1",[119,538,457],{"class":125},[119,540,542],{"class":121,"line":541},27,[119,543,498],{"class":125},[119,545,547,549,551,553],{"class":121,"line":546},28,[119,548,393],{"class":125},[119,550,299],{"class":434},[119,552,508],{"class":434},[119,554,438],{"class":125},[119,556,558,560,562,564,567],{"class":121,"line":557},29,[119,559,445],{"class":444},[119,561,448],{"class":125},[119,563,451],{"class":125},[119,565,566],{"class":159},"f1e7d0",[119,568,457],{"class":125},[119,570,572,574,576,578,581],{"class":121,"line":571},30,[119,573,463],{"class":444},[119,575,448],{"class":125},[119,577,451],{"class":125},[119,579,580],{"class":159},"433422",[119,582,457],{"class":125},[119,584,586],{"class":121,"line":585},31,[119,587,498],{"class":125},[119,589,591,593,595],{"class":121,"line":590},32,[119,592,163],{"class":125},[119,594,426],{"class":129},[119,596,133],{"class":125},[598,599,600,601,604,605,608,609,613],"callout",{},"You can configure the ",[59,602,603],{},"colorMode.classSuffix"," option in your ",[59,606,607],{},"nuxt.config.ts"," to modify these class names. See the ",[610,611,612],"a",{"href":29},"configuration"," section for more details.",[426,615,616],{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":115,"searchDepth":136,"depth":136,"links":618},[619],{"id":106,"depth":136,"text":107},"Learn how to use the color mode composable","md",null,{},{"title":20,"description":620},"6dmUjC_hSKxy24wyFNbGp2R_pXrNoK7bSPvn3qdAaU8",[627,629],{"title":11,"path":12,"stem":13,"description":628,"children":-1},"Learn how to install and configure Nuxt Color Mode",{"title":24,"path":25,"stem":26,"description":630,"children":-1},"Learn how to force a specific color mode on a page",1770815682455]