[{"data":1,"prerenderedAt":673},["ShallowReactive",2],{"navigation_docs":3,"-advanced-migration":49,"-advanced-migration-surround":668},[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":42,"body":51,"description":662,"extension":663,"links":664,"meta":665,"navigation":248,"path":43,"seo":666,"stem":44,"__hash__":667},"docs/3.advanced/2.migration.md",{"type":52,"value":53,"toc":651},"minimark",[54,59,68,73,78,89,167,170,207,211,214,218,229,270,281,289,295,331,335,338,341,345,351,354,358,364,454,466,470,480,571,575,581,647],[55,56,58],"h2",{"id":57},"migrating-to-v4","Migrating to v4",[60,61,62,63,67],"p",{},"v4 of ",[64,65,66],"code",{},"@nuxtjs/color-mode"," requires Nuxt 3+ and drops support for Nuxt Bridge. It also introduces several breaking changes to improve the module.",[69,70,72],"h3",{"id":71},"main-changes","Main Changes",[74,75,77],"h4",{"id":76},"_1-no-default-class-suffix","1. No Default Class Suffix",[60,79,80,81,84,85,88],{},"The default ",[64,82,83],{},"classSuffix"," has been removed. If you were relying on the default ",[64,86,87],{},"-mode"," suffix, you'll need to explicitly set it in your configuration:",[90,91,96],"pre",{"className":92,"code":93,"language":94,"meta":95,"style":95},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  colorMode: {\n    classSuffix: '-mode'\n  }\n})\n","ts","",[64,97,98,122,135,152,158],{"__ignoreMap":95},[99,100,103,107,110,114,118],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"s7zQu","export",[99,108,109],{"class":105}," default",[99,111,113],{"class":112},"s2Zo4"," defineNuxtConfig",[99,115,117],{"class":116},"sTEyZ","(",[99,119,121],{"class":120},"sMK4o","{\n",[99,123,125,129,132],{"class":101,"line":124},2,[99,126,128],{"class":127},"swJcz","  colorMode",[99,130,131],{"class":120},":",[99,133,134],{"class":120}," {\n",[99,136,138,141,143,146,149],{"class":101,"line":137},3,[99,139,140],{"class":127},"    classSuffix",[99,142,131],{"class":120},[99,144,145],{"class":120}," '",[99,147,87],{"class":148},"sfazB",[99,150,151],{"class":120},"'\n",[99,153,155],{"class":101,"line":154},4,[99,156,157],{"class":120},"  }\n",[99,159,161,164],{"class":101,"line":160},5,[99,162,163],{"class":120},"}",[99,165,166],{"class":116},")\n",[60,168,169],{},"Or update your CSS classes to remove the suffix:",[90,171,175],{"className":172,"code":173,"language":174,"meta":95,"style":95},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","- .dark-mode { }\n- .light-mode { }\n+ .dark { }\n+ .light { }\n","diff",[64,176,177,185,192,200],{"__ignoreMap":95},[99,178,179,182],{"class":101,"line":102},[99,180,181],{"class":120},"-",[99,183,184],{"class":127}," .dark-mode { }\n",[99,186,187,189],{"class":101,"line":124},[99,188,181],{"class":120},[99,190,191],{"class":127}," .light-mode { }\n",[99,193,194,197],{"class":101,"line":137},[99,195,196],{"class":120},"+",[99,198,199],{"class":148}," .dark { }\n",[99,201,202,204],{"class":101,"line":154},[99,203,196],{"class":120},[99,205,206],{"class":148}," .light { }\n",[74,208,210],{"id":209},"_2-commonjs-support-dropped","2. CommonJS Support Dropped",[60,212,213],{},"The module no longer provides CommonJS builds. Ensure your project is using ESM (which is the default for Nuxt 3).",[74,215,217],{"id":216},"_3-read-only-color-mode-value","3. Read-Only Color Mode Value",[60,219,220,221,224,225,228],{},"You can no longer directly set ",[64,222,223],{},"colorMode.value",". Use ",[64,226,227],{},"colorMode.preference"," instead:",[90,230,232],{"className":172,"code":231,"language":174,"meta":95,"style":95},"\u003Cscript setup>\nconst colorMode = useColorMode()\n\n- colorMode.value = 'dark'\n+ colorMode.preference = 'dark'\n\u003C/script>\n",[64,233,234,239,244,250,257,264],{"__ignoreMap":95},[99,235,236],{"class":101,"line":102},[99,237,238],{"class":116},"\u003Cscript setup>\n",[99,240,241],{"class":101,"line":124},[99,242,243],{"class":116},"const colorMode = useColorMode()\n",[99,245,246],{"class":101,"line":137},[99,247,249],{"emptyLinePlaceholder":248},true,"\n",[99,251,252,254],{"class":101,"line":154},[99,253,181],{"class":120},[99,255,256],{"class":127}," colorMode.value = 'dark'\n",[99,258,259,261],{"class":101,"line":160},[99,260,196],{"class":120},[99,262,263],{"class":148}," colorMode.preference = 'dark'\n",[99,265,267],{"class":101,"line":266},6,[99,268,269],{"class":116},"\u003C/script>\n",[60,271,272,273,276,277,280],{},"The ",[64,274,275],{},"value"," property is now read-only and reflects the actual color mode being used (which may differ from ",[64,278,279],{},"preference"," when using system preference detection).",[74,282,284,285,288],{"id":283},"_4-removed-hid-option","4. Removed ",[64,286,287],{},"hid"," Option",[60,290,291,292,294],{},"The defunct ",[64,293,287],{}," configuration option has been removed. If you were using it in your config, simply remove it:",[90,296,298],{"className":172,"code":297,"language":174,"meta":95,"style":95},"export default defineNuxtConfig({\n  colorMode: {\n-   hid: 'nuxt-color-mode-script',\n    preference: 'system',\n  }\n})\n",[64,299,300,305,310,317,322,326],{"__ignoreMap":95},[99,301,302],{"class":101,"line":102},[99,303,304],{"class":116},"export default defineNuxtConfig({\n",[99,306,307],{"class":101,"line":124},[99,308,309],{"class":116},"  colorMode: {\n",[99,311,312,314],{"class":101,"line":137},[99,313,181],{"class":120},[99,315,316],{"class":127},"   hid: 'nuxt-color-mode-script',\n",[99,318,319],{"class":101,"line":154},[99,320,321],{"class":116},"    preference: 'system',\n",[99,323,324],{"class":101,"line":160},[99,325,157],{"class":116},[99,327,328],{"class":101,"line":266},[99,329,330],{"class":116},"})\n",[74,332,334],{"id":333},"_5-nuxt-bridge-support-dropped","5. Nuxt Bridge Support Dropped",[60,336,337],{},"Support for Nuxt Bridge has been removed. If you're still using Nuxt Bridge, you should continue using v3. Otherwise, upgrade to Nuxt 3+.",[339,340],"hr",{},[55,342,344],{"id":343},"migrating-to-v3","Migrating to v3",[60,346,347,348,350],{},"v3 of ",[64,349,66],{}," requires either Nuxt Bridge or Nuxt 3+. If you are using Nuxt 2 without Bridge, you should continue to use v2.",[55,352,72],{"id":353},"main-changes-1",[69,355,357],{"id":356},"_1-page-meta-configuration","1. Page Meta Configuration",[60,359,360,361,131],{},"The main change between Nuxt 2 → Nuxt 3+ is that you will define your color mode at the page level with ",[64,362,363],{},"definePageMeta",[90,365,367],{"className":172,"code":366,"language":174,"meta":95,"style":95},"\u003Ctemplate>\n  \u003Ch1>This page is forced with light mode\u003C/h1>\n\u003C/template>\n\n- \u003Cscript>\n- export default {\n-   colorMode: 'light',\n- }\n+ \u003Cscript setup>\n+ definePageMeta({\n+   colorMode: 'light',\n+ })\n\u003C/script>\n",[64,368,369,374,379,384,388,395,402,410,418,426,434,441,449],{"__ignoreMap":95},[99,370,371],{"class":101,"line":102},[99,372,373],{"class":116},"\u003Ctemplate>\n",[99,375,376],{"class":101,"line":124},[99,377,378],{"class":116},"  \u003Ch1>This page is forced with light mode\u003C/h1>\n",[99,380,381],{"class":101,"line":137},[99,382,383],{"class":116},"\u003C/template>\n",[99,385,386],{"class":101,"line":154},[99,387,249],{"emptyLinePlaceholder":248},[99,389,390,392],{"class":101,"line":160},[99,391,181],{"class":120},[99,393,394],{"class":127}," \u003Cscript>\n",[99,396,397,399],{"class":101,"line":266},[99,398,181],{"class":120},[99,400,401],{"class":127}," export default {\n",[99,403,405,407],{"class":101,"line":404},7,[99,406,181],{"class":120},[99,408,409],{"class":127},"   colorMode: 'light',\n",[99,411,413,415],{"class":101,"line":412},8,[99,414,181],{"class":120},[99,416,417],{"class":127}," }\n",[99,419,421,423],{"class":101,"line":420},9,[99,422,196],{"class":120},[99,424,425],{"class":148}," \u003Cscript setup>\n",[99,427,429,431],{"class":101,"line":428},10,[99,430,196],{"class":120},[99,432,433],{"class":148}," definePageMeta({\n",[99,435,437,439],{"class":101,"line":436},11,[99,438,196],{"class":120},[99,440,409],{"class":148},[99,442,444,446],{"class":101,"line":443},12,[99,445,196],{"class":120},[99,447,448],{"class":148}," })\n",[99,450,452],{"class":101,"line":451},13,[99,453,269],{"class":116},[455,456,458,459,461,462,465],"callout",{"type":457},"warning","If you are using Nuxt Bridge, you should not use ",[64,460,363],{}," but instead continue using the component option ",[64,463,464],{},"colorMode",".",[69,467,469],{"id":468},"_2-composable-api","2. Composable API",[60,471,272,472,475,476,479],{},[64,473,474],{},"$colorMode"," helper remains the same, but there is also a new composable (",[64,477,478],{},"useColorMode",") which is the recommended way of accessing color mode information.",[90,481,485],{"className":482,"code":483,"language":484,"meta":95,"style":95},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nconst colorMode = useColorMode()\n\n// Access properties\nconsole.log(colorMode.preference)\nconsole.log(colorMode.value)\n\u003C/script>\n","vue",[64,486,487,502,519,523,529,547,562],{"__ignoreMap":95},[99,488,489,492,495,499],{"class":101,"line":102},[99,490,491],{"class":120},"\u003C",[99,493,494],{"class":127},"script",[99,496,498],{"class":497},"spNyl"," setup",[99,500,501],{"class":120},">\n",[99,503,504,507,510,513,516],{"class":101,"line":124},[99,505,506],{"class":497},"const",[99,508,509],{"class":116}," colorMode ",[99,511,512],{"class":120},"=",[99,514,515],{"class":112}," useColorMode",[99,517,518],{"class":116},"()\n",[99,520,521],{"class":101,"line":137},[99,522,249],{"emptyLinePlaceholder":248},[99,524,525],{"class":101,"line":154},[99,526,528],{"class":527},"sHwdD","// Access properties\n",[99,530,531,534,536,539,542,544],{"class":101,"line":160},[99,532,533],{"class":116},"console",[99,535,465],{"class":120},[99,537,538],{"class":112},"log",[99,540,541],{"class":116},"(colorMode",[99,543,465],{"class":120},[99,545,546],{"class":116},"preference)\n",[99,548,549,551,553,555,557,559],{"class":101,"line":266},[99,550,533],{"class":116},[99,552,465],{"class":120},[99,554,538],{"class":112},[99,556,541],{"class":116},[99,558,465],{"class":120},[99,560,561],{"class":116},"value)\n",[99,563,564,567,569],{"class":101,"line":404},[99,565,566],{"class":120},"\u003C/",[99,568,494],{"class":127},[99,570,501],{"class":120},[69,572,574],{"id":573},"_3-type-imports","3. Type Imports",[60,576,577,578,465],{},"If you were directly importing color mode configuration types, note that this has been renamed to ",[64,579,580],{},"ModuleOptions",[90,582,584],{"className":92,"code":583,"language":94,"meta":95,"style":95},"// Before\nimport type { ColorModeConfig } from '@nuxtjs/color-mode'\n\n// After\nimport type { ModuleOptions } from '@nuxtjs/color-mode'\n",[64,585,586,591,617,621,626],{"__ignoreMap":95},[99,587,588],{"class":101,"line":102},[99,589,590],{"class":527},"// Before\n",[99,592,593,596,599,602,605,608,611,613,615],{"class":101,"line":124},[99,594,595],{"class":105},"import",[99,597,598],{"class":105}," type",[99,600,601],{"class":120}," {",[99,603,604],{"class":116}," ColorModeConfig",[99,606,607],{"class":120}," }",[99,609,610],{"class":105}," from",[99,612,145],{"class":120},[99,614,66],{"class":148},[99,616,151],{"class":120},[99,618,619],{"class":101,"line":137},[99,620,249],{"emptyLinePlaceholder":248},[99,622,623],{"class":101,"line":154},[99,624,625],{"class":527},"// After\n",[99,627,628,630,632,634,637,639,641,643,645],{"class":101,"line":160},[99,629,595],{"class":105},[99,631,598],{"class":105},[99,633,601],{"class":120},[99,635,636],{"class":116}," ModuleOptions",[99,638,607],{"class":120},[99,640,610],{"class":105},[99,642,145],{"class":120},[99,644,66],{"class":148},[99,646,151],{"class":120},[648,649,650],"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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"title":95,"searchDepth":124,"depth":124,"links":652},[653,656,657],{"id":57,"depth":124,"text":58,"children":654},[655],{"id":71,"depth":137,"text":72},{"id":343,"depth":124,"text":344},{"id":353,"depth":124,"text":72,"children":658},[659,660,661],{"id":356,"depth":137,"text":357},{"id":468,"depth":137,"text":469},{"id":573,"depth":137,"text":574},"Guide for migrating between major versions","md",null,{},{"title":42,"description":662},"IubwUXKg3rVpkQ-rAC_j1ePgVGqwNyiMJyl9V-rzPVQ",[669,671],{"title":38,"path":39,"stem":40,"description":670,"children":-1},"Important considerations when using Color Mode",{"title":46,"path":47,"stem":48,"description":672,"children":-1},"Learn how to contribute to Nuxt Color Mode",1770815682844]