[{"data":1,"prerenderedAt":4734},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-guides-theme-switcher":407,"-docs-getting-started-guides-theme-switcher-surround":4733},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":4724,"extension":4725,"links":4726,"meta":4727,"navigation":7,"path":4728,"seo":4729,"sitemap":4730,"stem":4731,"__hash__":4732},"docs_gettingStarted/docs/getting-started/03.guides/02.theme-switcher.md","Implementing a Theme Switcher",{"type":411,"value":412,"toc":4710},"minimark",[413,417,430,434,437,466,470,476,1029,1035,1046,1050,1058,3106,3111,3115,3120,3123,3353,3356,3368,3372,3375,3995,4002,4006,4009,4229,4239,4243,4246,4474,4477,4481,4523,4527,4706],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429],"p",{},"A theme switcher allows users to toggle between different visual themes in your application, such as light and dark modes. Styleframe makes this easy by using the ",[422,423,424],"code",{},"data-theme"," attribute on the ",[422,427,428],{},"\u003Chtml>"," element, which you can change dynamically with JavaScript to switch between themes instantly.",[414,431,433],{"id":432},"why-use-a-theme-switcher","Why use a theme switcher?",[418,435,436],{},"Theme switching provides:",[438,439,440,448,454,460],"ul",{},[441,442,443,447],"li",{},[444,445,446],"strong",{},"Enhanced user experience",": Let users choose their preferred visual style.",[441,449,450,453],{},[444,451,452],{},"Accessibility benefits",": Dark mode can reduce eye strain in low-light environments.",[441,455,456,459],{},[444,457,458],{},"Modern expectations",": Users expect apps to respect their system preferences and offer theme choices.",[441,461,462,465],{},[444,463,464],{},"Seamless transitions",": Switch themes without page reloads or flickering.",[414,467,469],{"id":468},"how-it-works","How it Works",[418,471,472,473,475],{},"Styleframe uses the ",[422,474,424],{}," attribute to scope theme-specific styles. When you define a theme, you use a callback function that receives a context object to override variables:",[477,478,479,873],"tabs",{},[480,481,484],"tabs-item",{"icon":482,"label":483},"i-lucide-code","Styleframe",[485,486,491],"pre",{"className":487,"code":488,"language":489,"meta":490,"style":490},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { variable, theme, ref, selector } = s;\n\n// Define theme variables\nconst backgroundColor = variable('bg-color', '#ffffff');\nconst textColor = variable('text-color', '#000000');\n\n// Apply variables to elements\nselector('body', {\n    backgroundColor: ref(backgroundColor),\n    color: ref(textColor),\n});\n\n// Dark theme\ntheme('dark', (ctx) => {\n    ctx.variable(backgroundColor, '#1a1a1a');\n    ctx.variable(textColor, '#ffffff');\n});\n\nexport default s;\n","ts","",[422,492,493,529,535,556,593,598,605,641,675,680,686,706,724,739,748,753,759,790,820,846,855,860],{"__ignoreMap":490},[494,495,498,502,506,510,513,516,519,523,526],"span",{"class":496,"line":497},"line",1,[494,499,501],{"class":500},"s7zQu","import",[494,503,505],{"class":504},"sMK4o"," {",[494,507,509],{"class":508},"sTEyZ"," styleframe",[494,511,512],{"class":504}," }",[494,514,515],{"class":500}," from",[494,517,518],{"class":504}," '",[494,520,522],{"class":521},"sfazB","styleframe",[494,524,525],{"class":504},"'",[494,527,528],{"class":504},";\n",[494,530,532],{"class":496,"line":531},2,[494,533,534],{"emptyLinePlaceholder":206},"\n",[494,536,538,542,545,548,551,554],{"class":496,"line":537},3,[494,539,541],{"class":540},"spNyl","const",[494,543,544],{"class":508}," s ",[494,546,547],{"class":504},"=",[494,549,509],{"class":550},"s2Zo4",[494,552,553],{"class":508},"()",[494,555,528],{"class":504},[494,557,559,561,563,566,569,572,574,577,579,582,585,588,591],{"class":496,"line":558},4,[494,560,541],{"class":540},[494,562,505],{"class":504},[494,564,565],{"class":508}," variable",[494,567,568],{"class":504},",",[494,570,571],{"class":508}," theme",[494,573,568],{"class":504},[494,575,576],{"class":508}," ref",[494,578,568],{"class":504},[494,580,581],{"class":508}," selector ",[494,583,584],{"class":504},"}",[494,586,587],{"class":504}," =",[494,589,590],{"class":508}," s",[494,592,528],{"class":504},[494,594,596],{"class":496,"line":595},5,[494,597,534],{"emptyLinePlaceholder":206},[494,599,601],{"class":496,"line":600},6,[494,602,604],{"class":603},"sHwdD","// Define theme variables\n",[494,606,608,610,613,615,617,620,622,625,627,629,631,634,636,639],{"class":496,"line":607},7,[494,609,541],{"class":540},[494,611,612],{"class":508}," backgroundColor ",[494,614,547],{"class":504},[494,616,565],{"class":550},[494,618,619],{"class":508},"(",[494,621,525],{"class":504},[494,623,624],{"class":521},"bg-color",[494,626,525],{"class":504},[494,628,568],{"class":504},[494,630,518],{"class":504},[494,632,633],{"class":521},"#ffffff",[494,635,525],{"class":504},[494,637,638],{"class":508},")",[494,640,528],{"class":504},[494,642,644,646,649,651,653,655,657,660,662,664,666,669,671,673],{"class":496,"line":643},8,[494,645,541],{"class":540},[494,647,648],{"class":508}," textColor ",[494,650,547],{"class":504},[494,652,565],{"class":550},[494,654,619],{"class":508},[494,656,525],{"class":504},[494,658,659],{"class":521},"text-color",[494,661,525],{"class":504},[494,663,568],{"class":504},[494,665,518],{"class":504},[494,667,668],{"class":521},"#000000",[494,670,525],{"class":504},[494,672,638],{"class":508},[494,674,528],{"class":504},[494,676,678],{"class":496,"line":677},9,[494,679,534],{"emptyLinePlaceholder":206},[494,681,683],{"class":496,"line":682},10,[494,684,685],{"class":603},"// Apply variables to elements\n",[494,687,689,692,694,696,699,701,703],{"class":496,"line":688},11,[494,690,691],{"class":550},"selector",[494,693,619],{"class":508},[494,695,525],{"class":504},[494,697,698],{"class":521},"body",[494,700,525],{"class":504},[494,702,568],{"class":504},[494,704,705],{"class":504}," {\n",[494,707,709,713,716,718,721],{"class":496,"line":708},12,[494,710,712],{"class":711},"swJcz","    backgroundColor",[494,714,715],{"class":504},":",[494,717,576],{"class":550},[494,719,720],{"class":508},"(backgroundColor)",[494,722,723],{"class":504},",\n",[494,725,727,730,732,734,737],{"class":496,"line":726},13,[494,728,729],{"class":711},"    color",[494,731,715],{"class":504},[494,733,576],{"class":550},[494,735,736],{"class":508},"(textColor)",[494,738,723],{"class":504},[494,740,742,744,746],{"class":496,"line":741},14,[494,743,584],{"class":504},[494,745,638],{"class":508},[494,747,528],{"class":504},[494,749,751],{"class":496,"line":750},15,[494,752,534],{"emptyLinePlaceholder":206},[494,754,756],{"class":496,"line":755},16,[494,757,758],{"class":603},"// Dark theme\n",[494,760,762,765,767,769,772,774,776,779,783,785,788],{"class":496,"line":761},17,[494,763,764],{"class":550},"theme",[494,766,619],{"class":508},[494,768,525],{"class":504},[494,770,771],{"class":521},"dark",[494,773,525],{"class":504},[494,775,568],{"class":504},[494,777,778],{"class":504}," (",[494,780,782],{"class":781},"sHdIc","ctx",[494,784,638],{"class":504},[494,786,787],{"class":540}," =>",[494,789,705],{"class":504},[494,791,793,796,799,802,804,807,809,811,814,816,818],{"class":496,"line":792},18,[494,794,795],{"class":508},"    ctx",[494,797,798],{"class":504},".",[494,800,801],{"class":550},"variable",[494,803,619],{"class":711},[494,805,806],{"class":508},"backgroundColor",[494,808,568],{"class":504},[494,810,518],{"class":504},[494,812,813],{"class":521},"#1a1a1a",[494,815,525],{"class":504},[494,817,638],{"class":711},[494,819,528],{"class":504},[494,821,823,825,827,829,831,834,836,838,840,842,844],{"class":496,"line":822},19,[494,824,795],{"class":508},[494,826,798],{"class":504},[494,828,801],{"class":550},[494,830,619],{"class":711},[494,832,833],{"class":508},"textColor",[494,835,568],{"class":504},[494,837,518],{"class":504},[494,839,633],{"class":521},[494,841,525],{"class":504},[494,843,638],{"class":711},[494,845,528],{"class":504},[494,847,849,851,853],{"class":496,"line":848},20,[494,850,584],{"class":504},[494,852,638],{"class":508},[494,854,528],{"class":504},[494,856,858],{"class":496,"line":857},21,[494,859,534],{"emptyLinePlaceholder":206},[494,861,863,866,869,871],{"class":496,"line":862},22,[494,864,865],{"class":500},"export",[494,867,868],{"class":500}," default",[494,870,590],{"class":508},[494,872,528],{"class":504},[480,874,876],{"icon":140,"label":875},"Output",[485,877,881],{"className":878,"code":879,"language":880,"meta":490,"style":490},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --bg-color: #ffffff;\n    --text-color: #000000;\n}\n\nbody {\n    background-color: var(--bg-color);\n    color: var(--text-color);\n}\n\n[data-theme=\"dark\"] {\n    --bg-color: #1a1a1a;\n    --text-color: #ffffff;\n}\n","css",[422,882,883,892,907,921,926,930,937,956,971,975,979,1000,1013,1025],{"__ignoreMap":490},[494,884,885,887,890],{"class":496,"line":497},[494,886,715],{"class":504},[494,888,889],{"class":540},"root",[494,891,705],{"class":504},[494,893,894,897,899,902,905],{"class":496,"line":531},[494,895,896],{"class":508},"    --bg-color",[494,898,715],{"class":504},[494,900,901],{"class":504}," #",[494,903,904],{"class":508},"ffffff",[494,906,528],{"class":504},[494,908,909,912,914,916,919],{"class":496,"line":537},[494,910,911],{"class":508},"    --text-color",[494,913,715],{"class":504},[494,915,901],{"class":504},[494,917,918],{"class":508},"000000",[494,920,528],{"class":504},[494,922,923],{"class":496,"line":558},[494,924,925],{"class":504},"}\n",[494,927,928],{"class":496,"line":595},[494,929,534],{"emptyLinePlaceholder":206},[494,931,932,935],{"class":496,"line":600},[494,933,698],{"class":934},"sBMFI",[494,936,705],{"class":504},[494,938,939,943,945,948,950,953],{"class":496,"line":607},[494,940,942],{"class":941},"sqsOY","    background-color",[494,944,715],{"class":504},[494,946,947],{"class":550}," var",[494,949,619],{"class":504},[494,951,952],{"class":508},"--bg-color",[494,954,955],{"class":504},");\n",[494,957,958,960,962,964,966,969],{"class":496,"line":643},[494,959,729],{"class":941},[494,961,715],{"class":504},[494,963,947],{"class":550},[494,965,619],{"class":504},[494,967,968],{"class":508},"--text-color",[494,970,955],{"class":504},[494,972,973],{"class":496,"line":677},[494,974,925],{"class":504},[494,976,977],{"class":496,"line":682},[494,978,534],{"emptyLinePlaceholder":206},[494,980,981,984,986,988,991,993,995,998],{"class":496,"line":688},[494,982,983],{"class":504},"[",[494,985,424],{"class":540},[494,987,547],{"class":504},[494,989,990],{"class":504},"\"",[494,992,771],{"class":521},[494,994,990],{"class":504},[494,996,997],{"class":504},"]",[494,999,705],{"class":504},[494,1001,1002,1004,1006,1008,1011],{"class":496,"line":708},[494,1003,896],{"class":508},[494,1005,715],{"class":504},[494,1007,901],{"class":504},[494,1009,1010],{"class":508},"1a1a1a",[494,1012,528],{"class":504},[494,1014,1015,1017,1019,1021,1023],{"class":496,"line":726},[494,1016,911],{"class":508},[494,1018,715],{"class":504},[494,1020,901],{"class":504},[494,1022,904],{"class":508},[494,1024,528],{"class":504},[494,1026,1027],{"class":496,"line":741},[494,1028,925],{"class":504},[418,1030,1031,1032,1034],{},"When you change the ",[422,1033,424],{}," attribute, all CSS variables are updated automatically, cascading the new theme values throughout your application.",[1036,1037,1038,1041,1042,798],"tip",{},[444,1039,1040],{},"Pro tip:"," For a comprehensive guide on defining and working with themes, see the ",[1043,1044,1045],"a",{"href":113},"Themes API documentation",[414,1047,1049],{"id":1048},"implementation","Implementation",[418,1051,1052,1053,425,1055,1057],{},"To switch themes dynamically, update the ",[422,1054,424],{},[422,1056,428],{}," element using JavaScript. Below are framework-specific implementations that include localStorage persistence and type safety.",[477,1059,1060,1802,2455],{},[480,1061,1064,1646,1651],{"icon":1062,"label":1063},"i-devicon-react","React",[485,1065,1067],{"className":487,"code":1066,"language":489,"meta":490,"style":490},"import { useState, useEffect, useCallback } from 'react';\n\ntype Theme = 'light' | 'dark';\n\nexport const useTheme = () => {\n    const [theme, setThemeState] = useState\u003CTheme>('light');\n\n    const setTheme = useCallback((newTheme: Theme) => {\n        setThemeState(newTheme);\n\n        if (typeof window !== 'undefined') {\n            document.documentElement.setAttribute('data-theme', newTheme);\n            localStorage.setItem('theme', newTheme);\n        }\n    }, []);\n\n    const toggleTheme = useCallback(() => {\n        setTheme(theme === 'dark' ? 'light' : 'dark');\n    }, [theme, setTheme]);\n\n    useEffect(() => {\n        if (typeof window !== 'undefined') {\n            const saved = localStorage.getItem('theme') as Theme;\n            if (saved && (saved === 'light' || saved === 'dark')) {\n                setTheme(saved);\n            }\n        }\n    }, [setTheme]);\n\n    return {\n        theme, \n        setTheme,\n        toggleTheme\n    } as const; \n};\n",[422,1068,1069,1101,1105,1133,1137,1156,1198,1202,1230,1243,1247,1276,1308,1334,1339,1349,1353,1372,1412,1429,1433,1446,1468,1504,1548,1562,1568,1573,1587,1592,1600,1611,1618,1624,1640],{"__ignoreMap":490},[494,1070,1071,1073,1075,1078,1080,1083,1085,1088,1090,1092,1094,1097,1099],{"class":496,"line":497},[494,1072,501],{"class":500},[494,1074,505],{"class":504},[494,1076,1077],{"class":508}," useState",[494,1079,568],{"class":504},[494,1081,1082],{"class":508}," useEffect",[494,1084,568],{"class":504},[494,1086,1087],{"class":508}," useCallback",[494,1089,512],{"class":504},[494,1091,515],{"class":500},[494,1093,518],{"class":504},[494,1095,1096],{"class":521},"react",[494,1098,525],{"class":504},[494,1100,528],{"class":504},[494,1102,1103],{"class":496,"line":531},[494,1104,534],{"emptyLinePlaceholder":206},[494,1106,1107,1110,1113,1115,1117,1120,1122,1125,1127,1129,1131],{"class":496,"line":537},[494,1108,1109],{"class":540},"type",[494,1111,1112],{"class":934}," Theme",[494,1114,587],{"class":504},[494,1116,518],{"class":504},[494,1118,1119],{"class":521},"light",[494,1121,525],{"class":504},[494,1123,1124],{"class":504}," |",[494,1126,518],{"class":504},[494,1128,771],{"class":521},[494,1130,525],{"class":504},[494,1132,528],{"class":504},[494,1134,1135],{"class":496,"line":558},[494,1136,534],{"emptyLinePlaceholder":206},[494,1138,1139,1141,1144,1147,1149,1152,1154],{"class":496,"line":595},[494,1140,865],{"class":500},[494,1142,1143],{"class":540}," const",[494,1145,1146],{"class":508}," useTheme ",[494,1148,547],{"class":504},[494,1150,1151],{"class":504}," ()",[494,1153,787],{"class":540},[494,1155,705],{"class":504},[494,1157,1158,1161,1164,1166,1168,1171,1173,1175,1177,1180,1183,1186,1188,1190,1192,1194,1196],{"class":496,"line":600},[494,1159,1160],{"class":540},"    const",[494,1162,1163],{"class":504}," [",[494,1165,764],{"class":508},[494,1167,568],{"class":504},[494,1169,1170],{"class":508}," setThemeState",[494,1172,997],{"class":504},[494,1174,587],{"class":504},[494,1176,1077],{"class":550},[494,1178,1179],{"class":504},"\u003C",[494,1181,1182],{"class":934},"Theme",[494,1184,1185],{"class":504},">",[494,1187,619],{"class":711},[494,1189,525],{"class":504},[494,1191,1119],{"class":521},[494,1193,525],{"class":504},[494,1195,638],{"class":711},[494,1197,528],{"class":504},[494,1199,1200],{"class":496,"line":607},[494,1201,534],{"emptyLinePlaceholder":206},[494,1203,1204,1206,1209,1211,1213,1215,1217,1220,1222,1224,1226,1228],{"class":496,"line":643},[494,1205,1160],{"class":540},[494,1207,1208],{"class":508}," setTheme",[494,1210,587],{"class":504},[494,1212,1087],{"class":550},[494,1214,619],{"class":711},[494,1216,619],{"class":504},[494,1218,1219],{"class":781},"newTheme",[494,1221,715],{"class":504},[494,1223,1112],{"class":934},[494,1225,638],{"class":504},[494,1227,787],{"class":540},[494,1229,705],{"class":504},[494,1231,1232,1235,1237,1239,1241],{"class":496,"line":677},[494,1233,1234],{"class":550},"        setThemeState",[494,1236,619],{"class":711},[494,1238,1219],{"class":508},[494,1240,638],{"class":711},[494,1242,528],{"class":504},[494,1244,1245],{"class":496,"line":682},[494,1246,534],{"emptyLinePlaceholder":206},[494,1248,1249,1252,1254,1257,1260,1263,1265,1268,1270,1273],{"class":496,"line":688},[494,1250,1251],{"class":500},"        if",[494,1253,778],{"class":711},[494,1255,1256],{"class":504},"typeof",[494,1258,1259],{"class":508}," window",[494,1261,1262],{"class":504}," !==",[494,1264,518],{"class":504},[494,1266,1267],{"class":521},"undefined",[494,1269,525],{"class":504},[494,1271,1272],{"class":711},") ",[494,1274,1275],{"class":504},"{\n",[494,1277,1278,1281,1283,1286,1288,1291,1293,1295,1297,1299,1301,1304,1306],{"class":496,"line":708},[494,1279,1280],{"class":508},"            document",[494,1282,798],{"class":504},[494,1284,1285],{"class":508},"documentElement",[494,1287,798],{"class":504},[494,1289,1290],{"class":550},"setAttribute",[494,1292,619],{"class":711},[494,1294,525],{"class":504},[494,1296,424],{"class":521},[494,1298,525],{"class":504},[494,1300,568],{"class":504},[494,1302,1303],{"class":508}," newTheme",[494,1305,638],{"class":711},[494,1307,528],{"class":504},[494,1309,1310,1313,1315,1318,1320,1322,1324,1326,1328,1330,1332],{"class":496,"line":726},[494,1311,1312],{"class":508},"            localStorage",[494,1314,798],{"class":504},[494,1316,1317],{"class":550},"setItem",[494,1319,619],{"class":711},[494,1321,525],{"class":504},[494,1323,764],{"class":521},[494,1325,525],{"class":504},[494,1327,568],{"class":504},[494,1329,1303],{"class":508},[494,1331,638],{"class":711},[494,1333,528],{"class":504},[494,1335,1336],{"class":496,"line":741},[494,1337,1338],{"class":504},"        }\n",[494,1340,1341,1344,1347],{"class":496,"line":750},[494,1342,1343],{"class":504},"    },",[494,1345,1346],{"class":711}," [])",[494,1348,528],{"class":504},[494,1350,1351],{"class":496,"line":755},[494,1352,534],{"emptyLinePlaceholder":206},[494,1354,1355,1357,1360,1362,1364,1366,1368,1370],{"class":496,"line":761},[494,1356,1160],{"class":540},[494,1358,1359],{"class":508}," toggleTheme",[494,1361,587],{"class":504},[494,1363,1087],{"class":550},[494,1365,619],{"class":711},[494,1367,553],{"class":504},[494,1369,787],{"class":540},[494,1371,705],{"class":504},[494,1373,1374,1377,1379,1381,1384,1386,1388,1390,1393,1395,1397,1399,1402,1404,1406,1408,1410],{"class":496,"line":792},[494,1375,1376],{"class":550},"        setTheme",[494,1378,619],{"class":711},[494,1380,764],{"class":508},[494,1382,1383],{"class":504}," ===",[494,1385,518],{"class":504},[494,1387,771],{"class":521},[494,1389,525],{"class":504},[494,1391,1392],{"class":504}," ?",[494,1394,518],{"class":504},[494,1396,1119],{"class":521},[494,1398,525],{"class":504},[494,1400,1401],{"class":504}," :",[494,1403,518],{"class":504},[494,1405,771],{"class":521},[494,1407,525],{"class":504},[494,1409,638],{"class":711},[494,1411,528],{"class":504},[494,1413,1414,1416,1418,1420,1422,1424,1427],{"class":496,"line":822},[494,1415,1343],{"class":504},[494,1417,1163],{"class":711},[494,1419,764],{"class":508},[494,1421,568],{"class":504},[494,1423,1208],{"class":508},[494,1425,1426],{"class":711},"])",[494,1428,528],{"class":504},[494,1430,1431],{"class":496,"line":848},[494,1432,534],{"emptyLinePlaceholder":206},[494,1434,1435,1438,1440,1442,1444],{"class":496,"line":857},[494,1436,1437],{"class":550},"    useEffect",[494,1439,619],{"class":711},[494,1441,553],{"class":504},[494,1443,787],{"class":540},[494,1445,705],{"class":504},[494,1447,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466],{"class":496,"line":862},[494,1449,1251],{"class":500},[494,1451,778],{"class":711},[494,1453,1256],{"class":504},[494,1455,1259],{"class":508},[494,1457,1262],{"class":504},[494,1459,518],{"class":504},[494,1461,1267],{"class":521},[494,1463,525],{"class":504},[494,1465,1272],{"class":711},[494,1467,1275],{"class":504},[494,1469,1471,1474,1477,1479,1482,1484,1487,1489,1491,1493,1495,1497,1500,1502],{"class":496,"line":1470},23,[494,1472,1473],{"class":540},"            const",[494,1475,1476],{"class":508}," saved",[494,1478,587],{"class":504},[494,1480,1481],{"class":508}," localStorage",[494,1483,798],{"class":504},[494,1485,1486],{"class":550},"getItem",[494,1488,619],{"class":711},[494,1490,525],{"class":504},[494,1492,764],{"class":521},[494,1494,525],{"class":504},[494,1496,1272],{"class":711},[494,1498,1499],{"class":500},"as",[494,1501,1112],{"class":934},[494,1503,528],{"class":504},[494,1505,1507,1510,1512,1515,1518,1520,1522,1524,1526,1528,1530,1533,1535,1537,1539,1541,1543,1546],{"class":496,"line":1506},24,[494,1508,1509],{"class":500},"            if",[494,1511,778],{"class":711},[494,1513,1514],{"class":508},"saved",[494,1516,1517],{"class":504}," &&",[494,1519,778],{"class":711},[494,1521,1514],{"class":508},[494,1523,1383],{"class":504},[494,1525,518],{"class":504},[494,1527,1119],{"class":521},[494,1529,525],{"class":504},[494,1531,1532],{"class":504}," ||",[494,1534,1476],{"class":508},[494,1536,1383],{"class":504},[494,1538,518],{"class":504},[494,1540,771],{"class":521},[494,1542,525],{"class":504},[494,1544,1545],{"class":711},")) ",[494,1547,1275],{"class":504},[494,1549,1551,1554,1556,1558,1560],{"class":496,"line":1550},25,[494,1552,1553],{"class":550},"                setTheme",[494,1555,619],{"class":711},[494,1557,1514],{"class":508},[494,1559,638],{"class":711},[494,1561,528],{"class":504},[494,1563,1565],{"class":496,"line":1564},26,[494,1566,1567],{"class":504},"            }\n",[494,1569,1571],{"class":496,"line":1570},27,[494,1572,1338],{"class":504},[494,1574,1576,1578,1580,1583,1585],{"class":496,"line":1575},28,[494,1577,1343],{"class":504},[494,1579,1163],{"class":711},[494,1581,1582],{"class":508},"setTheme",[494,1584,1426],{"class":711},[494,1586,528],{"class":504},[494,1588,1590],{"class":496,"line":1589},29,[494,1591,534],{"emptyLinePlaceholder":206},[494,1593,1595,1598],{"class":496,"line":1594},30,[494,1596,1597],{"class":500},"    return",[494,1599,705],{"class":504},[494,1601,1603,1606,1608],{"class":496,"line":1602},31,[494,1604,1605],{"class":508},"        theme",[494,1607,568],{"class":504},[494,1609,1610],{"class":711}," \n",[494,1612,1614,1616],{"class":496,"line":1613},32,[494,1615,1376],{"class":508},[494,1617,723],{"class":504},[494,1619,1621],{"class":496,"line":1620},33,[494,1622,1623],{"class":508},"        toggleTheme\n",[494,1625,1627,1630,1633,1635,1638],{"class":496,"line":1626},34,[494,1628,1629],{"class":504},"    }",[494,1631,1632],{"class":500}," as",[494,1634,1143],{"class":540},[494,1636,1637],{"class":504},";",[494,1639,1610],{"class":711},[494,1641,1643],{"class":496,"line":1642},35,[494,1644,1645],{"class":504},"};\n",[418,1647,1648],{},[444,1649,1650],{},"Usage:",[485,1652,1654],{"className":487,"code":1653,"language":489,"meta":490,"style":490},"import { useTheme } from './hooks/useTheme';\n\nfunction ThemeSwitcher() {\n    const { theme, toggleTheme } = useTheme();\n    \n    return (\n        \u003Cbutton onClick={toggleTheme}>\n            {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}\n        \u003C/button>\n    );\n}\n",[422,1655,1656,1678,1682,1694,1716,1721,1728,1748,1781,1791,1798],{"__ignoreMap":490},[494,1657,1658,1660,1662,1665,1667,1669,1671,1674,1676],{"class":496,"line":497},[494,1659,501],{"class":500},[494,1661,505],{"class":504},[494,1663,1664],{"class":508}," useTheme",[494,1666,512],{"class":504},[494,1668,515],{"class":500},[494,1670,518],{"class":504},[494,1672,1673],{"class":521},"./hooks/useTheme",[494,1675,525],{"class":504},[494,1677,528],{"class":504},[494,1679,1680],{"class":496,"line":531},[494,1681,534],{"emptyLinePlaceholder":206},[494,1683,1684,1687,1690,1692],{"class":496,"line":537},[494,1685,1686],{"class":540},"function",[494,1688,1689],{"class":550}," ThemeSwitcher",[494,1691,553],{"class":504},[494,1693,705],{"class":504},[494,1695,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714],{"class":496,"line":558},[494,1697,1160],{"class":540},[494,1699,505],{"class":504},[494,1701,571],{"class":508},[494,1703,568],{"class":504},[494,1705,1359],{"class":508},[494,1707,512],{"class":504},[494,1709,587],{"class":504},[494,1711,1664],{"class":550},[494,1713,553],{"class":711},[494,1715,528],{"class":504},[494,1717,1718],{"class":496,"line":595},[494,1719,1720],{"class":711},"    \n",[494,1722,1723,1725],{"class":496,"line":600},[494,1724,1597],{"class":500},[494,1726,1727],{"class":711}," (\n",[494,1729,1730,1733,1736,1739,1742,1745],{"class":496,"line":607},[494,1731,1732],{"class":504},"        \u003C",[494,1734,1735],{"class":508},"button",[494,1737,1738],{"class":508}," onClick",[494,1740,1741],{"class":504},"={",[494,1743,1744],{"class":508},"toggleTheme",[494,1746,1747],{"class":504},"}>\n",[494,1749,1750,1753,1755,1758,1760,1763,1765,1768,1770,1772,1774,1777,1779],{"class":496,"line":643},[494,1751,1752],{"class":504},"            {",[494,1754,764],{"class":781},[494,1756,1757],{"class":711}," === '",[494,1759,771],{"class":781},[494,1761,1762],{"class":711},"' ? ",[494,1764,525],{"class":504},[494,1766,1767],{"class":521},"☀️ Light",[494,1769,525],{"class":504},[494,1771,1401],{"class":504},[494,1773,518],{"class":504},[494,1775,1776],{"class":521},"🌙 Dark",[494,1778,525],{"class":504},[494,1780,925],{"class":504},[494,1782,1783,1786,1788],{"class":496,"line":677},[494,1784,1785],{"class":504},"        \u003C/",[494,1787,1735],{"class":508},[494,1789,1790],{"class":504},">\n",[494,1792,1793,1796],{"class":496,"line":682},[494,1794,1795],{"class":711},"    )",[494,1797,528],{"class":504},[494,1799,1800],{"class":496,"line":688},[494,1801,925],{"class":504},[480,1803,1806,2287,2291],{"icon":1804,"label":1805},"i-devicon-vuejs","Vue",[485,1807,1809],{"className":487,"code":1808,"language":489,"meta":490,"style":490},"import { ref, onMounted, readonly } from 'vue';\n\ntype Theme = 'light' | 'dark';\n\nexport const useTheme = () => {\n    const theme = ref\u003CTheme>('light');\n    \n    const setTheme = (newTheme: Theme) => {\n        theme.value = newTheme;\n        \n        if (typeof window !== 'undefined') {\n            document.documentElement.setAttribute('data-theme', newTheme);\n            localStorage.setItem('theme', newTheme);\n        }\n    }\n    \n    const toggleTheme = () => {\n        setTheme(theme.value === 'dark' ? 'light' : 'dark')\n    }\n    \n    onMounted(() => {\n        if (typeof window !== 'undefined') {\n            const saved = localStorage.getItem('theme') as Theme;\n            if (saved && (saved === 'light' || saved === 'dark')) {\n                setTheme(saved);\n            }\n        }\n    });\n    \n    return {\n        theme: readonly(theme),\n        setTheme,\n        toggleTheme\n    }\n}\n",[422,1810,1811,1842,1846,1870,1874,1890,1918,1922,1944,1959,1964,1986,2014,2038,2042,2047,2051,2065,2104,2108,2112,2125,2147,2177,2215,2227,2231,2235,2243,2247,2253,2269,2275,2279,2283],{"__ignoreMap":490},[494,1812,1813,1815,1817,1819,1821,1824,1826,1829,1831,1833,1835,1838,1840],{"class":496,"line":497},[494,1814,501],{"class":500},[494,1816,505],{"class":504},[494,1818,576],{"class":508},[494,1820,568],{"class":504},[494,1822,1823],{"class":508}," onMounted",[494,1825,568],{"class":504},[494,1827,1828],{"class":508}," readonly",[494,1830,512],{"class":504},[494,1832,515],{"class":500},[494,1834,518],{"class":504},[494,1836,1837],{"class":521},"vue",[494,1839,525],{"class":504},[494,1841,528],{"class":504},[494,1843,1844],{"class":496,"line":531},[494,1845,534],{"emptyLinePlaceholder":206},[494,1847,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868],{"class":496,"line":537},[494,1849,1109],{"class":540},[494,1851,1112],{"class":934},[494,1853,587],{"class":504},[494,1855,518],{"class":504},[494,1857,1119],{"class":521},[494,1859,525],{"class":504},[494,1861,1124],{"class":504},[494,1863,518],{"class":504},[494,1865,771],{"class":521},[494,1867,525],{"class":504},[494,1869,528],{"class":504},[494,1871,1872],{"class":496,"line":558},[494,1873,534],{"emptyLinePlaceholder":206},[494,1875,1876,1878,1880,1882,1884,1886,1888],{"class":496,"line":595},[494,1877,865],{"class":500},[494,1879,1143],{"class":540},[494,1881,1146],{"class":508},[494,1883,547],{"class":504},[494,1885,1151],{"class":504},[494,1887,787],{"class":540},[494,1889,705],{"class":504},[494,1891,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916],{"class":496,"line":600},[494,1893,1160],{"class":540},[494,1895,571],{"class":508},[494,1897,587],{"class":504},[494,1899,576],{"class":550},[494,1901,1179],{"class":504},[494,1903,1182],{"class":934},[494,1905,1185],{"class":504},[494,1907,619],{"class":711},[494,1909,525],{"class":504},[494,1911,1119],{"class":521},[494,1913,525],{"class":504},[494,1915,638],{"class":711},[494,1917,528],{"class":504},[494,1919,1920],{"class":496,"line":607},[494,1921,1720],{"class":711},[494,1923,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942],{"class":496,"line":643},[494,1925,1160],{"class":540},[494,1927,1208],{"class":508},[494,1929,587],{"class":504},[494,1931,778],{"class":504},[494,1933,1219],{"class":781},[494,1935,715],{"class":504},[494,1937,1112],{"class":934},[494,1939,638],{"class":504},[494,1941,787],{"class":540},[494,1943,705],{"class":504},[494,1945,1946,1948,1950,1953,1955,1957],{"class":496,"line":677},[494,1947,1605],{"class":508},[494,1949,798],{"class":504},[494,1951,1952],{"class":508},"value",[494,1954,587],{"class":504},[494,1956,1303],{"class":508},[494,1958,528],{"class":504},[494,1960,1961],{"class":496,"line":682},[494,1962,1963],{"class":711},"        \n",[494,1965,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984],{"class":496,"line":688},[494,1967,1251],{"class":500},[494,1969,778],{"class":711},[494,1971,1256],{"class":504},[494,1973,1259],{"class":508},[494,1975,1262],{"class":504},[494,1977,518],{"class":504},[494,1979,1267],{"class":521},[494,1981,525],{"class":504},[494,1983,1272],{"class":711},[494,1985,1275],{"class":504},[494,1987,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012],{"class":496,"line":708},[494,1989,1280],{"class":508},[494,1991,798],{"class":504},[494,1993,1285],{"class":508},[494,1995,798],{"class":504},[494,1997,1290],{"class":550},[494,1999,619],{"class":711},[494,2001,525],{"class":504},[494,2003,424],{"class":521},[494,2005,525],{"class":504},[494,2007,568],{"class":504},[494,2009,1303],{"class":508},[494,2011,638],{"class":711},[494,2013,528],{"class":504},[494,2015,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036],{"class":496,"line":726},[494,2017,1312],{"class":508},[494,2019,798],{"class":504},[494,2021,1317],{"class":550},[494,2023,619],{"class":711},[494,2025,525],{"class":504},[494,2027,764],{"class":521},[494,2029,525],{"class":504},[494,2031,568],{"class":504},[494,2033,1303],{"class":508},[494,2035,638],{"class":711},[494,2037,528],{"class":504},[494,2039,2040],{"class":496,"line":741},[494,2041,1338],{"class":504},[494,2043,2044],{"class":496,"line":750},[494,2045,2046],{"class":504},"    }\n",[494,2048,2049],{"class":496,"line":755},[494,2050,1720],{"class":711},[494,2052,2053,2055,2057,2059,2061,2063],{"class":496,"line":761},[494,2054,1160],{"class":540},[494,2056,1359],{"class":508},[494,2058,587],{"class":504},[494,2060,1151],{"class":504},[494,2062,787],{"class":540},[494,2064,705],{"class":504},[494,2066,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101],{"class":496,"line":792},[494,2068,1376],{"class":550},[494,2070,619],{"class":711},[494,2072,764],{"class":508},[494,2074,798],{"class":504},[494,2076,1952],{"class":508},[494,2078,1383],{"class":504},[494,2080,518],{"class":504},[494,2082,771],{"class":521},[494,2084,525],{"class":504},[494,2086,1392],{"class":504},[494,2088,518],{"class":504},[494,2090,1119],{"class":521},[494,2092,525],{"class":504},[494,2094,1401],{"class":504},[494,2096,518],{"class":504},[494,2098,771],{"class":521},[494,2100,525],{"class":504},[494,2102,2103],{"class":711},")\n",[494,2105,2106],{"class":496,"line":822},[494,2107,2046],{"class":504},[494,2109,2110],{"class":496,"line":848},[494,2111,1720],{"class":711},[494,2113,2114,2117,2119,2121,2123],{"class":496,"line":857},[494,2115,2116],{"class":550},"    onMounted",[494,2118,619],{"class":711},[494,2120,553],{"class":504},[494,2122,787],{"class":540},[494,2124,705],{"class":504},[494,2126,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145],{"class":496,"line":862},[494,2128,1251],{"class":500},[494,2130,778],{"class":711},[494,2132,1256],{"class":504},[494,2134,1259],{"class":508},[494,2136,1262],{"class":504},[494,2138,518],{"class":504},[494,2140,1267],{"class":521},[494,2142,525],{"class":504},[494,2144,1272],{"class":711},[494,2146,1275],{"class":504},[494,2148,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175],{"class":496,"line":1470},[494,2150,1473],{"class":540},[494,2152,1476],{"class":508},[494,2154,587],{"class":504},[494,2156,1481],{"class":508},[494,2158,798],{"class":504},[494,2160,1486],{"class":550},[494,2162,619],{"class":711},[494,2164,525],{"class":504},[494,2166,764],{"class":521},[494,2168,525],{"class":504},[494,2170,1272],{"class":711},[494,2172,1499],{"class":500},[494,2174,1112],{"class":934},[494,2176,528],{"class":504},[494,2178,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213],{"class":496,"line":1506},[494,2180,1509],{"class":500},[494,2182,778],{"class":711},[494,2184,1514],{"class":508},[494,2186,1517],{"class":504},[494,2188,778],{"class":711},[494,2190,1514],{"class":508},[494,2192,1383],{"class":504},[494,2194,518],{"class":504},[494,2196,1119],{"class":521},[494,2198,525],{"class":504},[494,2200,1532],{"class":504},[494,2202,1476],{"class":508},[494,2204,1383],{"class":504},[494,2206,518],{"class":504},[494,2208,771],{"class":521},[494,2210,525],{"class":504},[494,2212,1545],{"class":711},[494,2214,1275],{"class":504},[494,2216,2217,2219,2221,2223,2225],{"class":496,"line":1550},[494,2218,1553],{"class":550},[494,2220,619],{"class":711},[494,2222,1514],{"class":508},[494,2224,638],{"class":711},[494,2226,528],{"class":504},[494,2228,2229],{"class":496,"line":1564},[494,2230,1567],{"class":504},[494,2232,2233],{"class":496,"line":1570},[494,2234,1338],{"class":504},[494,2236,2237,2239,2241],{"class":496,"line":1575},[494,2238,1629],{"class":504},[494,2240,638],{"class":711},[494,2242,528],{"class":504},[494,2244,2245],{"class":496,"line":1589},[494,2246,1720],{"class":711},[494,2248,2249,2251],{"class":496,"line":1594},[494,2250,1597],{"class":500},[494,2252,705],{"class":504},[494,2254,2255,2257,2259,2261,2263,2265,2267],{"class":496,"line":1602},[494,2256,1605],{"class":711},[494,2258,715],{"class":504},[494,2260,1828],{"class":550},[494,2262,619],{"class":711},[494,2264,764],{"class":508},[494,2266,638],{"class":711},[494,2268,723],{"class":504},[494,2270,2271,2273],{"class":496,"line":1613},[494,2272,1376],{"class":508},[494,2274,723],{"class":504},[494,2276,2277],{"class":496,"line":1620},[494,2278,1623],{"class":508},[494,2280,2281],{"class":496,"line":1626},[494,2282,2046],{"class":504},[494,2284,2285],{"class":496,"line":1642},[494,2286,925],{"class":504},[418,2288,2289],{},[444,2290,1650],{},[485,2292,2295],{"className":2293,"code":2294,"language":1837,"meta":490,"style":490},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { useTheme } from './composables/useTheme';\n\nconst { theme, toggleTheme } = useTheme();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"toggleTheme\">\n        {{ theme === 'dark' ? '☀️ Light' : '🌙 Dark' }}\n    \u003C/button>\n\u003C/template>\n",[422,2296,2297,2309,2330,2334,2357,2366,2370,2379,2402,2438,2447],{"__ignoreMap":490},[494,2298,2299,2301,2304,2307],{"class":496,"line":497},[494,2300,1179],{"class":504},[494,2302,2303],{"class":711},"script",[494,2305,2306],{"class":540}," setup",[494,2308,1790],{"class":504},[494,2310,2311,2313,2315,2317,2319,2321,2323,2326,2328],{"class":496,"line":531},[494,2312,501],{"class":500},[494,2314,505],{"class":504},[494,2316,1664],{"class":508},[494,2318,512],{"class":504},[494,2320,515],{"class":500},[494,2322,518],{"class":504},[494,2324,2325],{"class":521},"./composables/useTheme",[494,2327,525],{"class":504},[494,2329,528],{"class":504},[494,2331,2332],{"class":496,"line":537},[494,2333,534],{"emptyLinePlaceholder":206},[494,2335,2336,2338,2340,2342,2344,2347,2349,2351,2353,2355],{"class":496,"line":558},[494,2337,541],{"class":540},[494,2339,505],{"class":504},[494,2341,571],{"class":508},[494,2343,568],{"class":504},[494,2345,2346],{"class":508}," toggleTheme ",[494,2348,584],{"class":504},[494,2350,587],{"class":504},[494,2352,1664],{"class":550},[494,2354,553],{"class":508},[494,2356,528],{"class":504},[494,2358,2359,2362,2364],{"class":496,"line":595},[494,2360,2361],{"class":504},"\u003C/",[494,2363,2303],{"class":711},[494,2365,1790],{"class":504},[494,2367,2368],{"class":496,"line":600},[494,2369,534],{"emptyLinePlaceholder":206},[494,2371,2372,2374,2377],{"class":496,"line":607},[494,2373,1179],{"class":504},[494,2375,2376],{"class":711},"template",[494,2378,1790],{"class":504},[494,2380,2381,2384,2386,2389,2392,2394,2396,2398,2400],{"class":496,"line":643},[494,2382,2383],{"class":504},"    \u003C",[494,2385,1735],{"class":711},[494,2387,2388],{"class":504}," @",[494,2390,2391],{"class":540},"click",[494,2393,547],{"class":504},[494,2395,990],{"class":504},[494,2397,1744],{"class":508},[494,2399,990],{"class":504},[494,2401,1790],{"class":504},[494,2403,2404,2407,2410,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435],{"class":496,"line":677},[494,2405,2406],{"class":504},"        {{",[494,2408,2409],{"class":508}," theme ",[494,2411,2412],{"class":504},"===",[494,2414,518],{"class":504},[494,2416,771],{"class":521},[494,2418,525],{"class":504},[494,2420,1392],{"class":504},[494,2422,518],{"class":504},[494,2424,1767],{"class":521},[494,2426,525],{"class":504},[494,2428,1401],{"class":504},[494,2430,518],{"class":504},[494,2432,1776],{"class":521},[494,2434,525],{"class":504},[494,2436,2437],{"class":504}," }}\n",[494,2439,2440,2443,2445],{"class":496,"line":682},[494,2441,2442],{"class":504},"    \u003C/",[494,2444,1735],{"class":711},[494,2446,1790],{"class":504},[494,2448,2449,2451,2453],{"class":496,"line":688},[494,2450,2361],{"class":504},[494,2452,2376],{"class":711},[494,2454,1790],{"class":504},[480,2456,2459,2951,2955],{"icon":2457,"label":2458},"i-devicon-typescript","TypeScript",[485,2460,2462],{"className":487,"code":2461,"language":489,"meta":490,"style":490},"type Theme = 'light' | 'dark';\n\nlet currentTheme: Theme = 'light';\n\nconst initializeTheme = (): void => {\n    if (typeof window !== 'undefined') {\n        const saved = localStorage.getItem('theme') as Theme;\n        if (saved && (saved === 'light' || saved === 'dark')) {\n            currentTheme = saved;\n        }\n\n        document.documentElement.setAttribute('data-theme', currentTheme);\n    }\n};\n\nexport const getTheme = (): Theme => currentTheme;\n\nexport const setTheme = (newTheme: Theme): void => {\n    currentTheme = newTheme;\n\n    if (typeof window !== 'undefined') {\n        document.documentElement.setAttribute('data-theme', newTheme);\n        localStorage.setItem('theme', newTheme);\n    }\n};\n\nexport const toggleTheme = (): void => {\n    setTheme(currentTheme === 'dark' ? 'light' : 'dark');\n};\n\n// Initialize on load\nif (typeof window !== 'undefined') {\n    initializeTheme();\n}\n",[422,2463,2464,2488,2492,2514,2518,2537,2560,2591,2629,2640,2644,2648,2677,2681,2685,2689,2710,2714,2742,2753,2757,2779,2807,2832,2836,2840,2844,2862,2900,2904,2908,2913,2938,2947],{"__ignoreMap":490},[494,2465,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486],{"class":496,"line":497},[494,2467,1109],{"class":540},[494,2469,1112],{"class":934},[494,2471,587],{"class":504},[494,2473,518],{"class":504},[494,2475,1119],{"class":521},[494,2477,525],{"class":504},[494,2479,1124],{"class":504},[494,2481,518],{"class":504},[494,2483,771],{"class":521},[494,2485,525],{"class":504},[494,2487,528],{"class":504},[494,2489,2490],{"class":496,"line":531},[494,2491,534],{"emptyLinePlaceholder":206},[494,2493,2494,2497,2500,2502,2504,2506,2508,2510,2512],{"class":496,"line":537},[494,2495,2496],{"class":540},"let",[494,2498,2499],{"class":508}," currentTheme",[494,2501,715],{"class":504},[494,2503,1112],{"class":934},[494,2505,587],{"class":504},[494,2507,518],{"class":504},[494,2509,1119],{"class":521},[494,2511,525],{"class":504},[494,2513,528],{"class":504},[494,2515,2516],{"class":496,"line":558},[494,2517,534],{"emptyLinePlaceholder":206},[494,2519,2520,2522,2525,2527,2530,2533,2535],{"class":496,"line":595},[494,2521,541],{"class":540},[494,2523,2524],{"class":508}," initializeTheme ",[494,2526,547],{"class":504},[494,2528,2529],{"class":504}," ():",[494,2531,2532],{"class":934}," void",[494,2534,787],{"class":540},[494,2536,705],{"class":504},[494,2538,2539,2542,2544,2546,2548,2550,2552,2554,2556,2558],{"class":496,"line":600},[494,2540,2541],{"class":500},"    if",[494,2543,778],{"class":711},[494,2545,1256],{"class":504},[494,2547,1259],{"class":508},[494,2549,1262],{"class":504},[494,2551,518],{"class":504},[494,2553,1267],{"class":521},[494,2555,525],{"class":504},[494,2557,1272],{"class":711},[494,2559,1275],{"class":504},[494,2561,2562,2565,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589],{"class":496,"line":607},[494,2563,2564],{"class":540},"        const",[494,2566,1476],{"class":508},[494,2568,587],{"class":504},[494,2570,1481],{"class":508},[494,2572,798],{"class":504},[494,2574,1486],{"class":550},[494,2576,619],{"class":711},[494,2578,525],{"class":504},[494,2580,764],{"class":521},[494,2582,525],{"class":504},[494,2584,1272],{"class":711},[494,2586,1499],{"class":500},[494,2588,1112],{"class":934},[494,2590,528],{"class":504},[494,2592,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2627],{"class":496,"line":643},[494,2594,1251],{"class":500},[494,2596,778],{"class":711},[494,2598,1514],{"class":508},[494,2600,1517],{"class":504},[494,2602,778],{"class":711},[494,2604,1514],{"class":508},[494,2606,1383],{"class":504},[494,2608,518],{"class":504},[494,2610,1119],{"class":521},[494,2612,525],{"class":504},[494,2614,1532],{"class":504},[494,2616,1476],{"class":508},[494,2618,1383],{"class":504},[494,2620,518],{"class":504},[494,2622,771],{"class":521},[494,2624,525],{"class":504},[494,2626,1545],{"class":711},[494,2628,1275],{"class":504},[494,2630,2631,2634,2636,2638],{"class":496,"line":677},[494,2632,2633],{"class":508},"            currentTheme",[494,2635,587],{"class":504},[494,2637,1476],{"class":508},[494,2639,528],{"class":504},[494,2641,2642],{"class":496,"line":682},[494,2643,1338],{"class":504},[494,2645,2646],{"class":496,"line":688},[494,2647,534],{"emptyLinePlaceholder":206},[494,2649,2650,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675],{"class":496,"line":708},[494,2651,2652],{"class":508},"        document",[494,2654,798],{"class":504},[494,2656,1285],{"class":508},[494,2658,798],{"class":504},[494,2660,1290],{"class":550},[494,2662,619],{"class":711},[494,2664,525],{"class":504},[494,2666,424],{"class":521},[494,2668,525],{"class":504},[494,2670,568],{"class":504},[494,2672,2499],{"class":508},[494,2674,638],{"class":711},[494,2676,528],{"class":504},[494,2678,2679],{"class":496,"line":726},[494,2680,2046],{"class":504},[494,2682,2683],{"class":496,"line":741},[494,2684,1645],{"class":504},[494,2686,2687],{"class":496,"line":750},[494,2688,534],{"emptyLinePlaceholder":206},[494,2690,2691,2693,2695,2698,2700,2702,2704,2706,2708],{"class":496,"line":755},[494,2692,865],{"class":500},[494,2694,1143],{"class":540},[494,2696,2697],{"class":508}," getTheme ",[494,2699,547],{"class":504},[494,2701,2529],{"class":504},[494,2703,1112],{"class":934},[494,2705,787],{"class":540},[494,2707,2499],{"class":508},[494,2709,528],{"class":504},[494,2711,2712],{"class":496,"line":761},[494,2713,534],{"emptyLinePlaceholder":206},[494,2715,2716,2718,2720,2723,2725,2727,2729,2731,2733,2736,2738,2740],{"class":496,"line":792},[494,2717,865],{"class":500},[494,2719,1143],{"class":540},[494,2721,2722],{"class":508}," setTheme ",[494,2724,547],{"class":504},[494,2726,778],{"class":504},[494,2728,1219],{"class":781},[494,2730,715],{"class":504},[494,2732,1112],{"class":934},[494,2734,2735],{"class":504},"):",[494,2737,2532],{"class":934},[494,2739,787],{"class":540},[494,2741,705],{"class":504},[494,2743,2744,2747,2749,2751],{"class":496,"line":822},[494,2745,2746],{"class":508},"    currentTheme",[494,2748,587],{"class":504},[494,2750,1303],{"class":508},[494,2752,528],{"class":504},[494,2754,2755],{"class":496,"line":848},[494,2756,534],{"emptyLinePlaceholder":206},[494,2758,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777],{"class":496,"line":857},[494,2760,2541],{"class":500},[494,2762,778],{"class":711},[494,2764,1256],{"class":504},[494,2766,1259],{"class":508},[494,2768,1262],{"class":504},[494,2770,518],{"class":504},[494,2772,1267],{"class":521},[494,2774,525],{"class":504},[494,2776,1272],{"class":711},[494,2778,1275],{"class":504},[494,2780,2781,2783,2785,2787,2789,2791,2793,2795,2797,2799,2801,2803,2805],{"class":496,"line":862},[494,2782,2652],{"class":508},[494,2784,798],{"class":504},[494,2786,1285],{"class":508},[494,2788,798],{"class":504},[494,2790,1290],{"class":550},[494,2792,619],{"class":711},[494,2794,525],{"class":504},[494,2796,424],{"class":521},[494,2798,525],{"class":504},[494,2800,568],{"class":504},[494,2802,1303],{"class":508},[494,2804,638],{"class":711},[494,2806,528],{"class":504},[494,2808,2809,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830],{"class":496,"line":1470},[494,2810,2811],{"class":508},"        localStorage",[494,2813,798],{"class":504},[494,2815,1317],{"class":550},[494,2817,619],{"class":711},[494,2819,525],{"class":504},[494,2821,764],{"class":521},[494,2823,525],{"class":504},[494,2825,568],{"class":504},[494,2827,1303],{"class":508},[494,2829,638],{"class":711},[494,2831,528],{"class":504},[494,2833,2834],{"class":496,"line":1506},[494,2835,2046],{"class":504},[494,2837,2838],{"class":496,"line":1550},[494,2839,1645],{"class":504},[494,2841,2842],{"class":496,"line":1564},[494,2843,534],{"emptyLinePlaceholder":206},[494,2845,2846,2848,2850,2852,2854,2856,2858,2860],{"class":496,"line":1570},[494,2847,865],{"class":500},[494,2849,1143],{"class":540},[494,2851,2346],{"class":508},[494,2853,547],{"class":504},[494,2855,2529],{"class":504},[494,2857,2532],{"class":934},[494,2859,787],{"class":540},[494,2861,705],{"class":504},[494,2863,2864,2867,2869,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898],{"class":496,"line":1575},[494,2865,2866],{"class":550},"    setTheme",[494,2868,619],{"class":711},[494,2870,2871],{"class":508},"currentTheme",[494,2873,1383],{"class":504},[494,2875,518],{"class":504},[494,2877,771],{"class":521},[494,2879,525],{"class":504},[494,2881,1392],{"class":504},[494,2883,518],{"class":504},[494,2885,1119],{"class":521},[494,2887,525],{"class":504},[494,2889,1401],{"class":504},[494,2891,518],{"class":504},[494,2893,771],{"class":521},[494,2895,525],{"class":504},[494,2897,638],{"class":711},[494,2899,528],{"class":504},[494,2901,2902],{"class":496,"line":1589},[494,2903,1645],{"class":504},[494,2905,2906],{"class":496,"line":1594},[494,2907,534],{"emptyLinePlaceholder":206},[494,2909,2910],{"class":496,"line":1602},[494,2911,2912],{"class":603},"// Initialize on load\n",[494,2914,2915,2918,2920,2922,2925,2928,2930,2932,2934,2936],{"class":496,"line":1613},[494,2916,2917],{"class":500},"if",[494,2919,778],{"class":508},[494,2921,1256],{"class":504},[494,2923,2924],{"class":508}," window ",[494,2926,2927],{"class":504},"!==",[494,2929,518],{"class":504},[494,2931,1267],{"class":521},[494,2933,525],{"class":504},[494,2935,1272],{"class":508},[494,2937,1275],{"class":504},[494,2939,2940,2943,2945],{"class":496,"line":1620},[494,2941,2942],{"class":550},"    initializeTheme",[494,2944,553],{"class":711},[494,2946,528],{"class":504},[494,2948,2949],{"class":496,"line":1626},[494,2950,925],{"class":504},[418,2952,2953],{},[444,2954,1650],{},[485,2956,2958],{"className":487,"code":2957,"language":489,"meta":490,"style":490},"import { getTheme, toggleTheme } from './theme';\n\nconst button = document.querySelector('#theme-toggle');\nbutton?.addEventListener('click', () => {\n    toggleTheme();\n    button.textContent = getTheme() === 'dark' ? '☀️ Light' : '🌙 Dark';\n});\n",[422,2959,2960,2986,2990,3020,3046,3055,3098],{"__ignoreMap":490},[494,2961,2962,2964,2966,2969,2971,2973,2975,2977,2979,2982,2984],{"class":496,"line":497},[494,2963,501],{"class":500},[494,2965,505],{"class":504},[494,2967,2968],{"class":508}," getTheme",[494,2970,568],{"class":504},[494,2972,1359],{"class":508},[494,2974,512],{"class":504},[494,2976,515],{"class":500},[494,2978,518],{"class":504},[494,2980,2981],{"class":521},"./theme",[494,2983,525],{"class":504},[494,2985,528],{"class":504},[494,2987,2988],{"class":496,"line":531},[494,2989,534],{"emptyLinePlaceholder":206},[494,2991,2992,2994,2997,2999,3002,3004,3007,3009,3011,3014,3016,3018],{"class":496,"line":537},[494,2993,541],{"class":540},[494,2995,2996],{"class":508}," button ",[494,2998,547],{"class":504},[494,3000,3001],{"class":508}," document",[494,3003,798],{"class":504},[494,3005,3006],{"class":550},"querySelector",[494,3008,619],{"class":508},[494,3010,525],{"class":504},[494,3012,3013],{"class":521},"#theme-toggle",[494,3015,525],{"class":504},[494,3017,638],{"class":508},[494,3019,528],{"class":504},[494,3021,3022,3024,3027,3030,3032,3034,3036,3038,3040,3042,3044],{"class":496,"line":558},[494,3023,1735],{"class":508},[494,3025,3026],{"class":504},"?.",[494,3028,3029],{"class":550},"addEventListener",[494,3031,619],{"class":508},[494,3033,525],{"class":504},[494,3035,2391],{"class":521},[494,3037,525],{"class":504},[494,3039,568],{"class":504},[494,3041,1151],{"class":504},[494,3043,787],{"class":540},[494,3045,705],{"class":504},[494,3047,3048,3051,3053],{"class":496,"line":595},[494,3049,3050],{"class":550},"    toggleTheme",[494,3052,553],{"class":711},[494,3054,528],{"class":504},[494,3056,3057,3060,3062,3065,3067,3069,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096],{"class":496,"line":600},[494,3058,3059],{"class":508},"    button",[494,3061,798],{"class":504},[494,3063,3064],{"class":508},"textContent",[494,3066,587],{"class":504},[494,3068,2968],{"class":550},[494,3070,3071],{"class":711},"() ",[494,3073,2412],{"class":504},[494,3075,518],{"class":504},[494,3077,771],{"class":521},[494,3079,525],{"class":504},[494,3081,1392],{"class":504},[494,3083,518],{"class":504},[494,3085,1767],{"class":521},[494,3087,525],{"class":504},[494,3089,1401],{"class":504},[494,3091,518],{"class":504},[494,3093,1776],{"class":521},[494,3095,525],{"class":504},[494,3097,528],{"class":504},[494,3099,3100,3102,3104],{"class":496,"line":607},[494,3101,584],{"class":504},[494,3103,638],{"class":508},[494,3105,528],{"class":504},[1036,3107,3108,3110],{},[444,3109,1040],{}," All implementations include localStorage persistence so the user's theme preference is remembered across sessions.",[414,3112,3114],{"id":3113},"examples","Examples",[3116,3117,3119],"h3",{"id":3118},"respecting-system-preferences","Respecting System Preferences",[418,3121,3122],{},"Detect and apply the user's system theme preference on first load:",[477,3124,3125],{},[480,3126,3128],{"icon":482,"label":3127},"Code",[485,3129,3131],{"className":487,"code":3130,"language":489,"meta":490,"style":490},"const getInitialTheme = (): Theme => {\n    // Check localStorage first\n    const saved = localStorage.getItem('theme') as Theme;\n    if (saved && (saved === 'light' || saved === 'dark')) {\n        return saved;\n    }\n    \n    // Fall back to system preference\n    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n        return 'dark';\n    }\n    \n    return 'light';\n};\n\n// Use in your initialization\nconst [theme, setThemeState] = useState\u003CTheme>(getInitialTheme);\n",[422,3132,3133,3150,3155,3185,3223,3232,3236,3240,3245,3279,3291,3295,3299,3311,3315,3319,3324],{"__ignoreMap":490},[494,3134,3135,3137,3140,3142,3144,3146,3148],{"class":496,"line":497},[494,3136,541],{"class":540},[494,3138,3139],{"class":508}," getInitialTheme ",[494,3141,547],{"class":504},[494,3143,2529],{"class":504},[494,3145,1112],{"class":934},[494,3147,787],{"class":540},[494,3149,705],{"class":504},[494,3151,3152],{"class":496,"line":531},[494,3153,3154],{"class":603},"    // Check localStorage first\n",[494,3156,3157,3159,3161,3163,3165,3167,3169,3171,3173,3175,3177,3179,3181,3183],{"class":496,"line":537},[494,3158,1160],{"class":540},[494,3160,1476],{"class":508},[494,3162,587],{"class":504},[494,3164,1481],{"class":508},[494,3166,798],{"class":504},[494,3168,1486],{"class":550},[494,3170,619],{"class":711},[494,3172,525],{"class":504},[494,3174,764],{"class":521},[494,3176,525],{"class":504},[494,3178,1272],{"class":711},[494,3180,1499],{"class":500},[494,3182,1112],{"class":934},[494,3184,528],{"class":504},[494,3186,3187,3189,3191,3193,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221],{"class":496,"line":558},[494,3188,2541],{"class":500},[494,3190,778],{"class":711},[494,3192,1514],{"class":508},[494,3194,1517],{"class":504},[494,3196,778],{"class":711},[494,3198,1514],{"class":508},[494,3200,1383],{"class":504},[494,3202,518],{"class":504},[494,3204,1119],{"class":521},[494,3206,525],{"class":504},[494,3208,1532],{"class":504},[494,3210,1476],{"class":508},[494,3212,1383],{"class":504},[494,3214,518],{"class":504},[494,3216,771],{"class":521},[494,3218,525],{"class":504},[494,3220,1545],{"class":711},[494,3222,1275],{"class":504},[494,3224,3225,3228,3230],{"class":496,"line":595},[494,3226,3227],{"class":500},"        return",[494,3229,1476],{"class":508},[494,3231,528],{"class":504},[494,3233,3234],{"class":496,"line":600},[494,3235,2046],{"class":504},[494,3237,3238],{"class":496,"line":607},[494,3239,1720],{"class":711},[494,3241,3242],{"class":496,"line":643},[494,3243,3244],{"class":603},"    // Fall back to system preference\n",[494,3246,3247,3249,3251,3254,3256,3259,3261,3263,3266,3268,3270,3272,3275,3277],{"class":496,"line":677},[494,3248,2541],{"class":500},[494,3250,778],{"class":711},[494,3252,3253],{"class":508},"window",[494,3255,798],{"class":504},[494,3257,3258],{"class":550},"matchMedia",[494,3260,619],{"class":711},[494,3262,525],{"class":504},[494,3264,3265],{"class":521},"(prefers-color-scheme: dark)",[494,3267,525],{"class":504},[494,3269,638],{"class":711},[494,3271,798],{"class":504},[494,3273,3274],{"class":508},"matches",[494,3276,1272],{"class":711},[494,3278,1275],{"class":504},[494,3280,3281,3283,3285,3287,3289],{"class":496,"line":682},[494,3282,3227],{"class":500},[494,3284,518],{"class":504},[494,3286,771],{"class":521},[494,3288,525],{"class":504},[494,3290,528],{"class":504},[494,3292,3293],{"class":496,"line":688},[494,3294,2046],{"class":504},[494,3296,3297],{"class":496,"line":708},[494,3298,1720],{"class":711},[494,3300,3301,3303,3305,3307,3309],{"class":496,"line":726},[494,3302,1597],{"class":500},[494,3304,518],{"class":504},[494,3306,1119],{"class":521},[494,3308,525],{"class":504},[494,3310,528],{"class":504},[494,3312,3313],{"class":496,"line":741},[494,3314,1645],{"class":504},[494,3316,3317],{"class":496,"line":750},[494,3318,534],{"emptyLinePlaceholder":206},[494,3320,3321],{"class":496,"line":755},[494,3322,3323],{"class":603},"// Use in your initialization\n",[494,3325,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3351],{"class":496,"line":761},[494,3327,541],{"class":540},[494,3329,1163],{"class":504},[494,3331,764],{"class":508},[494,3333,568],{"class":504},[494,3335,1170],{"class":508},[494,3337,997],{"class":504},[494,3339,587],{"class":504},[494,3341,1077],{"class":550},[494,3343,1179],{"class":504},[494,3345,1182],{"class":934},[494,3347,1185],{"class":504},[494,3349,3350],{"class":508},"(getInitialTheme)",[494,3352,528],{"class":504},[418,3354,3355],{},"This approach provides the best user experience by:",[3357,3358,3359,3362,3365],"ol",{},[441,3360,3361],{},"Respecting explicit user choices (localStorage)",[441,3363,3364],{},"Falling back to system preferences",[441,3366,3367],{},"Defaulting to light mode as a final fallback",[3116,3369,3371],{"id":3370},"multiple-theme-support","Multiple Theme Support",[418,3373,3374],{},"Extend your theme switcher to support more than two themes:",[477,3376,3377,3836],{},[480,3378,3379],{"icon":482,"label":483},[485,3380,3382],{"className":487,"code":3381,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { variable, theme, ref, selector } = s;\n\nconst backgroundColor = variable('bg-color', '#ffffff');\nconst textColor = variable('text-color', '#000000');\n\nselector('body', {\n    backgroundColor: ref(backgroundColor),\n    color: ref(textColor),\n});\n\ntheme('dark', (ctx) => {\n    ctx.variable(backgroundColor, '#1a1a1a');\n    ctx.variable(textColor, '#ffffff');\n});\n\ntheme('sepia', (ctx) => {\n    ctx.variable(backgroundColor, '#f4ecd8');\n    ctx.variable(textColor, '#5c4e3a');\n});\n\ntheme('high-contrast', (ctx) => {\n    ctx.variable(backgroundColor, '#000000');\n    ctx.variable(textColor, '#ffffff');\n});\n\nexport default s;\n",[422,3383,3384,3404,3408,3422,3450,3454,3484,3514,3518,3534,3546,3558,3566,3570,3594,3618,3642,3650,3654,3679,3704,3729,3737,3741,3766,3790,3814,3822,3826],{"__ignoreMap":490},[494,3385,3386,3388,3390,3392,3394,3396,3398,3400,3402],{"class":496,"line":497},[494,3387,501],{"class":500},[494,3389,505],{"class":504},[494,3391,509],{"class":508},[494,3393,512],{"class":504},[494,3395,515],{"class":500},[494,3397,518],{"class":504},[494,3399,522],{"class":521},[494,3401,525],{"class":504},[494,3403,528],{"class":504},[494,3405,3406],{"class":496,"line":531},[494,3407,534],{"emptyLinePlaceholder":206},[494,3409,3410,3412,3414,3416,3418,3420],{"class":496,"line":537},[494,3411,541],{"class":540},[494,3413,544],{"class":508},[494,3415,547],{"class":504},[494,3417,509],{"class":550},[494,3419,553],{"class":508},[494,3421,528],{"class":504},[494,3423,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448],{"class":496,"line":558},[494,3425,541],{"class":540},[494,3427,505],{"class":504},[494,3429,565],{"class":508},[494,3431,568],{"class":504},[494,3433,571],{"class":508},[494,3435,568],{"class":504},[494,3437,576],{"class":508},[494,3439,568],{"class":504},[494,3441,581],{"class":508},[494,3443,584],{"class":504},[494,3445,587],{"class":504},[494,3447,590],{"class":508},[494,3449,528],{"class":504},[494,3451,3452],{"class":496,"line":595},[494,3453,534],{"emptyLinePlaceholder":206},[494,3455,3456,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3482],{"class":496,"line":600},[494,3457,541],{"class":540},[494,3459,612],{"class":508},[494,3461,547],{"class":504},[494,3463,565],{"class":550},[494,3465,619],{"class":508},[494,3467,525],{"class":504},[494,3469,624],{"class":521},[494,3471,525],{"class":504},[494,3473,568],{"class":504},[494,3475,518],{"class":504},[494,3477,633],{"class":521},[494,3479,525],{"class":504},[494,3481,638],{"class":508},[494,3483,528],{"class":504},[494,3485,3486,3488,3490,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512],{"class":496,"line":607},[494,3487,541],{"class":540},[494,3489,648],{"class":508},[494,3491,547],{"class":504},[494,3493,565],{"class":550},[494,3495,619],{"class":508},[494,3497,525],{"class":504},[494,3499,659],{"class":521},[494,3501,525],{"class":504},[494,3503,568],{"class":504},[494,3505,518],{"class":504},[494,3507,668],{"class":521},[494,3509,525],{"class":504},[494,3511,638],{"class":508},[494,3513,528],{"class":504},[494,3515,3516],{"class":496,"line":643},[494,3517,534],{"emptyLinePlaceholder":206},[494,3519,3520,3522,3524,3526,3528,3530,3532],{"class":496,"line":677},[494,3521,691],{"class":550},[494,3523,619],{"class":508},[494,3525,525],{"class":504},[494,3527,698],{"class":521},[494,3529,525],{"class":504},[494,3531,568],{"class":504},[494,3533,705],{"class":504},[494,3535,3536,3538,3540,3542,3544],{"class":496,"line":682},[494,3537,712],{"class":711},[494,3539,715],{"class":504},[494,3541,576],{"class":550},[494,3543,720],{"class":508},[494,3545,723],{"class":504},[494,3547,3548,3550,3552,3554,3556],{"class":496,"line":688},[494,3549,729],{"class":711},[494,3551,715],{"class":504},[494,3553,576],{"class":550},[494,3555,736],{"class":508},[494,3557,723],{"class":504},[494,3559,3560,3562,3564],{"class":496,"line":708},[494,3561,584],{"class":504},[494,3563,638],{"class":508},[494,3565,528],{"class":504},[494,3567,3568],{"class":496,"line":726},[494,3569,534],{"emptyLinePlaceholder":206},[494,3571,3572,3574,3576,3578,3580,3582,3584,3586,3588,3590,3592],{"class":496,"line":741},[494,3573,764],{"class":550},[494,3575,619],{"class":508},[494,3577,525],{"class":504},[494,3579,771],{"class":521},[494,3581,525],{"class":504},[494,3583,568],{"class":504},[494,3585,778],{"class":504},[494,3587,782],{"class":781},[494,3589,638],{"class":504},[494,3591,787],{"class":540},[494,3593,705],{"class":504},[494,3595,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616],{"class":496,"line":750},[494,3597,795],{"class":508},[494,3599,798],{"class":504},[494,3601,801],{"class":550},[494,3603,619],{"class":711},[494,3605,806],{"class":508},[494,3607,568],{"class":504},[494,3609,518],{"class":504},[494,3611,813],{"class":521},[494,3613,525],{"class":504},[494,3615,638],{"class":711},[494,3617,528],{"class":504},[494,3619,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3640],{"class":496,"line":755},[494,3621,795],{"class":508},[494,3623,798],{"class":504},[494,3625,801],{"class":550},[494,3627,619],{"class":711},[494,3629,833],{"class":508},[494,3631,568],{"class":504},[494,3633,518],{"class":504},[494,3635,633],{"class":521},[494,3637,525],{"class":504},[494,3639,638],{"class":711},[494,3641,528],{"class":504},[494,3643,3644,3646,3648],{"class":496,"line":761},[494,3645,584],{"class":504},[494,3647,638],{"class":508},[494,3649,528],{"class":504},[494,3651,3652],{"class":496,"line":792},[494,3653,534],{"emptyLinePlaceholder":206},[494,3655,3656,3658,3660,3662,3665,3667,3669,3671,3673,3675,3677],{"class":496,"line":822},[494,3657,764],{"class":550},[494,3659,619],{"class":508},[494,3661,525],{"class":504},[494,3663,3664],{"class":521},"sepia",[494,3666,525],{"class":504},[494,3668,568],{"class":504},[494,3670,778],{"class":504},[494,3672,782],{"class":781},[494,3674,638],{"class":504},[494,3676,787],{"class":540},[494,3678,705],{"class":504},[494,3680,3681,3683,3685,3687,3689,3691,3693,3695,3698,3700,3702],{"class":496,"line":848},[494,3682,795],{"class":508},[494,3684,798],{"class":504},[494,3686,801],{"class":550},[494,3688,619],{"class":711},[494,3690,806],{"class":508},[494,3692,568],{"class":504},[494,3694,518],{"class":504},[494,3696,3697],{"class":521},"#f4ecd8",[494,3699,525],{"class":504},[494,3701,638],{"class":711},[494,3703,528],{"class":504},[494,3705,3706,3708,3710,3712,3714,3716,3718,3720,3723,3725,3727],{"class":496,"line":857},[494,3707,795],{"class":508},[494,3709,798],{"class":504},[494,3711,801],{"class":550},[494,3713,619],{"class":711},[494,3715,833],{"class":508},[494,3717,568],{"class":504},[494,3719,518],{"class":504},[494,3721,3722],{"class":521},"#5c4e3a",[494,3724,525],{"class":504},[494,3726,638],{"class":711},[494,3728,528],{"class":504},[494,3730,3731,3733,3735],{"class":496,"line":862},[494,3732,584],{"class":504},[494,3734,638],{"class":508},[494,3736,528],{"class":504},[494,3738,3739],{"class":496,"line":1470},[494,3740,534],{"emptyLinePlaceholder":206},[494,3742,3743,3745,3747,3749,3752,3754,3756,3758,3760,3762,3764],{"class":496,"line":1506},[494,3744,764],{"class":550},[494,3746,619],{"class":508},[494,3748,525],{"class":504},[494,3750,3751],{"class":521},"high-contrast",[494,3753,525],{"class":504},[494,3755,568],{"class":504},[494,3757,778],{"class":504},[494,3759,782],{"class":781},[494,3761,638],{"class":504},[494,3763,787],{"class":540},[494,3765,705],{"class":504},[494,3767,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786,3788],{"class":496,"line":1550},[494,3769,795],{"class":508},[494,3771,798],{"class":504},[494,3773,801],{"class":550},[494,3775,619],{"class":711},[494,3777,806],{"class":508},[494,3779,568],{"class":504},[494,3781,518],{"class":504},[494,3783,668],{"class":521},[494,3785,525],{"class":504},[494,3787,638],{"class":711},[494,3789,528],{"class":504},[494,3791,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812],{"class":496,"line":1564},[494,3793,795],{"class":508},[494,3795,798],{"class":504},[494,3797,801],{"class":550},[494,3799,619],{"class":711},[494,3801,833],{"class":508},[494,3803,568],{"class":504},[494,3805,518],{"class":504},[494,3807,633],{"class":521},[494,3809,525],{"class":504},[494,3811,638],{"class":711},[494,3813,528],{"class":504},[494,3815,3816,3818,3820],{"class":496,"line":1570},[494,3817,584],{"class":504},[494,3819,638],{"class":508},[494,3821,528],{"class":504},[494,3823,3824],{"class":496,"line":1575},[494,3825,534],{"emptyLinePlaceholder":206},[494,3827,3828,3830,3832,3834],{"class":496,"line":1589},[494,3829,865],{"class":500},[494,3831,868],{"class":500},[494,3833,590],{"class":508},[494,3835,528],{"class":504},[480,3837,3838],{"icon":2457,"label":1049},[485,3839,3841],{"className":487,"code":3840,"language":489,"meta":490,"style":490},"type Theme = 'light' | 'dark' | 'sepia' | 'high-contrast';\n\nexport const setTheme = (newTheme: Theme): void => {\n    if (typeof window !== 'undefined') {\n        document.documentElement.setAttribute('data-theme', newTheme);\n        localStorage.setItem('theme', newTheme);\n    }\n};\n",[422,3842,3843,3883,3887,3913,3935,3963,3987,3991],{"__ignoreMap":490},[494,3844,3845,3847,3849,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871,3873,3875,3877,3879,3881],{"class":496,"line":497},[494,3846,1109],{"class":540},[494,3848,1112],{"class":934},[494,3850,587],{"class":504},[494,3852,518],{"class":504},[494,3854,1119],{"class":521},[494,3856,525],{"class":504},[494,3858,1124],{"class":504},[494,3860,518],{"class":504},[494,3862,771],{"class":521},[494,3864,525],{"class":504},[494,3866,1124],{"class":504},[494,3868,518],{"class":504},[494,3870,3664],{"class":521},[494,3872,525],{"class":504},[494,3874,1124],{"class":504},[494,3876,518],{"class":504},[494,3878,3751],{"class":521},[494,3880,525],{"class":504},[494,3882,528],{"class":504},[494,3884,3885],{"class":496,"line":531},[494,3886,534],{"emptyLinePlaceholder":206},[494,3888,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911],{"class":496,"line":537},[494,3890,865],{"class":500},[494,3892,1143],{"class":540},[494,3894,2722],{"class":508},[494,3896,547],{"class":504},[494,3898,778],{"class":504},[494,3900,1219],{"class":781},[494,3902,715],{"class":504},[494,3904,1112],{"class":934},[494,3906,2735],{"class":504},[494,3908,2532],{"class":934},[494,3910,787],{"class":540},[494,3912,705],{"class":504},[494,3914,3915,3917,3919,3921,3923,3925,3927,3929,3931,3933],{"class":496,"line":558},[494,3916,2541],{"class":500},[494,3918,778],{"class":711},[494,3920,1256],{"class":504},[494,3922,1259],{"class":508},[494,3924,1262],{"class":504},[494,3926,518],{"class":504},[494,3928,1267],{"class":521},[494,3930,525],{"class":504},[494,3932,1272],{"class":711},[494,3934,1275],{"class":504},[494,3936,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957,3959,3961],{"class":496,"line":595},[494,3938,2652],{"class":508},[494,3940,798],{"class":504},[494,3942,1285],{"class":508},[494,3944,798],{"class":504},[494,3946,1290],{"class":550},[494,3948,619],{"class":711},[494,3950,525],{"class":504},[494,3952,424],{"class":521},[494,3954,525],{"class":504},[494,3956,568],{"class":504},[494,3958,1303],{"class":508},[494,3960,638],{"class":711},[494,3962,528],{"class":504},[494,3964,3965,3967,3969,3971,3973,3975,3977,3979,3981,3983,3985],{"class":496,"line":600},[494,3966,2811],{"class":508},[494,3968,798],{"class":504},[494,3970,1317],{"class":550},[494,3972,619],{"class":711},[494,3974,525],{"class":504},[494,3976,764],{"class":521},[494,3978,525],{"class":504},[494,3980,568],{"class":504},[494,3982,1303],{"class":508},[494,3984,638],{"class":711},[494,3986,528],{"class":504},[494,3988,3989],{"class":496,"line":607},[494,3990,2046],{"class":504},[494,3992,3993],{"class":496,"line":643},[494,3994,1645],{"class":504},[3996,3997,3998,4001],"note",{},[444,3999,4000],{},"Good to know:"," The default theme (light) doesn't need to be explicitly defined since the initial variable values serve as the default. Only define themes that override the defaults.",[3116,4003,4005],{"id":4004},"smooth-theme-transitions","Smooth Theme Transitions",[418,4007,4008],{},"Add smooth transitions when switching themes to enhance the user experience:",[477,4010,4011],{},[480,4012,4014],{"icon":482,"label":4013},"CSS",[485,4015,4017],{"className":487,"code":4016,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { selector, variable, ref } = s;\n\nconst backgroundColor = variable('bg-color', '#ffffff');\nconst textColor = variable('text-color', '#000000');\n\nselector('body', {\n    backgroundColor: ref(backgroundColor),\n    color: ref(textColor),\n    transition: 'background-color 0.3s ease, color 0.3s ease',\n});\n\nexport default s;\n",[422,4018,4019,4039,4043,4057,4083,4087,4117,4147,4151,4167,4179,4191,4207,4215,4219],{"__ignoreMap":490},[494,4020,4021,4023,4025,4027,4029,4031,4033,4035,4037],{"class":496,"line":497},[494,4022,501],{"class":500},[494,4024,505],{"class":504},[494,4026,509],{"class":508},[494,4028,512],{"class":504},[494,4030,515],{"class":500},[494,4032,518],{"class":504},[494,4034,522],{"class":521},[494,4036,525],{"class":504},[494,4038,528],{"class":504},[494,4040,4041],{"class":496,"line":531},[494,4042,534],{"emptyLinePlaceholder":206},[494,4044,4045,4047,4049,4051,4053,4055],{"class":496,"line":537},[494,4046,541],{"class":540},[494,4048,544],{"class":508},[494,4050,547],{"class":504},[494,4052,509],{"class":550},[494,4054,553],{"class":508},[494,4056,528],{"class":504},[494,4058,4059,4061,4063,4066,4068,4070,4072,4075,4077,4079,4081],{"class":496,"line":558},[494,4060,541],{"class":540},[494,4062,505],{"class":504},[494,4064,4065],{"class":508}," selector",[494,4067,568],{"class":504},[494,4069,565],{"class":508},[494,4071,568],{"class":504},[494,4073,4074],{"class":508}," ref ",[494,4076,584],{"class":504},[494,4078,587],{"class":504},[494,4080,590],{"class":508},[494,4082,528],{"class":504},[494,4084,4085],{"class":496,"line":595},[494,4086,534],{"emptyLinePlaceholder":206},[494,4088,4089,4091,4093,4095,4097,4099,4101,4103,4105,4107,4109,4111,4113,4115],{"class":496,"line":600},[494,4090,541],{"class":540},[494,4092,612],{"class":508},[494,4094,547],{"class":504},[494,4096,565],{"class":550},[494,4098,619],{"class":508},[494,4100,525],{"class":504},[494,4102,624],{"class":521},[494,4104,525],{"class":504},[494,4106,568],{"class":504},[494,4108,518],{"class":504},[494,4110,633],{"class":521},[494,4112,525],{"class":504},[494,4114,638],{"class":508},[494,4116,528],{"class":504},[494,4118,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145],{"class":496,"line":607},[494,4120,541],{"class":540},[494,4122,648],{"class":508},[494,4124,547],{"class":504},[494,4126,565],{"class":550},[494,4128,619],{"class":508},[494,4130,525],{"class":504},[494,4132,659],{"class":521},[494,4134,525],{"class":504},[494,4136,568],{"class":504},[494,4138,518],{"class":504},[494,4140,668],{"class":521},[494,4142,525],{"class":504},[494,4144,638],{"class":508},[494,4146,528],{"class":504},[494,4148,4149],{"class":496,"line":643},[494,4150,534],{"emptyLinePlaceholder":206},[494,4152,4153,4155,4157,4159,4161,4163,4165],{"class":496,"line":677},[494,4154,691],{"class":550},[494,4156,619],{"class":508},[494,4158,525],{"class":504},[494,4160,698],{"class":521},[494,4162,525],{"class":504},[494,4164,568],{"class":504},[494,4166,705],{"class":504},[494,4168,4169,4171,4173,4175,4177],{"class":496,"line":682},[494,4170,712],{"class":711},[494,4172,715],{"class":504},[494,4174,576],{"class":550},[494,4176,720],{"class":508},[494,4178,723],{"class":504},[494,4180,4181,4183,4185,4187,4189],{"class":496,"line":688},[494,4182,729],{"class":711},[494,4184,715],{"class":504},[494,4186,576],{"class":550},[494,4188,736],{"class":508},[494,4190,723],{"class":504},[494,4192,4193,4196,4198,4200,4203,4205],{"class":496,"line":708},[494,4194,4195],{"class":711},"    transition",[494,4197,715],{"class":504},[494,4199,518],{"class":504},[494,4201,4202],{"class":521},"background-color 0.3s ease, color 0.3s ease",[494,4204,525],{"class":504},[494,4206,723],{"class":504},[494,4208,4209,4211,4213],{"class":496,"line":726},[494,4210,584],{"class":504},[494,4212,638],{"class":508},[494,4214,528],{"class":504},[494,4216,4217],{"class":496,"line":741},[494,4218,534],{"emptyLinePlaceholder":206},[494,4220,4221,4223,4225,4227],{"class":496,"line":750},[494,4222,865],{"class":500},[494,4224,868],{"class":500},[494,4226,590],{"class":508},[494,4228,528],{"class":504},[418,4230,4231,4232,4235,4236,798],{},"Be cautious with transitions on all elements, as it can cause performance issues. Apply transitions selectively to specific properties like ",[422,4233,4234],{},"background-color"," and ",[422,4237,4238],{},"color",[3116,4240,4242],{"id":4241},"preventing-flash-of-unstyled-content","Preventing Flash of Unstyled Content",[418,4244,4245],{},"Prevent the flash of the wrong theme on page load by initializing the theme before the page renders:",[477,4247,4248],{},[480,4249,4251],{"icon":482,"label":4250},"HTML",[485,4252,4256],{"className":4253,"code":4254,"language":4255,"meta":490,"style":490},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cscript>\n        // Inline script runs before page render\n        (function() {\n            const theme = localStorage.getItem('theme') || \n                (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n            document.documentElement.setAttribute('data-theme', theme);\n        })();\n    \u003C/script>\n    \u003C!-- Your styles -->\n\u003C/head>\n\u003Cbody>\n    \u003C!-- Your content -->\n\u003C/body>\n\u003C/html>\n","html",[422,4257,4258,4271,4279,4288,4296,4301,4312,4341,4386,4414,4424,4432,4437,4445,4453,4458,4466],{"__ignoreMap":490},[494,4259,4260,4263,4266,4269],{"class":496,"line":497},[494,4261,4262],{"class":504},"\u003C!",[494,4264,4265],{"class":711},"DOCTYPE",[494,4267,4268],{"class":540}," html",[494,4270,1790],{"class":504},[494,4272,4273,4275,4277],{"class":496,"line":531},[494,4274,1179],{"class":504},[494,4276,4255],{"class":711},[494,4278,1790],{"class":504},[494,4280,4281,4283,4286],{"class":496,"line":537},[494,4282,1179],{"class":504},[494,4284,4285],{"class":711},"head",[494,4287,1790],{"class":504},[494,4289,4290,4292,4294],{"class":496,"line":558},[494,4291,2383],{"class":504},[494,4293,2303],{"class":711},[494,4295,1790],{"class":504},[494,4297,4298],{"class":496,"line":595},[494,4299,4300],{"class":603},"        // Inline script runs before page render\n",[494,4302,4303,4306,4308,4310],{"class":496,"line":600},[494,4304,4305],{"class":508},"        (",[494,4307,1686],{"class":540},[494,4309,553],{"class":504},[494,4311,705],{"class":504},[494,4313,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4339],{"class":496,"line":607},[494,4315,1473],{"class":540},[494,4317,571],{"class":508},[494,4319,587],{"class":504},[494,4321,1481],{"class":508},[494,4323,798],{"class":504},[494,4325,1486],{"class":550},[494,4327,619],{"class":711},[494,4329,525],{"class":504},[494,4331,764],{"class":521},[494,4333,525],{"class":504},[494,4335,1272],{"class":711},[494,4337,4338],{"class":504},"||",[494,4340,1610],{"class":711},[494,4342,4343,4346,4348,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368,4370,4372,4374,4376,4378,4380,4382,4384],{"class":496,"line":643},[494,4344,4345],{"class":711},"                (",[494,4347,3253],{"class":508},[494,4349,798],{"class":504},[494,4351,3258],{"class":550},[494,4353,619],{"class":711},[494,4355,525],{"class":504},[494,4357,3265],{"class":521},[494,4359,525],{"class":504},[494,4361,638],{"class":711},[494,4363,798],{"class":504},[494,4365,3274],{"class":508},[494,4367,1392],{"class":504},[494,4369,518],{"class":504},[494,4371,771],{"class":521},[494,4373,525],{"class":504},[494,4375,1401],{"class":504},[494,4377,518],{"class":504},[494,4379,1119],{"class":521},[494,4381,525],{"class":504},[494,4383,638],{"class":711},[494,4385,528],{"class":504},[494,4387,4388,4390,4392,4394,4396,4398,4400,4402,4404,4406,4408,4410,4412],{"class":496,"line":677},[494,4389,1280],{"class":508},[494,4391,798],{"class":504},[494,4393,1285],{"class":508},[494,4395,798],{"class":504},[494,4397,1290],{"class":550},[494,4399,619],{"class":711},[494,4401,525],{"class":504},[494,4403,424],{"class":521},[494,4405,525],{"class":504},[494,4407,568],{"class":504},[494,4409,571],{"class":508},[494,4411,638],{"class":711},[494,4413,528],{"class":504},[494,4415,4416,4419,4422],{"class":496,"line":682},[494,4417,4418],{"class":504},"        }",[494,4420,4421],{"class":508},")()",[494,4423,528],{"class":504},[494,4425,4426,4428,4430],{"class":496,"line":688},[494,4427,2442],{"class":504},[494,4429,2303],{"class":711},[494,4431,1790],{"class":504},[494,4433,4434],{"class":496,"line":708},[494,4435,4436],{"class":603},"    \u003C!-- Your styles -->\n",[494,4438,4439,4441,4443],{"class":496,"line":726},[494,4440,2361],{"class":504},[494,4442,4285],{"class":711},[494,4444,1790],{"class":504},[494,4446,4447,4449,4451],{"class":496,"line":741},[494,4448,1179],{"class":504},[494,4450,698],{"class":711},[494,4452,1790],{"class":504},[494,4454,4455],{"class":496,"line":750},[494,4456,4457],{"class":603},"    \u003C!-- Your content -->\n",[494,4459,4460,4462,4464],{"class":496,"line":755},[494,4461,2361],{"class":504},[494,4463,698],{"class":711},[494,4465,1790],{"class":504},[494,4467,4468,4470,4472],{"class":496,"line":761},[494,4469,2361],{"class":504},[494,4471,4255],{"class":711},[494,4473,1790],{"class":504},[418,4475,4476],{},"This inline script runs synchronously before the page renders, preventing any flash of the wrong theme. It's small enough that it won't impact performance.",[414,4478,4480],{"id":4479},"best-practices","Best Practices",[438,4482,4483,4489,4499,4505,4511,4517],{},[441,4484,4485,4488],{},[444,4486,4487],{},"Persist user preferences"," using localStorage or cookies to remember the theme across sessions.",[441,4490,4491,4494,4495,4498],{},[444,4492,4493],{},"Respect system preferences"," by checking ",[422,4496,4497],{},"prefers-color-scheme"," media query as a default.",[441,4500,4501,4504],{},[444,4502,4503],{},"Provide visual feedback"," when switching themes, such as smooth transitions or loading states.",[441,4506,4507,4510],{},[444,4508,4509],{},"Test both themes thoroughly"," to ensure all UI components are readable and accessible in each theme.",[441,4512,4513,4516],{},[444,4514,4515],{},"Consider accessibility"," by ensuring sufficient color contrast in all themes, especially for text.",[441,4518,4519,4522],{},[444,4520,4521],{},"Initialize early"," to prevent flash of unstyled content on page load.",[414,4524,4526],{"id":4525},"faq","FAQ",[4528,4529,4530,4539,4546,4557,4566,4702],"accordion",{},[4531,4532,4535,4536,4538],"accordion-item",{"icon":4533,"label":4534},"i-lucide-circle-help","How do I add more than two themes?","Simply define additional themes in your Styleframe configuration and update your theme type to include all possible values. The ",[422,4537,424],{}," attribute can be set to any string value you define.",[4531,4540,4542,4543,4545],{"icon":4533,"label":4541},"Will switching themes cause a page reload?","No, changing the ",[422,4544,424],{}," attribute updates CSS variables instantly without any page reload. The browser re-evaluates the CSS and applies new values immediately.",[4531,4547,4549,4550,4553,4554,4556],{"icon":4533,"label":4548},"How do I prevent flash of wrong theme on page load?","Add an inline script in your HTML ",[422,4551,4552],{},"\u003Chead>"," that sets the ",[422,4555,424],{}," attribute before the page renders. This script should run synchronously before your CSS loads.",[4531,4558,4560,4561,4235,4563,4565],{"icon":4533,"label":4559},"Can I animate theme transitions?","Yes, add CSS transitions to properties that change between themes, like ",[422,4562,4234],{},[422,4564,4238],{},". Be selective to avoid performance issues.",[4531,4567,4569,4572],{"icon":4533,"label":4568},"How do I detect system theme changes?",[418,4570,4571],{},"You can use the code below to listen for system theme changes and update your theme accordingly.",[485,4573,4575],{"className":487,"code":4574,"language":489,"meta":490,"style":490},"window.matchMedia('(prefers-color-scheme: dark)')\n    .addEventListener('change', () => {\n        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n    });\n",[422,4576,4577,4595,4619,4650,4694],{"__ignoreMap":490},[494,4578,4579,4581,4583,4585,4587,4589,4591,4593],{"class":496,"line":497},[494,4580,3253],{"class":508},[494,4582,798],{"class":504},[494,4584,3258],{"class":550},[494,4586,619],{"class":508},[494,4588,525],{"class":504},[494,4590,3265],{"class":521},[494,4592,525],{"class":504},[494,4594,2103],{"class":508},[494,4596,4597,4600,4602,4604,4606,4609,4611,4613,4615,4617],{"class":496,"line":531},[494,4598,4599],{"class":504},"    .",[494,4601,3029],{"class":550},[494,4603,619],{"class":508},[494,4605,525],{"class":504},[494,4607,4608],{"class":521},"change",[494,4610,525],{"class":504},[494,4612,568],{"class":504},[494,4614,1151],{"class":504},[494,4616,787],{"class":540},[494,4618,705],{"class":504},[494,4620,4621,4623,4626,4628,4630,4632,4634,4636,4638,4640,4642,4644,4646,4648],{"class":496,"line":537},[494,4622,2564],{"class":540},[494,4624,4625],{"class":508}," isDark",[494,4627,587],{"class":504},[494,4629,1259],{"class":508},[494,4631,798],{"class":504},[494,4633,3258],{"class":550},[494,4635,619],{"class":711},[494,4637,525],{"class":504},[494,4639,3265],{"class":521},[494,4641,525],{"class":504},[494,4643,638],{"class":711},[494,4645,798],{"class":504},[494,4647,3274],{"class":508},[494,4649,528],{"class":504},[494,4651,4652,4654,4656,4658,4660,4662,4664,4666,4668,4670,4672,4674,4676,4678,4680,4682,4684,4686,4688,4690,4692],{"class":496,"line":558},[494,4653,2652],{"class":508},[494,4655,798],{"class":504},[494,4657,1285],{"class":508},[494,4659,798],{"class":504},[494,4661,1290],{"class":550},[494,4663,619],{"class":711},[494,4665,525],{"class":504},[494,4667,424],{"class":521},[494,4669,525],{"class":504},[494,4671,568],{"class":504},[494,4673,4625],{"class":508},[494,4675,1392],{"class":504},[494,4677,518],{"class":504},[494,4679,771],{"class":521},[494,4681,525],{"class":504},[494,4683,1401],{"class":504},[494,4685,518],{"class":504},[494,4687,1119],{"class":521},[494,4689,525],{"class":504},[494,4691,638],{"class":711},[494,4693,528],{"class":504},[494,4695,4696,4698,4700],{"class":496,"line":595},[494,4697,1629],{"class":504},[494,4699,638],{"class":508},[494,4701,528],{"class":504},[4531,4703,4705],{"icon":4533,"label":4704},"Should I use cookies or localStorage?","Use localStorage for client-side only apps. If you need server-side rendering (SSR) to respect the theme on first render, use cookies so the server can read the preference.",[4707,4708,4709],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":490,"searchDepth":531,"depth":531,"links":4711},[4712,4713,4714,4715,4716,4722,4723],{"id":416,"depth":531,"text":64},{"id":432,"depth":531,"text":433},{"id":468,"depth":531,"text":469},{"id":1048,"depth":531,"text":1049},{"id":3113,"depth":531,"text":3114,"children":4717},[4718,4719,4720,4721],{"id":3118,"depth":537,"text":3119},{"id":3370,"depth":537,"text":3371},{"id":4004,"depth":537,"text":4005},{"id":4241,"depth":537,"text":4242},{"id":4479,"depth":531,"text":4480},{"id":4525,"depth":531,"text":4526},"Learn how to implement a dynamic theme switcher in your application using Styleframe's data-theme attribute system.","md",null,{},"/docs/getting-started/guides/theme-switcher",{"title":409,"description":4724},{"loc":4728},"docs/getting-started/03.guides/02.theme-switcher","H1zWz9EnZILD_9qpWLj4wmCZwTG1F1pt1SDtz4cxzHo",[4726,4726],1776621132413]