[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"navigation_docs":3,"-usage-configuration":49,"-usage-configuration-surround":439},[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":28,"body":51,"description":432,"extension":433,"links":434,"meta":435,"navigation":436,"path":29,"seo":437,"stem":30,"__hash__":438},"docs/2.usage/3.configuration.md",{"type":52,"value":53,"toc":423},"minimark",[54,67,292,297,303,319,325,330,341,344,350,361,379,384,396,399,405,416,419],[55,56,57,58,62,63,66],"p",{},"You can configure the module by providing the ",[59,60,61],"code",{},"colorMode"," property in your ",[59,64,65],{},"nuxt.config.ts",". Here are the default options:",[68,69,74],"pre",{"className":70,"code":71,"filename":65,"language":72,"meta":73,"style":73},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxtjs/color-mode'],\n  colorMode: {\n    preference: 'system', // default value of $colorMode.preference\n    fallback: 'light', // fallback value if not system preference found\n    globalName: '__NUXT_COLOR_MODE__',\n    componentName: 'ColorScheme',\n    classPrefix: '',\n    classSuffix: '',\n    storage: 'localStorage', // or 'sessionStorage' or 'cookie'\n    storageKey: 'nuxt-color-mode'\n  }\n})\n","ts","",[59,75,76,100,128,139,162,182,199,216,229,241,261,277,283],{"__ignoreMap":73},[77,78,81,85,88,92,96],"span",{"class":79,"line":80},"line",1,[77,82,84],{"class":83},"s7zQu","export",[77,86,87],{"class":83}," default",[77,89,91],{"class":90},"s2Zo4"," defineNuxtConfig",[77,93,95],{"class":94},"sTEyZ","(",[77,97,99],{"class":98},"sMK4o","{\n",[77,101,103,107,110,113,116,120,122,125],{"class":79,"line":102},2,[77,104,106],{"class":105},"swJcz","  modules",[77,108,109],{"class":98},":",[77,111,112],{"class":94}," [",[77,114,115],{"class":98},"'",[77,117,119],{"class":118},"sfazB","@nuxtjs/color-mode",[77,121,115],{"class":98},[77,123,124],{"class":94},"]",[77,126,127],{"class":98},",\n",[77,129,131,134,136],{"class":79,"line":130},3,[77,132,133],{"class":105},"  colorMode",[77,135,109],{"class":98},[77,137,138],{"class":98}," {\n",[77,140,142,145,147,150,153,155,158],{"class":79,"line":141},4,[77,143,144],{"class":105},"    preference",[77,146,109],{"class":98},[77,148,149],{"class":98}," '",[77,151,152],{"class":118},"system",[77,154,115],{"class":98},[77,156,157],{"class":98},",",[77,159,161],{"class":160},"sHwdD"," // default value of $colorMode.preference\n",[77,163,165,168,170,172,175,177,179],{"class":79,"line":164},5,[77,166,167],{"class":105},"    fallback",[77,169,109],{"class":98},[77,171,149],{"class":98},[77,173,174],{"class":118},"light",[77,176,115],{"class":98},[77,178,157],{"class":98},[77,180,181],{"class":160}," // fallback value if not system preference found\n",[77,183,185,188,190,192,195,197],{"class":79,"line":184},6,[77,186,187],{"class":105},"    globalName",[77,189,109],{"class":98},[77,191,149],{"class":98},[77,193,194],{"class":118},"__NUXT_COLOR_MODE__",[77,196,115],{"class":98},[77,198,127],{"class":98},[77,200,202,205,207,209,212,214],{"class":79,"line":201},7,[77,203,204],{"class":105},"    componentName",[77,206,109],{"class":98},[77,208,149],{"class":98},[77,210,211],{"class":118},"ColorScheme",[77,213,115],{"class":98},[77,215,127],{"class":98},[77,217,219,222,224,227],{"class":79,"line":218},8,[77,220,221],{"class":105},"    classPrefix",[77,223,109],{"class":98},[77,225,226],{"class":98}," ''",[77,228,127],{"class":98},[77,230,232,235,237,239],{"class":79,"line":231},9,[77,233,234],{"class":105},"    classSuffix",[77,236,109],{"class":98},[77,238,226],{"class":98},[77,240,127],{"class":98},[77,242,244,247,249,251,254,256,258],{"class":79,"line":243},10,[77,245,246],{"class":105},"    storage",[77,248,109],{"class":98},[77,250,149],{"class":98},[77,252,253],{"class":118},"localStorage",[77,255,115],{"class":98},[77,257,157],{"class":98},[77,259,260],{"class":160}," // or 'sessionStorage' or 'cookie'\n",[77,262,264,267,269,271,274],{"class":79,"line":263},11,[77,265,266],{"class":105},"    storageKey",[77,268,109],{"class":98},[77,270,149],{"class":98},[77,272,273],{"class":118},"nuxt-color-mode",[77,275,276],{"class":98},"'\n",[77,278,280],{"class":79,"line":279},12,[77,281,282],{"class":98},"  }\n",[77,284,286,289],{"class":79,"line":285},13,[77,287,288],{"class":98},"}",[77,290,291],{"class":94},")\n",[293,294,296],"h2",{"id":295},"options","Options",[298,299,301],"h3",{"id":300},"preference",[59,302,300],{},[304,305,306,313],"ul",{},[307,308,309,310],"li",{},"Type: ",[59,311,312],{},"string",[307,314,315,316],{},"Default: ",[59,317,318],{},"'system'",[55,320,321,322,324],{},"Default color mode preference. ",[59,323,318],{}," is a special value that will automatically detect the color mode based on the system preferences.",[298,326,328],{"id":327},"fallback",[59,329,327],{},[304,331,332,336],{},[307,333,309,334],{},[59,335,312],{},[307,337,315,338],{},[59,339,340],{},"'light'",[55,342,343],{},"Fallback color mode value if no system preference is detected.",[298,345,347],{"id":346},"datavalue",[59,348,349],{},"dataValue",[304,351,352,356],{},[307,353,309,354],{},[59,355,312],{},[307,357,315,358],{},[59,359,360],{},"undefined",[55,362,363,364,367,368,371,372,375,376,378],{},"Optional dataset attribute to add to ",[59,365,366],{},"\u003Chtml>",". For example, if you set ",[59,369,370],{},"dataValue: 'theme'",", it will set ",[59,373,374],{},"data-theme=\"dark\""," on ",[59,377,366],{},". This is useful when using libraries like daisyUI.",[298,380,382],{"id":381},"storage",[59,383,381],{},[304,385,386,391],{},[307,387,309,388],{},[59,389,390],{},"'localStorage' | 'sessionStorage' | 'cookie'",[307,392,315,393],{},[59,394,395],{},"'localStorage'",[55,397,398],{},"Storage type to persist the color mode preference.",[298,400,402],{"id":401},"storagekey",[59,403,404],{},"storageKey",[304,406,407,411],{},[307,408,309,409],{},[59,410,312],{},[307,412,315,413],{},[59,414,415],{},"'nuxt-color-mode'",[55,417,418],{},"Storage key name.",[420,421,422],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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":73,"searchDepth":102,"depth":102,"links":424},[425],{"id":295,"depth":102,"text":296,"children":426},[427,428,429,430,431],{"id":300,"depth":130,"text":300},{"id":327,"depth":130,"text":327},{"id":346,"depth":130,"text":349},{"id":381,"depth":130,"text":381},{"id":401,"depth":130,"text":404},"Configure the Color Mode module","md",null,{},true,{"title":28,"description":432},"cxCEQWdQ5-b7vscuo77j5NDaDVqsPfzh6GiNSM0rnBU",[440,442],{"title":24,"path":25,"stem":26,"description":441,"children":-1},"Learn how to force a specific color mode on a page",{"title":38,"path":39,"stem":40,"description":443,"children":-1},"Important considerations when using Color Mode",1770815682455]