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