[{"data":1,"prerenderedAt":230},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":49,"-getting-started-installation-surround":225},[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":11,"body":51,"description":218,"extension":219,"links":220,"meta":221,"navigation":222,"path":12,"seo":223,"stem":13,"__hash__":224},"docs/1.getting-started/2.installation.md",{"type":52,"value":53,"toc":215},"minimark",[54,77,82,89,120,134,200,211],[55,56,57,58,62,63,70,71,76],"callout",{},"The current version of ",[59,60,61],"code",{},"@nuxtjs/color-mode"," is compatible with ",[64,65,69],"a",{"href":66,"rel":67},"https://nuxt.com",[68],"nofollow","Nuxt 3+",". If you're looking for the previous version of this module, check out ",[64,72,75],{"href":73,"rel":74},"https://v2.color-mode.nuxtjs.org/",[68],"v2.color-mode.nuxtjs.org",".",[78,79,81],"h2",{"id":80},"setup","Setup",[83,84,85,86,88],"p",{},"Add ",[59,87,61],{}," dependency to your project:",[90,91,96],"pre",{"className":92,"code":93,"language":94,"meta":95,"style":95},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxt module add color-mode\n","bash","",[59,97,98],{"__ignoreMap":95},[99,100,103,107,111,114,117],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"sBMFI","npx",[99,108,110],{"class":109},"sfazB"," nuxt",[99,112,113],{"class":109}," module",[99,115,116],{"class":109}," add",[99,118,119],{"class":109}," color-mode\n",[83,121,122,123,125,126,129,130,133],{},"Then, add ",[59,124,61],{}," to the ",[59,127,128],{},"modules"," section of your ",[59,131,132],{},"nuxt.config.ts",":",[90,135,139],{"className":136,"code":137,"filename":132,"language":138,"meta":95,"style":95},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/color-mode'\n  ]\n})\n","ts",[59,140,141,162,174,185,191],{"__ignoreMap":95},[99,142,143,147,150,154,158],{"class":101,"line":102},[99,144,146],{"class":145},"s7zQu","export",[99,148,149],{"class":145}," default",[99,151,153],{"class":152},"s2Zo4"," defineNuxtConfig",[99,155,157],{"class":156},"sTEyZ","(",[99,159,161],{"class":160},"sMK4o","{\n",[99,163,165,169,171],{"class":101,"line":164},2,[99,166,168],{"class":167},"swJcz","  modules",[99,170,133],{"class":160},[99,172,173],{"class":156}," [\n",[99,175,177,180,182],{"class":101,"line":176},3,[99,178,179],{"class":160},"    '",[99,181,61],{"class":109},[99,183,184],{"class":160},"'\n",[99,186,188],{"class":101,"line":187},4,[99,189,190],{"class":156},"  ]\n",[99,192,194,197],{"class":101,"line":193},5,[99,195,196],{"class":160},"}",[99,198,199],{"class":156},")\n",[83,201,202,203,206,207,210],{},"You are ready to start using color mode in your app with ",[59,204,205],{},".dark"," and ",[59,208,209],{},".light"," classes ✨",[212,213,214],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}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}",{"title":95,"searchDepth":164,"depth":164,"links":216},[217],{"id":80,"depth":164,"text":81},"Learn how to install and configure Nuxt Color Mode","md",null,{},true,{"title":11,"description":218},"BmWKYsZXOgzvCIUOvlB82wfRSRuXAx54_utNiqXHG5E",[226,228],{"title":5,"path":6,"stem":7,"description":227,"children":-1},"Dark and light mode with auto detection made easy with Nuxt 🌗",{"title":20,"path":21,"stem":22,"description":229,"children":-1},"Learn how to use the color mode composable",1770815682455]