[{"data":1,"prerenderedAt":619},["ShallowReactive",2],{"navigation_docs":3,"-examples-theming-and-dark-mode":170,"-examples-theming-and-dark-mode-surround":614},[4,30,110,150,155],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Migrate from 2.x","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F4.migration","i-lucide-arrow-right-left",{"title":31,"path":32,"stem":33,"children":34,"page":6},"Essentials","\u002Fessentials","2.essentials",[35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],{"title":36,"path":37,"stem":38,"icon":39},"Selection modes","\u002Fessentials\u002Fselection-modes","2.essentials\u002F01.selection-modes","i-lucide-mouse-pointer-click",{"title":41,"path":42,"stem":43,"icon":44},"Multiple calendars","\u002Fessentials\u002Fmultiple-calendars","2.essentials\u002F02.multiple-calendars","i-lucide-columns-2",{"title":46,"path":47,"stem":48,"icon":49},"Time picker","\u002Fessentials\u002Ftime-picker","2.essentials\u002F03.time-picker","i-lucide-clock",{"title":51,"path":52,"stem":53,"icon":54},"Limits and availability","\u002Fessentials\u002Flimits-and-availability","2.essentials\u002F04.limits-and-availability","i-lucide-ban",{"title":56,"path":57,"stem":58,"icon":59},"Marking","\u002Fessentials\u002Fmarking","2.essentials\u002F05.marking","i-lucide-bookmark",{"title":61,"path":62,"stem":63,"icon":64},"Layout and names","\u002Fessentials\u002Flayout-and-names","2.essentials\u002F06.layout-and-names","i-lucide-layout-template",{"title":66,"path":67,"stem":68,"icon":69},"Theming","\u002Fessentials\u002Ftheming","2.essentials\u002F07.theming","i-lucide-palette",{"title":71,"path":72,"stem":73,"icon":74},"Keyboard","\u002Fessentials\u002Fkeyboard","2.essentials\u002F08.keyboard","i-lucide-keyboard",{"title":76,"path":77,"stem":78,"icon":79},"Typeable input","\u002Fessentials\u002Ftypeable-input","2.essentials\u002F09.typeable-input","i-lucide-text-cursor-input",{"title":81,"path":82,"stem":83,"icon":84},"Locale and labels","\u002Fessentials\u002Flocale","2.essentials\u002F10.locale","i-lucide-languages",{"title":86,"path":87,"stem":88,"icon":89},"Presets","\u002Fessentials\u002Fpresets","2.essentials\u002F11.presets","i-lucide-zap",{"title":91,"path":92,"stem":93,"icon":94},"Accessibility","\u002Fessentials\u002Faccessibility","2.essentials\u002F12.accessibility","i-lucide-accessibility",{"title":96,"path":97,"stem":98,"icon":99},"Props","\u002Fessentials\u002Fprops","2.essentials\u002F13.props","i-lucide-list",{"title":101,"path":102,"stem":103,"icon":104},"Events","\u002Fessentials\u002Fevents","2.essentials\u002F14.events","i-lucide-radio",{"title":106,"path":107,"stem":108,"icon":109},"Slots","\u002Fessentials\u002Fslots","2.essentials\u002F15.slots","i-lucide-puzzle",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":6},"Examples","i-lucide-layout-grid","\u002Fexamples","3.examples",[116,119,122,126,129,132,136,139,143,146],{"title":36,"path":117,"stem":118,"icon":39},"\u002Fexamples\u002Fselection-modes","3.examples\u002F01.selection-modes",{"title":41,"path":120,"stem":121,"icon":44},"\u002Fexamples\u002Fmultiple-calendars","3.examples\u002F02.multiple-calendars",{"title":123,"path":124,"stem":125,"icon":79},"Modal and typeable inputs","\u002Fexamples\u002Fmodal-and-inputs","3.examples\u002F03.modal-and-inputs",{"title":46,"path":127,"stem":128,"icon":49},"\u002Fexamples\u002Ftime-picker","3.examples\u002F04.time-picker",{"title":51,"path":130,"stem":131,"icon":54},"\u002Fexamples\u002Flimits-and-availability","3.examples\u002F05.limits-and-availability",{"title":133,"path":134,"stem":135,"icon":59},"Marking and layout","\u002Fexamples\u002Fmarking","3.examples\u002F06.marking",{"title":106,"path":137,"stem":138,"icon":109},"\u002Fexamples\u002Fslots","3.examples\u002F07.slots",{"title":140,"path":141,"stem":142,"icon":89},"Range presets","\u002Fexamples\u002Fpresets","3.examples\u002F08.presets",{"title":81,"path":144,"stem":145,"icon":84},"\u002Fexamples\u002Flocale","3.examples\u002F09.locale",{"title":147,"path":148,"stem":149,"icon":69},"Theming and dark mode","\u002Fexamples\u002Ftheming-and-dark-mode","3.examples\u002F10.theming-and-dark-mode",{"title":151,"path":152,"stem":153,"icon":154},"Playground","\u002Fplayground","4.playground","i-lucide-sliders-horizontal",{"title":156,"path":157,"stem":158,"children":159,"page":6},"Community","\u002Fcommunity","5.community",[160,165],{"title":161,"path":162,"stem":163,"icon":164},"Contributing","\u002Fcommunity\u002Fcontributing","5.community\u002F1.contributing","i-lucide-git-pull-request",{"title":166,"path":167,"stem":168,"icon":169},"Changelog","\u002Fcommunity\u002Fchangelog","5.community\u002F2.changelog","i-lucide-history",{"id":171,"title":147,"body":172,"description":607,"extension":608,"links":609,"meta":610,"navigation":611,"path":148,"seo":612,"stem":149,"__hash__":613},"docs\u002F3.examples\u002F10.theming-and-dark-mode.md",{"type":173,"value":174,"toc":601},"minimark",[175,180,195,246,249,404,408,420,531,535,542,587,591,598],[176,177,179],"h2",{"id":178},"dark-mode","Dark mode",[181,182,183,187,188,191,192,194],"p",{},[184,185,186],"code",{},"isDark"," adds the ",[184,189,190],{},"vfc-dark"," class and the dark token values. The calendar below is always dark. Every other demo on this site passes ",[184,193,186],{}," from the site color mode, so toggle the site theme in the header to see them follow.",[196,197,199],"calendar-demo",{":config":198},"{\"isDateRange\":true,\"isDark\":true}",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFunctionalCalendar v-model=\"value\" is-date-range is-dark \u002F>\n","vue","",[184,207,208],{"__ignoreMap":205},[209,210,213,217,221,225,228,231,235,237,240,243],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"sMK4o","\u003C",[209,218,220],{"class":219},"swJcz","FunctionalCalendar",[209,222,224],{"class":223},"spNyl"," v-model",[209,226,227],{"class":215},"=",[209,229,230],{"class":215},"\"",[209,232,234],{"class":233},"sTEyZ","value",[209,236,230],{"class":215},[209,238,239],{"class":223}," is-date-range",[209,241,242],{"class":223}," is-dark",[209,244,245],{"class":215}," \u002F>\n",[181,247,248],{},"To follow the site theme, bind it to your color mode.",[200,250,252],{"className":202,"code":251,"language":204,"meta":205,"style":205},"\u003Cscript setup>\nconst colorMode = useColorMode()\nconst isDark = computed(() => colorMode.value === 'dark')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFunctionalCalendar v-model=\"value\" is-date-range :is-dark=\"isDark\" \u002F>\n\u003C\u002Ftemplate>\n",[184,253,254,267,285,332,342,349,359,395],{"__ignoreMap":205},[209,255,256,258,261,264],{"class":211,"line":212},[209,257,216],{"class":215},[209,259,260],{"class":219},"script",[209,262,263],{"class":223}," setup",[209,265,266],{"class":215},">\n",[209,268,270,273,276,278,282],{"class":211,"line":269},2,[209,271,272],{"class":223},"const",[209,274,275],{"class":233}," colorMode ",[209,277,227],{"class":215},[209,279,281],{"class":280},"s2Zo4"," useColorMode",[209,283,284],{"class":233},"()\n",[209,286,288,290,293,295,298,301,304,307,310,313,316,319,322,326,329],{"class":211,"line":287},3,[209,289,272],{"class":223},[209,291,292],{"class":233}," isDark ",[209,294,227],{"class":215},[209,296,297],{"class":280}," computed",[209,299,300],{"class":233},"(",[209,302,303],{"class":215},"()",[209,305,306],{"class":223}," =>",[209,308,309],{"class":233}," colorMode",[209,311,312],{"class":215},".",[209,314,315],{"class":233},"value ",[209,317,318],{"class":215},"===",[209,320,321],{"class":215}," '",[209,323,325],{"class":324},"sfazB","dark",[209,327,328],{"class":215},"'",[209,330,331],{"class":233},")\n",[209,333,335,338,340],{"class":211,"line":334},4,[209,336,337],{"class":215},"\u003C\u002F",[209,339,260],{"class":219},[209,341,266],{"class":215},[209,343,345],{"class":211,"line":344},5,[209,346,348],{"emptyLinePlaceholder":347},true,"\n",[209,350,352,354,357],{"class":211,"line":351},6,[209,353,216],{"class":215},[209,355,356],{"class":219},"template",[209,358,266],{"class":215},[209,360,362,365,367,369,371,373,375,377,379,382,385,387,389,391,393],{"class":211,"line":361},7,[209,363,364],{"class":215},"  \u003C",[209,366,220],{"class":219},[209,368,224],{"class":223},[209,370,227],{"class":215},[209,372,230],{"class":215},[209,374,234],{"class":233},[209,376,230],{"class":215},[209,378,239],{"class":223},[209,380,381],{"class":215}," :",[209,383,384],{"class":223},"is-dark",[209,386,227],{"class":215},[209,388,230],{"class":215},[209,390,186],{"class":233},[209,392,230],{"class":215},[209,394,245],{"class":215},[209,396,398,400,402],{"class":211,"line":397},8,[209,399,337],{"class":215},[209,401,356],{"class":219},[209,403,266],{"class":215},[176,405,407],{"id":406},"tokens","Tokens",[181,409,410,411,414,415,419],{},"Set a ",[184,412,413],{},"--vfc-*"," custom property on the calendar or on any ancestor. The buttons below change the tokens of a wrapper and the calendar updates at once. See the ",[416,417,418],"a",{"href":67},"theming guide"," for the full token table.",[421,422,423],"calendar-theme-demo",{},[200,424,426],{"className":202,"code":425,"language":204,"meta":205,"style":205},"\u003Cdiv class=\"my-calendar\">\n  \u003CFunctionalCalendar v-model=\"value\" is-date-range can-clear-range \u002F>\n\u003C\u002Fdiv>\n\n\u003Cstyle>\n.my-calendar {\n  --vfc-primary: #e11d48;\n  --vfc-on-primary: #ffffff;\n}\n\u003C\u002Fstyle>\n",[184,427,428,449,454,462,466,475,485,502,516,522],{"__ignoreMap":205},[209,429,430,432,435,438,440,442,445,447],{"class":211,"line":212},[209,431,216],{"class":215},[209,433,434],{"class":219},"div",[209,436,437],{"class":223}," class",[209,439,227],{"class":215},[209,441,230],{"class":215},[209,443,444],{"class":324},"my-calendar",[209,446,230],{"class":215},[209,448,266],{"class":215},[209,450,451],{"class":211,"line":269},[209,452,453],{"class":233},"  \u003CFunctionalCalendar v-model=\"value\" is-date-range can-clear-range \u002F>\n",[209,455,456,458,460],{"class":211,"line":287},[209,457,337],{"class":215},[209,459,434],{"class":219},[209,461,266],{"class":215},[209,463,464],{"class":211,"line":334},[209,465,348],{"emptyLinePlaceholder":347},[209,467,468,470,473],{"class":211,"line":344},[209,469,216],{"class":215},[209,471,472],{"class":219},"style",[209,474,266],{"class":215},[209,476,477,479,482],{"class":211,"line":351},[209,478,312],{"class":215},[209,480,444],{"class":481},"sBMFI",[209,483,484],{"class":215}," {\n",[209,486,487,490,493,496,499],{"class":211,"line":361},[209,488,489],{"class":233},"  --vfc-primary",[209,491,492],{"class":215},":",[209,494,495],{"class":215}," #",[209,497,498],{"class":233},"e11d48",[209,500,501],{"class":215},";\n",[209,503,504,507,509,511,514],{"class":211,"line":397},[209,505,506],{"class":233},"  --vfc-on-primary",[209,508,492],{"class":215},[209,510,495],{"class":215},[209,512,513],{"class":233},"ffffff",[209,515,501],{"class":215},[209,517,519],{"class":211,"line":518},9,[209,520,521],{"class":215},"}\n",[209,523,525,527,529],{"class":211,"line":524},10,[209,526,337],{"class":215},[209,528,472],{"class":219},[209,530,266],{"class":215},[176,532,534],{"id":533},"dark-only-values","Dark only values",[181,536,537,538,541],{},"Scope a token to ",[184,539,540],{},".vfc-dark"," to change it in dark mode only.",[200,543,547],{"className":544,"code":545,"language":546,"meta":205,"style":205},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".vfc-dark {\n  --vfc-primary: #fb7185;\n  --vfc-on-primary: #1c1917;\n}\n","css",[184,548,549,557,570,583],{"__ignoreMap":205},[209,550,551,553,555],{"class":211,"line":212},[209,552,312],{"class":215},[209,554,190],{"class":481},[209,556,484],{"class":215},[209,558,559,561,563,565,568],{"class":211,"line":269},[209,560,489],{"class":233},[209,562,492],{"class":215},[209,564,495],{"class":215},[209,566,567],{"class":233},"fb7185",[209,569,501],{"class":215},[209,571,572,574,576,578,581],{"class":211,"line":287},[209,573,506],{"class":233},[209,575,492],{"class":215},[209,577,495],{"class":215},[209,579,580],{"class":233},"1c1917",[209,582,501],{"class":215},[209,584,585],{"class":211,"line":334},[209,586,521],{"class":215},[176,588,590],{"id":589},"try-it-live","Try it live",[181,592,593,594,597],{},"The ",[416,595,596],{"href":152},"playground"," lets you change the primary color, the radius and the day size, and gives you the code.",[472,599,600],{},"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 .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);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":205,"searchDepth":269,"depth":269,"links":602},[603,604,605,606],{"id":178,"depth":269,"text":179},{"id":406,"depth":269,"text":407},{"id":533,"depth":269,"text":534},{"id":589,"depth":269,"text":590},"Style the calendar with --vfc-* tokens and switch to dark mode.","md",null,{},{"icon":69},{"title":147,"description":607},"ZNDREBUu_8cGfAZx4xjI_weW7NTrR7FTuOP7BfVFNHY",[615,617],{"title":81,"path":144,"stem":145,"description":616,"icon":84,"children":-1},"Names, week start and every UI string, from the browser's Intl data.",{"title":151,"path":152,"stem":153,"description":618,"icon":154,"children":-1},"Change the main props and theme tokens, and copy the code.",1792736104798]