[{"data":1,"prerenderedAt":1333},["ShallowReactive",2],{"navigation_docs":3,"-utilities-composables-use-theme":385,"-utilities-composables-use-theme-surround":875,"component-example-themeSelectUseThemeExample":880,"component-example-ast-themeSelectUseThemeExample":883},[4,110,322],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Documentation","\u002Fdocumentation","1.documentation",[9,35,56,89],{"title":10,"path":11,"stem":12,"children":13,"page":34},"Getting Started","\u002Fdocumentation\u002Fgetting-started","1.documentation\u002F1.getting-started",[14,18,22,26,30],{"title":15,"path":16,"stem":17},"Installation","\u002Fdocumentation\u002Fgetting-started\u002Finstallation","1.documentation\u002F1.getting-started\u002F1.installation",{"title":19,"path":20,"stem":21},"Agents","\u002Fdocumentation\u002Fgetting-started\u002Fagents","1.documentation\u002F1.getting-started\u002F2.agents",{"title":23,"path":24,"stem":25},"Migration","\u002Fdocumentation\u002Fgetting-started\u002Fmigration","1.documentation\u002F1.getting-started\u002F3.migration",{"title":27,"path":28,"stem":29},"Contributing","\u002Fdocumentation\u002Fgetting-started\u002Fcontributing","1.documentation\u002F1.getting-started\u002F4.contributing",{"title":31,"path":32,"stem":33},"What's new","\u002Fdocumentation\u002Fgetting-started\u002Fwhats-new","1.documentation\u002F1.getting-started\u002F5.whats-new",false,{"title":36,"path":37,"stem":38,"children":39,"page":34},"Guidelines","\u002Fdocumentation\u002Fguidelines","1.documentation\u002F2.guidelines",[40,44,48,52],{"title":41,"path":42,"stem":43},"Design Principles","\u002Fdocumentation\u002Fguidelines\u002Fdesign-principles","1.documentation\u002F2.guidelines\u002F1.design-principles",{"title":45,"path":46,"stem":47},"Accessibility","\u002Fdocumentation\u002Fguidelines\u002Faccessibility","1.documentation\u002F2.guidelines\u002F2.accessibility",{"title":49,"path":50,"stem":51},"Interactions","\u002Fdocumentation\u002Fguidelines\u002Finteractions","1.documentation\u002F2.guidelines\u002F3.interactions",{"title":53,"path":54,"stem":55},"Components","\u002Fdocumentation\u002Fguidelines\u002Fcomponents","1.documentation\u002F2.guidelines\u002F4.components",{"title":57,"path":58,"stem":59,"children":60,"page":34},"Design","\u002Fdocumentation\u002Fdesign","1.documentation\u002F3.design",[61,65,69,73,77,81,85],{"title":62,"path":63,"stem":64},"Tokens","\u002Fdocumentation\u002Fdesign\u002Ftokens","1.documentation\u002F3.design\u002F1.tokens",{"title":66,"path":67,"stem":68},"Color Palette","\u002Fdocumentation\u002Fdesign\u002Fcolor-palette","1.documentation\u002F3.design\u002F2.color-palette",{"title":70,"path":71,"stem":72},"Elevation","\u002Fdocumentation\u002Fdesign\u002Felevation","1.documentation\u002F3.design\u002F3.elevation",{"title":74,"path":75,"stem":76},"Spacing","\u002Fdocumentation\u002Fdesign\u002Fspacing","1.documentation\u002F3.design\u002F4.spacing",{"title":78,"path":79,"stem":80},"Border Radius","\u002Fdocumentation\u002Fdesign\u002Fborder-radius","1.documentation\u002F3.design\u002F5.border-radius",{"title":82,"path":83,"stem":84},"Typography","\u002Fdocumentation\u002Fdesign\u002Ftypography","1.documentation\u002F3.design\u002F6.typography",{"title":86,"path":87,"stem":88},"Icons","\u002Fdocumentation\u002Fdesign\u002Ficons","1.documentation\u002F3.design\u002F7.icons",{"title":90,"path":91,"stem":92,"children":93,"page":34},"Content","\u002Fdocumentation\u002Fcontent","1.documentation\u002F4.content",[94,98,102,106],{"title":95,"path":96,"stem":97},"Wording","\u002Fdocumentation\u002Fcontent\u002Fwording","1.documentation\u002F4.content\u002F1.wording",{"title":99,"path":100,"stem":101},"Messaging","\u002Fdocumentation\u002Fcontent\u002Fmessaging","1.documentation\u002F4.content\u002F2.messaging",{"title":103,"path":104,"stem":105},"Glossary","\u002Fdocumentation\u002Fcontent\u002Fglossary","1.documentation\u002F4.content\u002F3.glossary",{"title":107,"path":108,"stem":109},"Artificial Intelligence","\u002Fdocumentation\u002Fcontent\u002Fartificial-intelligence","1.documentation\u002F4.content\u002F4.artificial-intelligence",{"title":53,"path":111,"stem":112,"children":113,"page":34},"\u002Fcomponents","2.components",[114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318],{"title":115,"path":116,"stem":117},"Action Menu","\u002Fcomponents\u002Faction-menu","2.components\u002Faction-menu",{"title":119,"path":120,"stem":121},"App","\u002Fcomponents\u002Fapp","2.components\u002Fapp",{"title":123,"path":124,"stem":125},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar",{"title":127,"path":128,"stem":129},"Badge","\u002Fcomponents\u002Fbadge","2.components\u002Fbadge",{"title":131,"path":132,"stem":133},"Banner","\u002Fcomponents\u002Fbanner","2.components\u002Fbanner",{"title":135,"path":136,"stem":137},"Breadcrumb","\u002Fcomponents\u002Fbreadcrumb","2.components\u002Fbreadcrumb",{"title":139,"path":140,"stem":141},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton",{"title":143,"path":144,"stem":145},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":147,"path":148,"stem":149},"Chart","\u002Fcomponents\u002Fchart","2.components\u002Fchart",{"title":151,"path":152,"stem":153},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox",{"title":155,"path":156,"stem":157},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible",{"title":159,"path":160,"stem":161},"Colorpicker","\u002Fcomponents\u002Fcolorpicker","2.components\u002Fcolorpicker",{"title":163,"path":164,"stem":165},"Container","\u002Fcomponents\u002Fcontainer","2.components\u002Fcontainer",{"title":167,"path":168,"stem":169},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table",{"title":171,"path":172,"stem":173},"Datepicker","\u002Fcomponents\u002Fdatepicker","2.components\u002Fdatepicker",{"title":175,"path":176,"stem":177},"Divider","\u002Fcomponents\u002Fdivider","2.components\u002Fdivider",{"title":179,"path":180,"stem":181},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer",{"title":183,"path":184,"stem":185},"Email Field","\u002Fcomponents\u002Femail-field","2.components\u002Femail-field",{"title":187,"path":188,"stem":189},"Empty State","\u002Fcomponents\u002Fempty-state","2.components\u002Fempty-state",{"title":191,"path":192,"stem":193},"Entity Data Table","\u002Fcomponents\u002Fentity-data-table","2.components\u002Fentity-data-table",{"title":195,"path":196,"stem":197},"Entity Select","\u002Fcomponents\u002Fentity-select","2.components\u002Fentity-select",{"title":199,"path":200,"stem":201},"Floating UI","\u002Fcomponents\u002Ffloating-ui","2.components\u002Ffloating-ui",{"title":203,"path":204,"stem":205},"Help Text","\u002Fcomponents\u002Fhelp-text","2.components\u002Fhelp-text",{"title":207,"path":208,"stem":209},"Icon","\u002Fcomponents\u002Ficon","2.components\u002Ficon",{"title":211,"path":212,"stem":213},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":215,"path":216,"stem":217},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":219,"path":220,"stem":221},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":223,"path":224,"stem":225},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":227,"path":228,"stem":229},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":231,"path":232,"stem":233},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":235,"path":236,"stem":237},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":239,"path":240,"stem":241},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":243,"path":244,"stem":245},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":247,"path":248,"stem":249},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":251,"path":252,"stem":253},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":255,"path":256,"stem":257},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":259,"path":260,"stem":261},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":263,"path":264,"stem":265},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":267,"path":268,"stem":269},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"title":271,"path":272,"stem":273},"Status Dot","\u002Fcomponents\u002Fstatus-dot","2.components\u002Fstatus-dot",{"title":275,"path":276,"stem":277},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":279,"path":280,"stem":281},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":283,"path":284,"stem":285},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":287,"path":288,"stem":289},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":291,"path":292,"stem":293},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":295,"path":296,"stem":297},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":299,"path":300,"stem":301},"Theme Select","\u002Fcomponents\u002Ftheme-select","2.components\u002Ftheme-select",{"title":303,"path":304,"stem":305},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":307,"path":308,"stem":309},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":311,"path":312,"stem":313},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":315,"path":316,"stem":317},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":319,"path":320,"stem":321},"User","\u002Fcomponents\u002Fuser","2.components\u002Fuser",{"title":323,"path":324,"stem":325,"children":326,"page":34},"Utilities","\u002Futilities","3.utilities",[327,339,368,376],{"title":53,"path":328,"stem":329,"children":330,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[331,335],{"title":332,"path":333,"stem":334},"Inset","\u002Futilities\u002Fcomponents\u002Finset","3.utilities\u002Fcomponents\u002Finset",{"title":336,"path":337,"stem":338},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":340,"path":341,"stem":342,"children":343,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[344,348,352,356,360,364],{"title":345,"path":346,"stem":347},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":349,"path":350,"stem":351},"useMtApp","\u002Futilities\u002Fcomposables\u002Fuse-mt-app","3.utilities\u002Fcomposables\u002Fuse-mt-app",{"title":353,"path":354,"stem":355},"useMtAppRegions","\u002Futilities\u002Fcomposables\u002Fuse-mt-app-regions","3.utilities\u002Fcomposables\u002Fuse-mt-app-regions",{"title":357,"path":358,"stem":359},"useServicePermission","\u002Futilities\u002Fcomposables\u002Fuse-service-permission","3.utilities\u002Fcomposables\u002Fuse-service-permission",{"title":361,"path":362,"stem":363},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":365,"path":366,"stem":367},"useTheme","\u002Futilities\u002Fcomposables\u002Fuse-theme","3.utilities\u002Fcomposables\u002Fuse-theme",{"title":369,"path":370,"stem":371,"children":372,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[373],{"title":307,"path":374,"stem":375},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":377,"path":378,"stem":379,"children":380,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[381],{"title":382,"path":383,"stem":384},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",{"id":386,"title":365,"body":387,"description":869,"extension":870,"links":871,"meta":872,"navigation":486,"path":366,"seo":873,"stem":367,"__hash__":874},"docs\u002F3.utilities\u002Fcomposables\u002Fuse-theme.md",{"type":388,"value":389,"toc":859},"minimark",[390,395,400,449,528,535,539,544,550,659,663,761,765,815,819,842,846,855],[391,392],"component-example",{":full-width":393,"name":394},"true","theme-select-use-theme-example",[396,397,399],"h2",{"id":398},"usage","Usage",[401,402,403,406,407,410,411,414,415,418,419,421,422,425,426,429,430,433,434,437,438,444,445,448],"p",{},[404,405,365],"code",{}," manages the application color theme. It tracks the user's preference (",[404,408,409],{},"light",", ",[404,412,413],{},"dark",", or ",[404,416,417],{},"system","), resolves ",[404,420,417],{}," against the operating system via ",[404,423,424],{},"prefers-color-scheme",", writes the resolved value to a target element's ",[404,427,428],{},"data-theme"," attribute (the document root by default), and persists the choice to ",[404,431,432],{},"localStorage",". Bind the returned ",[404,435,436],{},"theme"," ref to ",[439,440,441],"a",{"href":300},[442,443,299],"strong",{}," with ",[404,446,447],{},"v-model"," to let users control it.",[450,451,456],"pre",{"className":452,"code":453,"language":454,"meta":455,"style":455},"language-ts shiki shiki-themes github-light github-dark-default github-dark-default","import { useTheme } from \"@shopware-ag\u002Fmeteor-component-library\";\n\nconst { theme, resolvedTheme, setTheme, stop } = useTheme();\n","ts","",[404,457,458,481,488],{"__ignoreMap":455},[459,460,463,467,471,474,478],"span",{"class":461,"line":462},"line",1,[459,464,466],{"class":465},"sLfaJ","import",[459,468,470],{"class":469},"sSgjj"," { useTheme } ",[459,472,473],{"class":465},"from",[459,475,477],{"class":476},"sL1yV"," \"@shopware-ag\u002Fmeteor-component-library\"",[459,479,480],{"class":469},";\n",[459,482,484],{"class":461,"line":483},2,[459,485,487],{"emptyLinePlaceholder":486},true,"\n",[459,489,491,494,497,500,502,505,507,510,512,515,518,521,525],{"class":461,"line":490},3,[459,492,493],{"class":465},"const",[459,495,496],{"class":469}," { ",[459,498,436],{"class":499},"sfxXV",[459,501,410],{"class":469},[459,503,504],{"class":499},"resolvedTheme",[459,506,410],{"class":469},[459,508,509],{"class":499},"setTheme",[459,511,410],{"class":469},[459,513,514],{"class":499},"stop",[459,516,517],{"class":469}," } ",[459,519,520],{"class":465},"=",[459,522,524],{"class":523},"s71ug"," useTheme",[459,526,527],{"class":469},"();\n",[401,529,530,531,534],{},"The preference is shared: instances using the same ",[404,532,533],{},"storageKey"," stay in sync within the document and across browser tabs.",[396,536,538],{"id":537},"api","API",[540,541,543],"h3",{"id":542},"options","Options",[401,545,546,549],{},[404,547,548],{},"useTheme(options?)"," accepts:",[551,552,553,569],"table",{},[554,555,556],"thead",{},[557,558,559,563,566],"tr",{},[560,561,562],"th",{},"Option",[560,564,565],{},"Type",[560,567,568],{},"Description",[570,571,572,598,620,638],"tbody",{},[557,573,574,579,584],{},[575,576,577],"td",{},[404,578,533],{},[575,580,581],{},[404,582,583],{},"string | null",[575,585,586,587,589,590,593,594,597],{},"The ",[404,588,432],{}," key used to persist the preference. Defaults to ",[404,591,592],{},"\"mt-theme\"",". Set it to ",[404,595,596],{},"null"," to disable persistence.",[557,599,600,605,610],{},[575,601,602],{},[404,603,604],{},"target",[575,606,607],{},[404,608,609],{},"HTMLElement",[575,611,612,613,615,616,619],{},"The element whose ",[404,614,428],{}," attribute is kept in sync with the resolved theme. Defaults to ",[404,617,618],{},"document.documentElement",".",[557,621,622,627,632],{},[575,623,624],{},[404,625,626],{},"defaultTheme",[575,628,629],{},[404,630,631],{},"\"light\" | \"dark\" | \"system\"",[575,633,634,635,619],{},"The preference used when nothing has been persisted yet. Defaults to ",[404,636,637],{},"\"system\"",[557,639,640,645,650],{},[575,641,642],{},[404,643,644],{},"applyToTarget",[575,646,647],{},[404,648,649],{},"boolean",[575,651,652,653,655,656,658],{},"Whether to write the resolved theme to the target's ",[404,654,428],{}," attribute. Defaults to ",[404,657,393],{},". Disable it when the host applies the theme itself.",[540,660,662],{"id":661},"return-value","Return value",[551,664,665,676],{},[554,666,667],{},[557,668,669,672,674],{},[560,670,671],{},"Member",[560,673,565],{},[560,675,568],{},[570,677,678,707,729,743],{},[557,679,680,684,689],{},[575,681,682],{},[404,683,436],{},[575,685,686],{},[404,687,688],{},"Ref\u003CTheme>",[575,690,691,692,410,695,414,698,700,701,444,705,619],{},"The user's preference: ",[404,693,694],{},"\"light\"",[404,696,697],{},"\"dark\"",[404,699,637],{},". Writable; bind it to ",[439,702,703],{"href":300},[442,704,299],{},[404,706,447],{},[557,708,709,713,718],{},[575,710,711],{},[404,712,504],{},[575,714,715],{},[404,716,717],{},"ComputedRef\u003CResolvedTheme>",[575,719,720,721,723,724,726,727,619],{},"The applied theme after resolving ",[404,722,637],{},": ",[404,725,694],{}," or ",[404,728,697],{},[557,730,731,735,740],{},[575,732,733],{},[404,734,509],{},[575,736,737],{},[404,738,739],{},"(theme: Theme) => void",[575,741,742],{},"Sets the preference programmatically.",[557,744,745,749,754],{},[575,746,747],{},[404,748,514],{},[575,750,751],{},[404,752,753],{},"() => void",[575,755,756,757,760],{},"Releases all listeners. Called automatically on scope disposal when used inside a component or ",[404,758,759],{},"effectScope","; call it manually when using the composable outside of an active scope.",[540,762,764],{"id":763},"types","Types",[450,766,768],{"className":452,"code":767,"language":454,"meta":455,"style":455},"type Theme = \"light\" | \"dark\" | \"system\";\ntype ResolvedTheme = \"light\" | \"dark\";\n",[404,769,770,798],{"__ignoreMap":455},[459,771,772,775,779,782,785,788,791,793,796],{"class":461,"line":462},[459,773,774],{"class":465},"type",[459,776,778],{"class":777},"s0wlp"," Theme",[459,780,781],{"class":465}," =",[459,783,784],{"class":476}," \"light\"",[459,786,787],{"class":465}," |",[459,789,790],{"class":476}," \"dark\"",[459,792,787],{"class":465},[459,794,795],{"class":476}," \"system\"",[459,797,480],{"class":469},[459,799,800,802,805,807,809,811,813],{"class":461,"line":483},[459,801,774],{"class":465},[459,803,804],{"class":777}," ResolvedTheme",[459,806,781],{"class":465},[459,808,784],{"class":476},[459,810,787],{"class":465},[459,812,790],{"class":476},[459,814,480],{"class":469},[396,816,818],{"id":817},"behavior","Behavior",[820,821,822,831,836],"ul",{},[823,824,825,826,410,828,830],"li",{},"While the preference is ",[404,827,417],{},[404,829,504],{}," updates live when the operating system preference changes.",[823,832,833,834,619],{},"Invalid persisted values are ignored and fall back to ",[404,835,626],{},[823,837,838,839,841],{},"Meteor tokens are theme-aware through ",[404,840,428],{},", so applying the resolved theme to the document root themes every Meteor component on the page.",[396,843,845],{"id":844},"related-components","Related components",[820,847,848],{},[823,849,850,854],{},[439,851,852],{"href":300},[442,853,299],{},": the select component built for choosing the theme this composable manages.",[856,857,858],"style",{},"html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sL1yV, html code.shiki .sL1yV{--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sfxXV, html code.shiki .sfxXV{--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .s71ug, html code.shiki .s71ug{--shiki-light:#6F42C1;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}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 .s0wlp, html code.shiki .s0wlp{--shiki-light:#6F42C1;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":455,"searchDepth":483,"depth":483,"links":860},[861,862,867,868],{"id":398,"depth":483,"text":399},{"id":537,"depth":483,"text":538,"children":863},[864,865,866],{"id":542,"depth":490,"text":543},{"id":661,"depth":490,"text":662},{"id":763,"depth":490,"text":764},{"id":817,"depth":483,"text":818},{"id":844,"depth":483,"text":845},"A composable for managing the application color theme, resolving the system preference, and persisting the choice.","md",null,{},{"title":365,"description":869},"dXbxJHPExu5eN0wT8Btj7N7WEXkrqIrUQ3ibRnRqd1c",[876,878],{"title":361,"path":362,"stem":363,"description":877,"children":-1},"A composable for publishing snackbar notifications from anywhere in your app.",{"title":307,"path":374,"stem":375,"description":879,"children":-1},"A v-tooltip directive for attaching a tooltip to any element, a lightweight alternative to the Tooltip component.",{"code":881,"pascalName":882},"\u003Cscript setup lang=\"ts\">\nimport MtThemeSelect from \"@shopware-ag\u002Fmeteor-component-library\u002FMtThemeSelect\";\nimport MtText from \"@shopware-ag\u002Fmeteor-component-library\u002FMtText\";\n\u002F\u002F useTheme has no subpath export, so it is imported from the barrel.\nimport { useTheme } from \"@shopware-ag\u002Fmeteor-component-library\";\n\n\u002F\u002F Persistence and global application are disabled so the docs page itself\n\u002F\u002F stays untouched. Omit these options in your app.\nconst { theme, resolvedTheme } = useTheme({\n  storageKey: null,\n  applyToTarget: false,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv style=\"display: flex; flex-direction: column; gap: 16px\">\n    \u003Cmt-theme-select v-model=\"theme\" label=\"Color theme\" \u002F>\n\n    \u003Cmt-text>Resolved theme: {{ resolvedTheme }}\u003C\u002Fmt-text>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","ThemeSelectUseThemeExample",{"data":884,"body":885,"toc":1331},{"title":455,"description":455},{"type":886,"children":887},"root",[888,1326],{"type":889,"tag":450,"props":890,"children":893},"element",{"className":891,"code":881,"language":892,"meta":455,"style":455},"language-vue shiki shiki-themes github-light github-dark-default github-dark-default","vue",[894],{"type":889,"tag":404,"props":895,"children":896},{"__ignoreMap":455},[897,939,965,990,1000,1024,1032,1041,1050,1093,1111,1129,1138,1155,1163,1180,1212,1259,1267,1293,1310],{"type":889,"tag":459,"props":898,"children":899},{"class":461,"line":462},[900,907,913,919,924,928,934],{"type":889,"tag":459,"props":901,"children":903},{"style":902},"--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3",[904],{"type":905,"value":906},"text","\u003C",{"type":889,"tag":459,"props":908,"children":910},{"style":909},"--shiki-light:#22863A;--shiki-default:#7EE787;--shiki-dark:#7EE787",[911],{"type":905,"value":912},"script",{"type":889,"tag":459,"props":914,"children":916},{"style":915},"--shiki-light:#6F42C1;--shiki-default:#79C0FF;--shiki-dark:#79C0FF",[917],{"type":905,"value":918}," setup",{"type":889,"tag":459,"props":920,"children":921},{"style":915},[922],{"type":905,"value":923}," lang",{"type":889,"tag":459,"props":925,"children":926},{"style":902},[927],{"type":905,"value":520},{"type":889,"tag":459,"props":929,"children":931},{"style":930},"--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF",[932],{"type":905,"value":933},"\"ts\"",{"type":889,"tag":459,"props":935,"children":936},{"style":902},[937],{"type":905,"value":938},">\n",{"type":889,"tag":459,"props":940,"children":941},{"class":461,"line":483},[942,947,952,956,961],{"type":889,"tag":459,"props":943,"children":945},{"style":944},"--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72",[946],{"type":905,"value":466},{"type":889,"tag":459,"props":948,"children":949},{"style":902},[950],{"type":905,"value":951}," MtThemeSelect ",{"type":889,"tag":459,"props":953,"children":954},{"style":944},[955],{"type":905,"value":473},{"type":889,"tag":459,"props":957,"children":958},{"style":930},[959],{"type":905,"value":960}," \"@shopware-ag\u002Fmeteor-component-library\u002FMtThemeSelect\"",{"type":889,"tag":459,"props":962,"children":963},{"style":902},[964],{"type":905,"value":480},{"type":889,"tag":459,"props":966,"children":967},{"class":461,"line":490},[968,972,977,981,986],{"type":889,"tag":459,"props":969,"children":970},{"style":944},[971],{"type":905,"value":466},{"type":889,"tag":459,"props":973,"children":974},{"style":902},[975],{"type":905,"value":976}," MtText ",{"type":889,"tag":459,"props":978,"children":979},{"style":944},[980],{"type":905,"value":473},{"type":889,"tag":459,"props":982,"children":983},{"style":930},[984],{"type":905,"value":985}," \"@shopware-ag\u002Fmeteor-component-library\u002FMtText\"",{"type":889,"tag":459,"props":987,"children":988},{"style":902},[989],{"type":905,"value":480},{"type":889,"tag":459,"props":991,"children":993},{"class":461,"line":992},4,[994],{"type":889,"tag":459,"props":995,"children":997},{"style":996},"--shiki-light:#6A737D;--shiki-default:#8B949E;--shiki-dark:#8B949E",[998],{"type":905,"value":999},"\u002F\u002F useTheme has no subpath export, so it is imported from the barrel.\n",{"type":889,"tag":459,"props":1001,"children":1003},{"class":461,"line":1002},5,[1004,1008,1012,1016,1020],{"type":889,"tag":459,"props":1005,"children":1006},{"style":944},[1007],{"type":905,"value":466},{"type":889,"tag":459,"props":1009,"children":1010},{"style":902},[1011],{"type":905,"value":470},{"type":889,"tag":459,"props":1013,"children":1014},{"style":944},[1015],{"type":905,"value":473},{"type":889,"tag":459,"props":1017,"children":1018},{"style":930},[1019],{"type":905,"value":477},{"type":889,"tag":459,"props":1021,"children":1022},{"style":902},[1023],{"type":905,"value":480},{"type":889,"tag":459,"props":1025,"children":1027},{"class":461,"line":1026},6,[1028],{"type":889,"tag":459,"props":1029,"children":1030},{"emptyLinePlaceholder":486},[1031],{"type":905,"value":487},{"type":889,"tag":459,"props":1033,"children":1035},{"class":461,"line":1034},7,[1036],{"type":889,"tag":459,"props":1037,"children":1038},{"style":996},[1039],{"type":905,"value":1040},"\u002F\u002F Persistence and global application are disabled so the docs page itself\n",{"type":889,"tag":459,"props":1042,"children":1044},{"class":461,"line":1043},8,[1045],{"type":889,"tag":459,"props":1046,"children":1047},{"style":996},[1048],{"type":905,"value":1049},"\u002F\u002F stays untouched. Omit these options in your app.\n",{"type":889,"tag":459,"props":1051,"children":1053},{"class":461,"line":1052},9,[1054,1058,1062,1067,1071,1075,1079,1083,1088],{"type":889,"tag":459,"props":1055,"children":1056},{"style":944},[1057],{"type":905,"value":493},{"type":889,"tag":459,"props":1059,"children":1060},{"style":902},[1061],{"type":905,"value":496},{"type":889,"tag":459,"props":1063,"children":1065},{"style":1064},"--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF",[1066],{"type":905,"value":436},{"type":889,"tag":459,"props":1068,"children":1069},{"style":902},[1070],{"type":905,"value":410},{"type":889,"tag":459,"props":1072,"children":1073},{"style":1064},[1074],{"type":905,"value":504},{"type":889,"tag":459,"props":1076,"children":1077},{"style":902},[1078],{"type":905,"value":517},{"type":889,"tag":459,"props":1080,"children":1081},{"style":944},[1082],{"type":905,"value":520},{"type":889,"tag":459,"props":1084,"children":1086},{"style":1085},"--shiki-light:#6F42C1;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF",[1087],{"type":905,"value":524},{"type":889,"tag":459,"props":1089,"children":1090},{"style":902},[1091],{"type":905,"value":1092},"({\n",{"type":889,"tag":459,"props":1094,"children":1096},{"class":461,"line":1095},10,[1097,1102,1106],{"type":889,"tag":459,"props":1098,"children":1099},{"style":902},[1100],{"type":905,"value":1101},"  storageKey: ",{"type":889,"tag":459,"props":1103,"children":1104},{"style":1064},[1105],{"type":905,"value":596},{"type":889,"tag":459,"props":1107,"children":1108},{"style":902},[1109],{"type":905,"value":1110},",\n",{"type":889,"tag":459,"props":1112,"children":1114},{"class":461,"line":1113},11,[1115,1120,1125],{"type":889,"tag":459,"props":1116,"children":1117},{"style":902},[1118],{"type":905,"value":1119},"  applyToTarget: ",{"type":889,"tag":459,"props":1121,"children":1122},{"style":1064},[1123],{"type":905,"value":1124},"false",{"type":889,"tag":459,"props":1126,"children":1127},{"style":902},[1128],{"type":905,"value":1110},{"type":889,"tag":459,"props":1130,"children":1132},{"class":461,"line":1131},12,[1133],{"type":889,"tag":459,"props":1134,"children":1135},{"style":902},[1136],{"type":905,"value":1137},"});\n",{"type":889,"tag":459,"props":1139,"children":1141},{"class":461,"line":1140},13,[1142,1147,1151],{"type":889,"tag":459,"props":1143,"children":1144},{"style":902},[1145],{"type":905,"value":1146},"\u003C\u002F",{"type":889,"tag":459,"props":1148,"children":1149},{"style":909},[1150],{"type":905,"value":912},{"type":889,"tag":459,"props":1152,"children":1153},{"style":902},[1154],{"type":905,"value":938},{"type":889,"tag":459,"props":1156,"children":1158},{"class":461,"line":1157},14,[1159],{"type":889,"tag":459,"props":1160,"children":1161},{"emptyLinePlaceholder":486},[1162],{"type":905,"value":487},{"type":889,"tag":459,"props":1164,"children":1166},{"class":461,"line":1165},15,[1167,1171,1176],{"type":889,"tag":459,"props":1168,"children":1169},{"style":902},[1170],{"type":905,"value":906},{"type":889,"tag":459,"props":1172,"children":1173},{"style":909},[1174],{"type":905,"value":1175},"template",{"type":889,"tag":459,"props":1177,"children":1178},{"style":902},[1179],{"type":905,"value":938},{"type":889,"tag":459,"props":1181,"children":1183},{"class":461,"line":1182},16,[1184,1189,1194,1199,1203,1208],{"type":889,"tag":459,"props":1185,"children":1186},{"style":902},[1187],{"type":905,"value":1188},"  \u003C",{"type":889,"tag":459,"props":1190,"children":1191},{"style":909},[1192],{"type":905,"value":1193},"div",{"type":889,"tag":459,"props":1195,"children":1196},{"style":915},[1197],{"type":905,"value":1198}," style",{"type":889,"tag":459,"props":1200,"children":1201},{"style":902},[1202],{"type":905,"value":520},{"type":889,"tag":459,"props":1204,"children":1205},{"style":930},[1206],{"type":905,"value":1207},"\"display: flex; flex-direction: column; gap: 16px\"",{"type":889,"tag":459,"props":1209,"children":1210},{"style":902},[1211],{"type":905,"value":938},{"type":889,"tag":459,"props":1213,"children":1215},{"class":461,"line":1214},17,[1216,1221,1226,1231,1235,1240,1245,1249,1254],{"type":889,"tag":459,"props":1217,"children":1218},{"style":902},[1219],{"type":905,"value":1220},"    \u003C",{"type":889,"tag":459,"props":1222,"children":1223},{"style":909},[1224],{"type":905,"value":1225},"mt-theme-select",{"type":889,"tag":459,"props":1227,"children":1228},{"style":915},[1229],{"type":905,"value":1230}," v-model",{"type":889,"tag":459,"props":1232,"children":1233},{"style":902},[1234],{"type":905,"value":520},{"type":889,"tag":459,"props":1236,"children":1237},{"style":930},[1238],{"type":905,"value":1239},"\"theme\"",{"type":889,"tag":459,"props":1241,"children":1242},{"style":915},[1243],{"type":905,"value":1244}," label",{"type":889,"tag":459,"props":1246,"children":1247},{"style":902},[1248],{"type":905,"value":520},{"type":889,"tag":459,"props":1250,"children":1251},{"style":930},[1252],{"type":905,"value":1253},"\"Color theme\"",{"type":889,"tag":459,"props":1255,"children":1256},{"style":902},[1257],{"type":905,"value":1258}," \u002F>\n",{"type":889,"tag":459,"props":1260,"children":1262},{"class":461,"line":1261},18,[1263],{"type":889,"tag":459,"props":1264,"children":1265},{"emptyLinePlaceholder":486},[1266],{"type":905,"value":487},{"type":889,"tag":459,"props":1268,"children":1270},{"class":461,"line":1269},19,[1271,1275,1280,1285,1289],{"type":889,"tag":459,"props":1272,"children":1273},{"style":902},[1274],{"type":905,"value":1220},{"type":889,"tag":459,"props":1276,"children":1277},{"style":909},[1278],{"type":905,"value":1279},"mt-text",{"type":889,"tag":459,"props":1281,"children":1282},{"style":902},[1283],{"type":905,"value":1284},">Resolved theme: {{ resolvedTheme }}\u003C\u002F",{"type":889,"tag":459,"props":1286,"children":1287},{"style":909},[1288],{"type":905,"value":1279},{"type":889,"tag":459,"props":1290,"children":1291},{"style":902},[1292],{"type":905,"value":938},{"type":889,"tag":459,"props":1294,"children":1296},{"class":461,"line":1295},20,[1297,1302,1306],{"type":889,"tag":459,"props":1298,"children":1299},{"style":902},[1300],{"type":905,"value":1301},"  \u003C\u002F",{"type":889,"tag":459,"props":1303,"children":1304},{"style":909},[1305],{"type":905,"value":1193},{"type":889,"tag":459,"props":1307,"children":1308},{"style":902},[1309],{"type":905,"value":938},{"type":889,"tag":459,"props":1311,"children":1313},{"class":461,"line":1312},21,[1314,1318,1322],{"type":889,"tag":459,"props":1315,"children":1316},{"style":902},[1317],{"type":905,"value":1146},{"type":889,"tag":459,"props":1319,"children":1320},{"style":909},[1321],{"type":905,"value":1175},{"type":889,"tag":459,"props":1323,"children":1324},{"style":902},[1325],{"type":905,"value":938},{"type":889,"tag":856,"props":1327,"children":1328},{},[1329],{"type":905,"value":1330},"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":455,"searchDepth":483,"depth":483,"links":1332},[],1791195773362]