[{"data":1,"prerenderedAt":2701},["ShallowReactive",2],{"navigation_docs":3,"-docs-products-sites-theming":984},[4,8,44,50,86,583,625,918],{"title":5,"path":6,"stem":7},"Home","\u002Fdocs","docs\u002Findex",{"title":9,"path":10,"stem":11,"children":12},"API usage","\u002Fdocs\u002Fapi-usage","docs\u002Fapi-usage\u002Findex",[13,14,20,26,32,38],{"title":9,"path":10,"stem":11},{"title":15,"path":16,"stem":17,"children":18},"Errors","\u002Fdocs\u002Fapi-usage\u002Ferrors","docs\u002Fapi-usage\u002Ferrors\u002Findex",[19],{"title":15,"path":16,"stem":17},{"title":21,"path":22,"stem":23,"children":24},"Retries & idempotency","\u002Fdocs\u002Fapi-usage\u002Fidempotency","docs\u002Fapi-usage\u002Fidempotency\u002Findex",[25],{"title":21,"path":22,"stem":23},{"title":27,"path":28,"stem":29,"children":30},"Pagination & filtering","\u002Fdocs\u002Fapi-usage\u002Fpagination","docs\u002Fapi-usage\u002Fpagination\u002Findex",[31],{"title":27,"path":28,"stem":29},{"title":33,"path":34,"stem":35,"children":36},"Rate limits","\u002Fdocs\u002Fapi-usage\u002Frate-limits","docs\u002Fapi-usage\u002Frate-limits\u002Findex",[37],{"title":33,"path":34,"stem":35},{"title":39,"path":40,"stem":41,"children":42},"Versioning & stability","\u002Fdocs\u002Fapi-usage\u002Fversioning","docs\u002Fapi-usage\u002Fversioning\u002Findex",[43],{"title":39,"path":40,"stem":41},{"title":45,"path":46,"stem":47,"children":48},"What's new","\u002Fdocs\u002Fchangelog","docs\u002Fchangelog\u002Findex",[49],{"title":45,"path":46,"stem":47},{"title":51,"path":52,"stem":53,"children":54},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started\u002Findex",[55,56,62,68,74,80],{"title":51,"path":52,"stem":53},{"title":57,"path":58,"stem":59,"children":60},"Architecture Overview","\u002Fdocs\u002Fgetting-started\u002Farchitecture","docs\u002Fgetting-started\u002Farchitecture\u002Findex",[61],{"title":57,"path":58,"stem":59},{"title":63,"path":64,"stem":65,"children":66},"Glossary","\u002Fdocs\u002Fgetting-started\u002Fglossary","docs\u002Fgetting-started\u002Fglossary\u002Findex",[67],{"title":63,"path":64,"stem":65},{"title":69,"path":70,"stem":71,"children":72},"Platform Overview","\u002Fdocs\u002Fgetting-started\u002Fplatform-overview","docs\u002Fgetting-started\u002Fplatform-overview\u002Findex",[73],{"title":69,"path":70,"stem":71},{"title":75,"path":76,"stem":77,"children":78},"Prerequisites","\u002Fdocs\u002Fgetting-started\u002Fprerequisites","docs\u002Fgetting-started\u002Fprerequisites\u002Findex",[79],{"title":75,"path":76,"stem":77},{"title":81,"path":82,"stem":83,"children":84},"Your First App in 15 Minutes","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002Fgetting-started\u002Fquick-start\u002Findex",[85],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89,"children":90},"Products","\u002Fdocs\u002Fproducts","docs\u002Fproducts\u002Findex",[91,92,98,170,200,218,254,320,517,565],{"title":87,"path":88,"stem":89},{"title":93,"path":94,"stem":95,"children":96},"AI Studio","\u002Fdocs\u002Fproducts\u002Fai","docs\u002Fproducts\u002Fai\u002Findex",[97],{"title":93,"path":94,"stem":95},{"title":99,"path":100,"stem":101,"children":102},"App Studio","\u002Fdocs\u002Fproducts\u002Fapps","docs\u002Fproducts\u002Fapps\u002Findex",[103,104,110,116,122,128,134,140,146,152,158,164],{"title":99,"path":100,"stem":101},{"title":105,"path":106,"stem":107,"children":108},"App Model","\u002Fdocs\u002Fproducts\u002Fapps\u002Fapp-model","docs\u002Fproducts\u002Fapps\u002Fapp-model\u002Findex",[109],{"title":105,"path":106,"stem":107},{"title":111,"path":112,"stem":113,"children":114},"Auto-generated data APIs","\u002Fdocs\u002Fproducts\u002Fapps\u002Fauto-generated-data-apis","docs\u002Fproducts\u002Fapps\u002Fauto-generated-data-apis\u002Findex",[115],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119,"children":120},"Billing & Events","\u002Fdocs\u002Fproducts\u002Fapps\u002Fbilling-events","docs\u002Fproducts\u002Fapps\u002Fbilling-events\u002Findex",[121],{"title":117,"path":118,"stem":119},{"title":123,"path":124,"stem":125,"children":126},"Cockpit Integration","\u002Fdocs\u002Fproducts\u002Fapps\u002Fcockpit-integration","docs\u002Fproducts\u002Fapps\u002Fcockpit-integration\u002Findex",[127],{"title":123,"path":124,"stem":125},{"title":129,"path":130,"stem":131,"children":132},"App Model Concept","\u002Fdocs\u002Fproducts\u002Fapps\u002Fconcept","docs\u002Fproducts\u002Fapps\u002Fconcept\u002Findex",[133],{"title":129,"path":130,"stem":131},{"title":135,"path":136,"stem":137,"children":138},"App Lifecycle","\u002Fdocs\u002Fproducts\u002Fapps\u002Flifecycle","docs\u002Fproducts\u002Fapps\u002Flifecycle\u002Findex",[139],{"title":135,"path":136,"stem":137},{"title":141,"path":142,"stem":143,"children":144},"Manifest Reference","\u002Fdocs\u002Fproducts\u002Fapps\u002Fmanifest-reference","docs\u002Fproducts\u002Fapps\u002Fmanifest-reference\u002Findex",[145],{"title":141,"path":142,"stem":143},{"title":147,"path":148,"stem":149,"children":150},"Market Concept","\u002Fdocs\u002Fproducts\u002Fapps\u002Fmarket-concept","docs\u002Fproducts\u002Fapps\u002Fmarket-concept\u002Findex",[151],{"title":147,"path":148,"stem":149},{"title":153,"path":154,"stem":155,"children":156},"Policies","\u002Fdocs\u002Fproducts\u002Fapps\u002Fpolicies","docs\u002Fproducts\u002Fapps\u002Fpolicies\u002Findex",[157],{"title":153,"path":154,"stem":155},{"title":159,"path":160,"stem":161,"children":162},"Schema migrations","\u002Fdocs\u002Fproducts\u002Fapps\u002Fschema-migrator","docs\u002Fproducts\u002Fapps\u002Fschema-migrator\u002Findex",[163],{"title":159,"path":160,"stem":161},{"title":165,"path":166,"stem":167,"children":168},"Schema Reference","\u002Fdocs\u002Fproducts\u002Fapps\u002Fschema-reference","docs\u002Fproducts\u002Fapps\u002Fschema-reference\u002Findex",[169],{"title":165,"path":166,"stem":167},{"title":171,"path":172,"stem":173,"children":174},"Authentication","\u002Fdocs\u002Fproducts\u002Fauth","docs\u002Fproducts\u002Fauth\u002Findex",[175,176,182,188,194],{"title":171,"path":172,"stem":173},{"title":177,"path":178,"stem":179,"children":180},"API keys","\u002Fdocs\u002Fproducts\u002Fauth\u002Fapi-keys","docs\u002Fproducts\u002Fauth\u002Fapi-keys\u002Findex",[181],{"title":177,"path":178,"stem":179},{"title":183,"path":184,"stem":185,"children":186},"Multi-factor authentication","\u002Fdocs\u002Fproducts\u002Fauth\u002Fmfa","docs\u002Fproducts\u002Fauth\u002Fmfa\u002Findex",[187],{"title":183,"path":184,"stem":185},{"title":189,"path":190,"stem":191,"children":192},"Social sign-in","\u002Fdocs\u002Fproducts\u002Fauth\u002Foauth2","docs\u002Fproducts\u002Fauth\u002Foauth2\u002Findex",[193],{"title":189,"path":190,"stem":191},{"title":195,"path":196,"stem":197,"children":198},"Sessions","\u002Fdocs\u002Fproducts\u002Fauth\u002Fsessions","docs\u002Fproducts\u002Fauth\u002Fsessions\u002Findex",[199],{"title":195,"path":196,"stem":197},{"title":201,"path":202,"stem":203,"children":204},"Events","\u002Fdocs\u002Fproducts\u002Fevents","docs\u002Fproducts\u002Fevents\u002Findex",[205,206,212],{"title":201,"path":202,"stem":203},{"title":207,"path":208,"stem":209,"children":210},"Consuming events","\u002Fdocs\u002Fproducts\u002Fevents\u002Fconsuming-events","docs\u002Fproducts\u002Fevents\u002Fconsuming-events\u002Findex",[211],{"title":207,"path":208,"stem":209},{"title":213,"path":214,"stem":215,"children":216},"Event types","\u002Fdocs\u002Fproducts\u002Fevents\u002Fevent-types","docs\u002Fproducts\u002Fevents\u002Fevent-types\u002Findex",[217],{"title":213,"path":214,"stem":215},{"title":219,"path":220,"stem":221,"children":222},"Integration Studio","\u002Fdocs\u002Fproducts\u002Fintegration-studio","docs\u002Fproducts\u002Fintegration-studio\u002Findex",[223,224,230,236,242,248],{"title":219,"path":220,"stem":221},{"title":225,"path":226,"stem":227,"children":228},"Expression Syntax","\u002Fdocs\u002Fproducts\u002Fintegration-studio\u002Fexpression-syntax","docs\u002Fproducts\u002Fintegration-studio\u002Fexpression-syntax\u002Findex",[229],{"title":225,"path":226,"stem":227},{"title":231,"path":232,"stem":233,"children":234},"Node Types","\u002Fdocs\u002Fproducts\u002Fintegration-studio\u002Fnode-types","docs\u002Fproducts\u002Fintegration-studio\u002Fnode-types\u002Findex",[235],{"title":231,"path":232,"stem":233},{"title":237,"path":238,"stem":239,"children":240},"Dual-engine architecture","\u002Fdocs\u002Fproducts\u002Fintegration-studio\u002Foverview","docs\u002Fproducts\u002Fintegration-studio\u002Foverview\u002Findex",[241],{"title":237,"path":238,"stem":239},{"title":243,"path":244,"stem":245,"children":246},"Triggers","\u002Fdocs\u002Fproducts\u002Fintegration-studio\u002Ftriggers","docs\u002Fproducts\u002Fintegration-studio\u002Ftriggers\u002Findex",[247],{"title":243,"path":244,"stem":245},{"title":249,"path":250,"stem":251,"children":252},"Workflow Builder","\u002Fdocs\u002Fproducts\u002Fintegration-studio\u002Fworkflow-builder","docs\u002Fproducts\u002Fintegration-studio\u002Fworkflow-builder\u002Findex",[253],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257,"children":258},"Network","\u002Fdocs\u002Fproducts\u002Fnetwork","docs\u002Fproducts\u002Fnetwork\u002Findex",[259,260,266,272,278,284,290,296,302,308,314],{"title":255,"path":256,"stem":257},{"title":261,"path":262,"stem":263,"children":264},"Caching","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fcaching","docs\u002Fproducts\u002Fnetwork\u002Fcaching\u002Findex",[265],{"title":261,"path":262,"stem":263},{"title":267,"path":268,"stem":269,"children":270},"Content delivery (CDN)","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fcdn","docs\u002Fproducts\u002Fnetwork\u002Fcdn\u002Findex",[271],{"title":267,"path":268,"stem":269},{"title":273,"path":274,"stem":275,"children":276},"Compression","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fcompression","docs\u002Fproducts\u002Fnetwork\u002Fcompression\u002Findex",[277],{"title":273,"path":274,"stem":275},{"title":279,"path":280,"stem":281,"children":282},"DDoS mitigation","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fddos","docs\u002Fproducts\u002Fnetwork\u002Fddos\u002Findex",[283],{"title":279,"path":280,"stem":281},{"title":285,"path":286,"stem":287,"children":288},"revenexx DNS service","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fdns","docs\u002Fproducts\u002Fnetwork\u002Fdns\u002Findex",[289],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293,"children":294},"Edges","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fedges","docs\u002Fproducts\u002Fnetwork\u002Fedges\u002Findex",[295],{"title":291,"path":292,"stem":293},{"title":297,"path":298,"stem":299,"children":300},"Endpoints","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fendpoints","docs\u002Fproducts\u002Fnetwork\u002Fendpoints\u002Findex",[301],{"title":297,"path":298,"stem":299},{"title":303,"path":304,"stem":305,"children":306},"Regions","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fregions","docs\u002Fproducts\u002Fnetwork\u002Fregions\u002Findex",[307],{"title":303,"path":304,"stem":305},{"title":309,"path":310,"stem":311,"children":312},"Transport Layer Security (TLS)","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Ftls","docs\u002Fproducts\u002Fnetwork\u002Ftls\u002Findex",[313],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317,"children":318},"Web application firewall (WAF)","\u002Fdocs\u002Fproducts\u002Fnetwork\u002Fwaf","docs\u002Fproducts\u002Fnetwork\u002Fwaf\u002Findex",[319],{"title":315,"path":316,"stem":317},{"title":321,"path":322,"stem":323,"children":324},"Experience Studio","\u002Fdocs\u002Fproducts\u002Fsites","docs\u002Fproducts\u002Fsites\u002Findex",[325,326,332,337,343,349,355,361,367,373,379,385,391,397,403,409,487,505,511],{"title":321,"path":322,"stem":323},{"title":327,"path":328,"stem":329,"children":330},"Storefront Architecture","\u002Fdocs\u002Fproducts\u002Fsites\u002Farchitecture","docs\u002Fproducts\u002Fsites\u002Farchitecture\u002Findex",[331],{"title":327,"path":328,"stem":329},{"title":171,"path":333,"stem":334,"children":335},"\u002Fdocs\u002Fproducts\u002Fsites\u002Fauthentication","docs\u002Fproducts\u002Fsites\u002Fauthentication\u002Findex",[336],{"title":171,"path":333,"stem":334},{"title":338,"path":339,"stem":340,"children":341},"Blökkli Blocks","\u002Fdocs\u002Fproducts\u002Fsites\u002Fblokki-blocks","docs\u002Fproducts\u002Fsites\u002Fblokki-blocks\u002Findex",[342],{"title":338,"path":339,"stem":340},{"title":344,"path":345,"stem":346,"children":347},"Checkout","\u002Fdocs\u002Fproducts\u002Fsites\u002Fcheckout","docs\u002Fproducts\u002Fsites\u002Fcheckout\u002Findex",[348],{"title":344,"path":345,"stem":346},{"title":350,"path":351,"stem":352,"children":353},"Deploy from CLI","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdeploy-from-cli","docs\u002Fproducts\u002Fsites\u002Fdeploy-from-cli\u002Findex",[354],{"title":350,"path":351,"stem":352},{"title":356,"path":357,"stem":358,"children":359},"Deploy from Git","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdeploy-from-git","docs\u002Fproducts\u002Fsites\u002Fdeploy-from-git\u002Findex",[360],{"title":356,"path":357,"stem":358},{"title":362,"path":363,"stem":364,"children":365},"Deploy manually","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdeploy-manually","docs\u002Fproducts\u002Fsites\u002Fdeploy-manually\u002Findex",[366],{"title":362,"path":363,"stem":364},{"title":368,"path":369,"stem":370,"children":371},"Deployments","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdeployments","docs\u002Fproducts\u002Fsites\u002Fdeployments\u002Findex",[372],{"title":368,"path":369,"stem":370},{"title":374,"path":375,"stem":376,"children":377},"Develop revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdevelop","docs\u002Fproducts\u002Fsites\u002Fdevelop\u002Findex",[378],{"title":374,"path":375,"stem":376},{"title":380,"path":381,"stem":382,"children":383},"Domains","\u002Fdocs\u002Fproducts\u002Fsites\u002Fdomains","docs\u002Fproducts\u002Fsites\u002Fdomains\u002Findex",[384],{"title":380,"path":381,"stem":382},{"title":386,"path":387,"stem":388,"children":389},"Frameworks","\u002Fdocs\u002Fproducts\u002Fsites\u002Fframeworks","docs\u002Fproducts\u002Fsites\u002Fframeworks\u002Findex",[390],{"title":386,"path":387,"stem":388},{"title":392,"path":393,"stem":394,"children":395},"Instant rollbacks","\u002Fdocs\u002Fproducts\u002Fsites\u002Finstant-rollbacks","docs\u002Fproducts\u002Fsites\u002Finstant-rollbacks\u002Findex",[396],{"title":392,"path":393,"stem":394},{"title":398,"path":399,"stem":400,"children":401},"Logs","\u002Fdocs\u002Fproducts\u002Fsites\u002Flogs","docs\u002Fproducts\u002Fsites\u002Flogs\u002Findex",[402],{"title":398,"path":399,"stem":400},{"title":404,"path":405,"stem":406,"children":407},"Previews","\u002Fdocs\u002Fproducts\u002Fsites\u002Fpreviews","docs\u002Fproducts\u002Fsites\u002Fpreviews\u002Findex",[408],{"title":404,"path":405,"stem":406},{"title":410,"path":411,"stem":412,"children":413},"Start with Sites","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Findex",[414,415,421,427,433,439,445,451,457,463,469,475,481],{"title":410,"path":411,"stem":412},{"title":416,"path":417,"stem":418,"children":419},"Deploy an Angular app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fangular","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fangular\u002Findex",[420],{"title":416,"path":417,"stem":418},{"title":422,"path":423,"stem":424,"children":425},"Deploy a Astro app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fastro","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fastro\u002Findex",[426],{"title":422,"path":423,"stem":424},{"title":428,"path":429,"stem":430,"children":431},"Deploy a Flutter Web app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fflutter","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fflutter\u002Findex",[432],{"title":428,"path":429,"stem":430},{"title":434,"path":435,"stem":436,"children":437},"Deploy a Next.js app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fnextjs","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fnextjs\u002Findex",[438],{"title":434,"path":435,"stem":436},{"title":440,"path":441,"stem":442,"children":443},"Deploy a Nuxt app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fnuxt","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fnuxt\u002Findex",[444],{"title":440,"path":441,"stem":442},{"title":446,"path":447,"stem":448,"children":449},"Deploy a React Native app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Freact-native","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Freact-native\u002Findex",[450],{"title":446,"path":447,"stem":448},{"title":452,"path":453,"stem":454,"children":455},"Deploy a React app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Freact","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Freact\u002Findex",[456],{"title":452,"path":453,"stem":454},{"title":458,"path":459,"stem":460,"children":461},"Deploy a Remix app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fremix","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fremix\u002Findex",[462],{"title":458,"path":459,"stem":460},{"title":464,"path":465,"stem":466,"children":467},"Deploy a SvelteKit app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fsveltekit","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fsveltekit\u002Findex",[468],{"title":464,"path":465,"stem":466},{"title":470,"path":471,"stem":472,"children":473},"Deploy a TanStack Start app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Ftanstack-start","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Ftanstack-start\u002Findex",[474],{"title":470,"path":471,"stem":472},{"title":476,"path":477,"stem":478,"children":479},"Deploy a Vanilla JS app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fvanilla","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fvanilla\u002Findex",[480],{"title":476,"path":477,"stem":478},{"title":482,"path":483,"stem":484,"children":485},"Deploy a Vue.js app to revenexx Storefronts","\u002Fdocs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fvue","docs\u002Fproducts\u002Fsites\u002Fquick-start\u002Fvue\u002Findex",[486],{"title":482,"path":483,"stem":484},{"title":488,"path":489,"stem":490,"children":491},"Rendering","\u002Fdocs\u002Fproducts\u002Fsites\u002Frendering","docs\u002Fproducts\u002Fsites\u002Frendering\u002Findex",[492,493,499],{"title":488,"path":489,"stem":490},{"title":494,"path":495,"stem":496,"children":497},"Server Side Rendering","\u002Fdocs\u002Fproducts\u002Fsites\u002Frendering\u002Fssr","docs\u002Fproducts\u002Fsites\u002Frendering\u002Fssr\u002Findex",[498],{"title":494,"path":495,"stem":496},{"title":500,"path":501,"stem":502,"children":503},"Static","\u002Fdocs\u002Fproducts\u002Fsites\u002Frendering\u002Fstatic","docs\u002Fproducts\u002Fsites\u002Frendering\u002Fstatic\u002Findex",[504],{"title":500,"path":501,"stem":502},{"title":506,"path":507,"stem":508,"children":509},"Templates","\u002Fdocs\u002Fproducts\u002Fsites\u002Ftemplates","docs\u002Fproducts\u002Fsites\u002Ftemplates\u002Findex",[510],{"title":506,"path":507,"stem":508},{"title":512,"path":513,"stem":514,"children":515},"Theming","\u002Fdocs\u002Fproducts\u002Fsites\u002Ftheming","docs\u002Fproducts\u002Fsites\u002Ftheming\u002Findex",[516],{"title":512,"path":513,"stem":514},{"title":518,"path":519,"stem":520,"children":521},"Storage","\u002Fdocs\u002Fproducts\u002Fstorage","docs\u002Fproducts\u002Fstorage\u002Findex",[522,523,529,535,541,547,553,559],{"title":518,"path":519,"stem":520},{"title":524,"path":525,"stem":526,"children":527},"Folders","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fbuckets","docs\u002Fproducts\u002Fstorage\u002Fbuckets\u002Findex",[528],{"title":524,"path":525,"stem":526},{"title":530,"path":531,"stem":532,"children":533},"Signed URLs and access","\u002Fdocs\u002Fproducts\u002Fstorage\u002Ffile-tokens","docs\u002Fproducts\u002Fstorage\u002Ffile-tokens\u002Findex",[534],{"title":530,"path":531,"stem":532},{"title":536,"path":537,"stem":538,"children":539},"Serve and transform images","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fimages","docs\u002Fproducts\u002Fstorage\u002Fimages\u002Findex",[540],{"title":536,"path":537,"stem":538},{"title":542,"path":543,"stem":544,"children":545},"3D assets","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fmodel-viewer","docs\u002Fproducts\u002Fstorage\u002Fmodel-viewer\u002Findex",[546],{"title":542,"path":543,"stem":544},{"title":548,"path":549,"stem":550,"children":551},"Access control and visibility","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fpermissions","docs\u002Fproducts\u002Fstorage\u002Fpermissions\u002Findex",[552],{"title":548,"path":549,"stem":550},{"title":554,"path":555,"stem":556,"children":557},"Quick start","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fquick-start","docs\u002Fproducts\u002Fstorage\u002Fquick-start\u002Findex",[558],{"title":554,"path":555,"stem":556},{"title":560,"path":561,"stem":562,"children":563},"Upload and manage files","\u002Fdocs\u002Fproducts\u002Fstorage\u002Fupload-download","docs\u002Fproducts\u002Fstorage\u002Fupload-download\u002Findex",[564],{"title":560,"path":561,"stem":562},{"title":566,"path":567,"stem":568,"children":569},"Webhooks","\u002Fdocs\u002Fproducts\u002Fwebhooks","docs\u002Fproducts\u002Fwebhooks\u002Findex",[570,571,577],{"title":566,"path":567,"stem":568},{"title":572,"path":573,"stem":574,"children":575},"Delivery","\u002Fdocs\u002Fproducts\u002Fwebhooks\u002Fdelivery","docs\u002Fproducts\u002Fwebhooks\u002Fdelivery\u002Findex",[576],{"title":572,"path":573,"stem":574},{"title":578,"path":579,"stem":580,"children":581},"Security","\u002Fdocs\u002Fproducts\u002Fwebhooks\u002Fsecurity","docs\u002Fproducts\u002Fwebhooks\u002Fsecurity\u002Findex",[582],{"title":578,"path":579,"stem":580},{"title":584,"path":585,"stem":586,"children":587},"SDKs","\u002Fdocs\u002Fsdks","docs\u002Fsdks\u002Findex",[588,589,595,601,607,613,619],{"title":584,"path":585,"stem":586},{"title":590,"path":591,"stem":592,"children":593},"App SDK","\u002Fdocs\u002Fsdks\u002Fapp-sdk","docs\u002Fsdks\u002Fapp-sdk\u002Findex",[594],{"title":590,"path":591,"stem":592},{"title":596,"path":597,"stem":598,"children":599},"CLI","\u002Fdocs\u002Fsdks\u002Fcli","docs\u002Fsdks\u002Fcli\u002Findex",[600],{"title":596,"path":597,"stem":598},{"title":602,"path":603,"stem":604,"children":605},"Integration Node SDK","\u002Fdocs\u002Fsdks\u002Fintegration-nodes","docs\u002Fsdks\u002Fintegration-nodes\u002Findex",[606],{"title":602,"path":603,"stem":604},{"title":608,"path":609,"stem":610,"children":611},"Node SDK","\u002Fdocs\u002Fsdks\u002Fnode","docs\u002Fsdks\u002Fnode\u002Findex",[612],{"title":608,"path":609,"stem":610},{"title":614,"path":615,"stem":616,"children":617},"PHP SDK","\u002Fdocs\u002Fsdks\u002Fphp","docs\u002Fsdks\u002Fphp\u002Findex",[618],{"title":614,"path":615,"stem":616},{"title":620,"path":621,"stem":622,"children":623},"Web \u002F JavaScript SDK","\u002Fdocs\u002Fsdks\u002Fweb","docs\u002Fsdks\u002Fweb\u002Findex",[624],{"title":620,"path":621,"stem":622},{"title":626,"path":627,"stem":628,"children":629},"Tooling","\u002Fdocs\u002Ftooling","docs\u002Ftooling\u002Findex",[630,631,637,864],{"title":626,"path":627,"stem":628},{"title":632,"path":633,"stem":634,"children":635},"Command Center","\u002Fdocs\u002Ftooling\u002Fcommand-center","docs\u002Ftooling\u002Fcommand-center\u002Findex",[636],{"title":632,"path":633,"stem":634},{"title":638,"path":639,"stem":640,"children":641},"Command line","\u002Fdocs\u002Ftooling\u002Fcommand-line","docs\u002Ftooling\u002Fcommand-line\u002Findex",[642,643,649,654,660,666,672,678,684,828,834,840,846,852,858],{"title":638,"path":639,"stem":640},{"title":644,"path":645,"stem":646,"children":647},"Aliases","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Faliases","docs\u002Ftooling\u002Fcommand-line\u002Faliases\u002Findex",[648],{"title":644,"path":645,"stem":646},{"title":171,"path":650,"stem":651,"children":652},"\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fauthentication","docs\u002Ftooling\u002Fcommand-line\u002Fauthentication\u002Findex",[653],{"title":171,"path":650,"stem":651},{"title":655,"path":656,"stem":657,"children":658},"Commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fcommands","docs\u002Ftooling\u002Fcommand-line\u002Fcommands\u002Findex",[659],{"title":655,"path":656,"stem":657},{"title":661,"path":662,"stem":663,"children":664},"Installation","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Finstallation","docs\u002Ftooling\u002Fcommand-line\u002Finstallation\u002Findex",[665],{"title":661,"path":662,"stem":663},{"title":667,"path":668,"stem":669,"children":670},"Interactive use","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Finteractive","docs\u002Ftooling\u002Fcommand-line\u002Finteractive\u002Findex",[671],{"title":667,"path":668,"stem":669},{"title":673,"path":674,"stem":675,"children":676},"Non-interactive use","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fnon-interactive","docs\u002Ftooling\u002Fcommand-line\u002Fnon-interactive\u002Findex",[677],{"title":673,"path":674,"stem":675},{"title":679,"path":680,"stem":681,"children":682},"Project configuration","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fproject-configuration","docs\u002Ftooling\u002Fcommand-line\u002Fproject-configuration\u002Findex",[683],{"title":679,"path":680,"stem":681},{"title":685,"path":686,"stem":687,"children":688},"Command reference","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Findex",[689,690,696,702,708,714,720,726,732,738,744,750,756,762,768,774,780,786,792,798,804,810,816,822],{"title":685,"path":686,"stem":687},{"title":691,"path":692,"stem":693,"children":694},"About commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fabout","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fabout\u002Findex",[695],{"title":691,"path":692,"stem":693},{"title":697,"path":698,"stem":699,"children":700},"Apps commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fapps","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fapps\u002Findex",[701],{"title":697,"path":698,"stem":699},{"title":703,"path":704,"stem":705,"children":706},"Carts commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcarts","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcarts\u002Findex",[707],{"title":703,"path":704,"stem":705},{"title":709,"path":710,"stem":711,"children":712},"Channels commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fchannels","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fchannels\u002Findex",[713],{"title":709,"path":710,"stem":711},{"title":715,"path":716,"stem":717,"children":718},"Create commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcreate","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcreate\u002Findex",[719],{"title":715,"path":716,"stem":717},{"title":721,"path":722,"stem":723,"children":724},"Customers commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcustomers","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fcustomers\u002Findex",[725],{"title":721,"path":722,"stem":723},{"title":727,"path":728,"stem":729,"children":730},"Deploy commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fdeploy","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fdeploy\u002Findex",[731],{"title":727,"path":728,"stem":729},{"title":733,"path":734,"stem":735,"children":736},"Forms commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fforms","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fforms\u002Findex",[737],{"title":733,"path":734,"stem":735},{"title":739,"path":740,"stem":741,"children":742},"Inventories commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Finventories","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Finventories\u002Findex",[743],{"title":739,"path":740,"stem":741},{"title":745,"path":746,"stem":747,"children":748},"Markets commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fmarkets","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fmarkets\u002Findex",[749],{"title":745,"path":746,"stem":747},{"title":751,"path":752,"stem":753,"children":754},"Order lists commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Forderlists","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Forderlists\u002Findex",[755],{"title":751,"path":752,"stem":753},{"title":757,"path":758,"stem":759,"children":760},"Orders commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Forders","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Forders\u002Findex",[761],{"title":757,"path":758,"stem":759},{"title":763,"path":764,"stem":765,"children":766},"Pages commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fpages","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fpages\u002Findex",[767],{"title":763,"path":764,"stem":765},{"title":769,"path":770,"stem":771,"children":772},"Payments commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fpayments","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fpayments\u002Findex",[773],{"title":769,"path":770,"stem":771},{"title":775,"path":776,"stem":777,"children":778},"Prices commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fprices","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fprices\u002Findex",[779],{"title":775,"path":776,"stem":777},{"title":781,"path":782,"stem":783,"children":784},"Products commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fproducts","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fproducts\u002Findex",[785],{"title":781,"path":782,"stem":783},{"title":787,"path":788,"stem":789,"children":790},"Search commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsearch","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsearch\u002Findex",[791],{"title":787,"path":788,"stem":789},{"title":793,"path":794,"stem":795,"children":796},"Settings commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsettings","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsettings\u002Findex",[797],{"title":793,"path":794,"stem":795},{"title":799,"path":800,"stem":801,"children":802},"Shipping commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fshipping","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fshipping\u002Findex",[803],{"title":799,"path":800,"stem":801},{"title":805,"path":806,"stem":807,"children":808},"Sites commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsites","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fsites\u002Findex",[809],{"title":805,"path":806,"stem":807},{"title":811,"path":812,"stem":813,"children":814},"Skills commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fskills","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fskills\u002Findex",[815],{"title":811,"path":812,"stem":813},{"title":817,"path":818,"stem":819,"children":820},"Storage commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fstorage","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Fstorage\u002Findex",[821],{"title":817,"path":818,"stem":819},{"title":823,"path":824,"stem":825,"children":826},"Tokens commands","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Freference\u002Ftokens","docs\u002Ftooling\u002Fcommand-line\u002Freference\u002Ftokens\u002Findex",[827],{"title":823,"path":824,"stem":825},{"title":829,"path":830,"stem":831,"children":832},"Interactive shell (REPL)","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Frepl","docs\u002Ftooling\u002Fcommand-line\u002Frepl\u002Findex",[833],{"title":829,"path":830,"stem":831},{"title":835,"path":836,"stem":837,"children":838},"Scaffolding","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fscaffolding","docs\u002Ftooling\u002Fcommand-line\u002Fscaffolding\u002Findex",[839],{"title":835,"path":836,"stem":837},{"title":841,"path":842,"stem":843,"children":844},"Scripting & output","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fscripting","docs\u002Ftooling\u002Fcommand-line\u002Fscripting\u002Findex",[845],{"title":841,"path":842,"stem":843},{"title":847,"path":848,"stem":849,"children":850},"Skills","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Fskills","docs\u002Ftooling\u002Fcommand-line\u002Fskills\u002Findex",[851],{"title":847,"path":848,"stem":849},{"title":853,"path":854,"stem":855,"children":856},"Full-screen app (TUI)","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Ftui","docs\u002Ftooling\u002Fcommand-line\u002Ftui\u002Findex",[857],{"title":853,"path":854,"stem":855},{"title":859,"path":860,"stem":861,"children":862},"Type generation","\u002Fdocs\u002Ftooling\u002Fcommand-line\u002Ftype-generation","docs\u002Ftooling\u002Fcommand-line\u002Ftype-generation\u002Findex",[863],{"title":859,"path":860,"stem":861},{"title":865,"path":866,"stem":867,"children":868},"Model Context Protocol","\u002Fdocs\u002Ftooling\u002Fmcp","docs\u002Ftooling\u002Fmcp\u002Findex",[869,870,876,882,888,894,900,906,912],{"title":865,"path":866,"stem":867},{"title":871,"path":872,"stem":873,"children":874},"revenexx docs MCP in Google Antigravity","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fantigravity","docs\u002Ftooling\u002Fmcp\u002Fantigravity\u002Findex",[875],{"title":871,"path":872,"stem":873},{"title":877,"path":878,"stem":879,"children":880},"revenexx docs MCP in Claude Code","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fclaude-code","docs\u002Ftooling\u002Fmcp\u002Fclaude-code\u002Findex",[881],{"title":877,"path":878,"stem":879},{"title":883,"path":884,"stem":885,"children":886},"revenexx docs MCP in Claude Desktop","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fclaude-desktop","docs\u002Ftooling\u002Fmcp\u002Fclaude-desktop\u002Findex",[887],{"title":883,"path":884,"stem":885},{"title":889,"path":890,"stem":891,"children":892},"revenexx docs MCP in Cursor","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fcursor","docs\u002Ftooling\u002Fmcp\u002Fcursor\u002Findex",[893],{"title":889,"path":890,"stem":891},{"title":895,"path":896,"stem":897,"children":898},"revenexx docs MCP in OpenCode","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fopencode","docs\u002Ftooling\u002Fmcp\u002Fopencode\u002Findex",[899],{"title":895,"path":896,"stem":897},{"title":901,"path":902,"stem":903,"children":904},"revenexx docs MCP in VS Code","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fvscode","docs\u002Ftooling\u002Fmcp\u002Fvscode\u002Findex",[905],{"title":901,"path":902,"stem":903},{"title":907,"path":908,"stem":909,"children":910},"revenexx docs MCP in Windsurf","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fwindsurf","docs\u002Ftooling\u002Fmcp\u002Fwindsurf\u002Findex",[911],{"title":907,"path":908,"stem":909},{"title":913,"path":914,"stem":915,"children":916},"revenexx docs MCP in Zenflow","\u002Fdocs\u002Ftooling\u002Fmcp\u002Fzenflow","docs\u002Ftooling\u002Fmcp\u002Fzenflow\u002Findex",[917],{"title":913,"path":914,"stem":915},{"title":919,"path":920,"stem":921,"children":922},"Tutorials","\u002Fdocs\u002Ftutorials","docs\u002Ftutorials\u002Findex",[923,924,948,954],{"title":919,"path":920,"stem":921},{"title":925,"path":926,"stem":927,"children":928},"Build a revenexx App","\u002Fdocs\u002Ftutorials\u002Fapps","docs\u002Ftutorials\u002Fapps\u002Findex",[929,930,936,942],{"title":925,"path":926,"stem":927},{"title":931,"path":932,"stem":933,"children":934},"Add a data model","\u002Fdocs\u002Ftutorials\u002Fapps\u002Fadd-a-data-model","docs\u002Ftutorials\u002Fapps\u002Fadd-a-data-model\u002Findex",[935],{"title":931,"path":932,"stem":933},{"title":937,"path":938,"stem":939,"children":940},"Build your first app","\u002Fdocs\u002Ftutorials\u002Fapps\u002Fbuild-your-first-app","docs\u002Ftutorials\u002Fapps\u002Fbuild-your-first-app\u002Findex",[941],{"title":937,"path":938,"stem":939},{"title":943,"path":944,"stem":945,"children":946},"Deploy with the CLI","\u002Fdocs\u002Ftutorials\u002Fapps\u002Fdeploy-with-the-cli","docs\u002Ftutorials\u002Fapps\u002Fdeploy-with-the-cli\u002Findex",[947],{"title":943,"path":944,"stem":945},{"title":949,"path":950,"stem":951,"children":952},"Examples","\u002Fdocs\u002Ftutorials\u002Fexamples","docs\u002Ftutorials\u002Fexamples\u002Findex",[953],{"title":949,"path":950,"stem":951},{"title":955,"path":956,"stem":957,"children":958},"Build a storefront Theme","\u002Fdocs\u002Ftutorials\u002Fthemes","docs\u002Ftutorials\u002Fthemes\u002Findex",[959,960,966,972,978],{"title":955,"path":956,"stem":957},{"title":961,"path":962,"stem":963,"children":964},"Build your first Theme","\u002Fdocs\u002Ftutorials\u002Fthemes\u002Fbuild-your-first-theme","docs\u002Ftutorials\u002Fthemes\u002Fbuild-your-first-theme\u002Findex",[965],{"title":961,"path":962,"stem":963},{"title":967,"path":968,"stem":969,"children":970},"Customize blocks","\u002Fdocs\u002Ftutorials\u002Fthemes\u002Fcustomize-blocks","docs\u002Ftutorials\u002Fthemes\u002Fcustomize-blocks\u002Findex",[971],{"title":967,"path":968,"stem":969},{"title":973,"path":974,"stem":975,"children":976},"Deploy your storefront","\u002Fdocs\u002Ftutorials\u002Fthemes\u002Fdeploy-your-storefront","docs\u002Ftutorials\u002Fthemes\u002Fdeploy-your-storefront\u002Findex",[977],{"title":973,"path":974,"stem":975},{"title":979,"path":980,"stem":981,"children":982},"Theme tokens and styling","\u002Fdocs\u002Ftutorials\u002Fthemes\u002Ftheme-tokens-and-styling","docs\u002Ftutorials\u002Fthemes\u002Ftheme-tokens-and-styling\u002Findex",[983],{"title":979,"path":980,"stem":981},{"id":985,"title":512,"body":986,"description":2693,"extension":2694,"landing":2695,"links":2695,"meta":2696,"navigation":1224,"path":513,"seo":2698,"sitemap":2699,"stem":514,"__hash__":2700},"docs\u002Fdocs\u002Fproducts\u002Fsites\u002Ftheming\u002Findex.md",{"type":987,"value":988,"toc":2685},"minimark",[989,993,1006,1022,1025,1030,1036,1405,1408,1579,1583,1590,1687,2130,2134,2137,2302,2305,2509,2513,2516,2606,2610,2613,2634,2648,2652,2681],[990,991,992],"warning",{},"The exact set of theme tokens and built-in themes is implementation-specific and may change. Treat the examples below as the general pattern; refer to your storefront template for the authoritative token list.",[994,995,996,997,1001,1002,1005],"p",{},"This page is for ",[998,999,1000],"strong",{},"frontend developers"," or ",[998,1003,1004],{},"designer-developers"," customizing a storefront's visual appearance for a specific customer. The most common scenario is whitelabeling: the same storefront codebase serves multiple customers (or multiple brands within one customer), each with their own colors, typography, and logo — and you want to handle that without forking the codebase or rebuilding for each variant.",[994,1007,1008,1009,1012,1013,1017,1018,1021],{},"The mechanism is ",[998,1010,1011],{},"CSS custom properties"," (CSS variables) applied on ",[1014,1015,1016],"code",{},":root",". Components reference variables (",[1014,1019,1020],{},"var(--color-primary)",") rather than hard-coded values; switching brand means changing the variable values, not the component code. This is well-supported in all modern browsers, well-understood by designers (who can write the design tokens directly), and works at runtime — no build step per customer.",[994,1023,1024],{},"The rest of this page shows the pattern. The specific token list will depend on which storefront template you start from.",[1026,1027,1029],"h2",{"id":1028},"how-theming-works","How Theming Works",[994,1031,1032,1033,1035],{},"A storefront defines its visual design in CSS custom properties on ",[1014,1034,1016],{},":",[1037,1038,1043],"pre",{"className":1039,"code":1040,"language":1041,"meta":1042,"style":1042},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  \u002F* Colors *\u002F\n  --color-primary: #4f46e5;\n  --color-primary-hover: #4338ca;\n  --color-secondary: #10b981;\n  --color-background: #ffffff;\n  --color-surface: #f9fafb;\n  --color-text: #1f2937;\n  --color-text-muted: #6b7280;\n  --color-border: #e5e7eb;\n  --color-error: #ef4444;\n  --color-success: #10b981;\n\n  \u002F* Typography *\u002F\n  --font-family-base: 'Inter', system-ui, sans-serif;\n  --font-family-heading: 'Inter', system-ui, sans-serif;\n  --font-size-base: 1rem;\n  --line-height-base: 1.5;\n\n  \u002F* Spacing *\u002F\n  --spacing-unit: 0.25rem;\n  --container-max-width: 1280px;\n\n  \u002F* Borders & radii *\u002F\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n}\n","css","",[1014,1044,1045,1060,1067,1085,1100,1115,1130,1145,1160,1175,1190,1205,1219,1226,1232,1263,1287,1301,1314,1319,1325,1338,1351,1356,1362,1374,1387,1399],{"__ignoreMap":1042},[1046,1047,1050,1053,1057],"span",{"class":1048,"line":1049},"line",1,[1046,1051,1035],{"class":1052},"sMK4o",[1046,1054,1056],{"class":1055},"spNyl","root",[1046,1058,1059],{"class":1052}," {\n",[1046,1061,1063],{"class":1048,"line":1062},2,[1046,1064,1066],{"class":1065},"sHwdD","  \u002F* Colors *\u002F\n",[1046,1068,1070,1074,1076,1079,1082],{"class":1048,"line":1069},3,[1046,1071,1073],{"class":1072},"sTEyZ","  --color-primary",[1046,1075,1035],{"class":1052},[1046,1077,1078],{"class":1052}," #",[1046,1080,1081],{"class":1072},"4f46e5",[1046,1083,1084],{"class":1052},";\n",[1046,1086,1088,1091,1093,1095,1098],{"class":1048,"line":1087},4,[1046,1089,1090],{"class":1072},"  --color-primary-hover",[1046,1092,1035],{"class":1052},[1046,1094,1078],{"class":1052},[1046,1096,1097],{"class":1072},"4338ca",[1046,1099,1084],{"class":1052},[1046,1101,1103,1106,1108,1110,1113],{"class":1048,"line":1102},5,[1046,1104,1105],{"class":1072},"  --color-secondary",[1046,1107,1035],{"class":1052},[1046,1109,1078],{"class":1052},[1046,1111,1112],{"class":1072},"10b981",[1046,1114,1084],{"class":1052},[1046,1116,1118,1121,1123,1125,1128],{"class":1048,"line":1117},6,[1046,1119,1120],{"class":1072},"  --color-background",[1046,1122,1035],{"class":1052},[1046,1124,1078],{"class":1052},[1046,1126,1127],{"class":1072},"ffffff",[1046,1129,1084],{"class":1052},[1046,1131,1133,1136,1138,1140,1143],{"class":1048,"line":1132},7,[1046,1134,1135],{"class":1072},"  --color-surface",[1046,1137,1035],{"class":1052},[1046,1139,1078],{"class":1052},[1046,1141,1142],{"class":1072},"f9fafb",[1046,1144,1084],{"class":1052},[1046,1146,1148,1151,1153,1155,1158],{"class":1048,"line":1147},8,[1046,1149,1150],{"class":1072},"  --color-text",[1046,1152,1035],{"class":1052},[1046,1154,1078],{"class":1052},[1046,1156,1157],{"class":1072},"1f2937",[1046,1159,1084],{"class":1052},[1046,1161,1163,1166,1168,1170,1173],{"class":1048,"line":1162},9,[1046,1164,1165],{"class":1072},"  --color-text-muted",[1046,1167,1035],{"class":1052},[1046,1169,1078],{"class":1052},[1046,1171,1172],{"class":1072},"6b7280",[1046,1174,1084],{"class":1052},[1046,1176,1178,1181,1183,1185,1188],{"class":1048,"line":1177},10,[1046,1179,1180],{"class":1072},"  --color-border",[1046,1182,1035],{"class":1052},[1046,1184,1078],{"class":1052},[1046,1186,1187],{"class":1072},"e5e7eb",[1046,1189,1084],{"class":1052},[1046,1191,1193,1196,1198,1200,1203],{"class":1048,"line":1192},11,[1046,1194,1195],{"class":1072},"  --color-error",[1046,1197,1035],{"class":1052},[1046,1199,1078],{"class":1052},[1046,1201,1202],{"class":1072},"ef4444",[1046,1204,1084],{"class":1052},[1046,1206,1208,1211,1213,1215,1217],{"class":1048,"line":1207},12,[1046,1209,1210],{"class":1072},"  --color-success",[1046,1212,1035],{"class":1052},[1046,1214,1078],{"class":1052},[1046,1216,1112],{"class":1072},[1046,1218,1084],{"class":1052},[1046,1220,1222],{"class":1048,"line":1221},13,[1046,1223,1225],{"emptyLinePlaceholder":1224},true,"\n",[1046,1227,1229],{"class":1048,"line":1228},14,[1046,1230,1231],{"class":1065},"  \u002F* Typography *\u002F\n",[1046,1233,1235,1238,1240,1243,1247,1250,1253,1256,1258,1261],{"class":1048,"line":1234},15,[1046,1236,1237],{"class":1072},"  --font-family-base",[1046,1239,1035],{"class":1052},[1046,1241,1242],{"class":1052}," '",[1046,1244,1246],{"class":1245},"sfazB","Inter",[1046,1248,1249],{"class":1052},"'",[1046,1251,1252],{"class":1052},",",[1046,1254,1255],{"class":1072}," system-ui",[1046,1257,1252],{"class":1052},[1046,1259,1260],{"class":1072}," sans-serif",[1046,1262,1084],{"class":1052},[1046,1264,1266,1269,1271,1273,1275,1277,1279,1281,1283,1285],{"class":1048,"line":1265},16,[1046,1267,1268],{"class":1072},"  --font-family-heading",[1046,1270,1035],{"class":1052},[1046,1272,1242],{"class":1052},[1046,1274,1246],{"class":1245},[1046,1276,1249],{"class":1052},[1046,1278,1252],{"class":1052},[1046,1280,1255],{"class":1072},[1046,1282,1252],{"class":1052},[1046,1284,1260],{"class":1072},[1046,1286,1084],{"class":1052},[1046,1288,1290,1293,1295,1299],{"class":1048,"line":1289},17,[1046,1291,1292],{"class":1072},"  --font-size-base",[1046,1294,1035],{"class":1052},[1046,1296,1298],{"class":1297},"sbssI"," 1rem",[1046,1300,1084],{"class":1052},[1046,1302,1304,1307,1309,1312],{"class":1048,"line":1303},18,[1046,1305,1306],{"class":1072},"  --line-height-base",[1046,1308,1035],{"class":1052},[1046,1310,1311],{"class":1297}," 1.5",[1046,1313,1084],{"class":1052},[1046,1315,1317],{"class":1048,"line":1316},19,[1046,1318,1225],{"emptyLinePlaceholder":1224},[1046,1320,1322],{"class":1048,"line":1321},20,[1046,1323,1324],{"class":1065},"  \u002F* Spacing *\u002F\n",[1046,1326,1328,1331,1333,1336],{"class":1048,"line":1327},21,[1046,1329,1330],{"class":1072},"  --spacing-unit",[1046,1332,1035],{"class":1052},[1046,1334,1335],{"class":1297}," 0.25rem",[1046,1337,1084],{"class":1052},[1046,1339,1341,1344,1346,1349],{"class":1048,"line":1340},22,[1046,1342,1343],{"class":1072},"  --container-max-width",[1046,1345,1035],{"class":1052},[1046,1347,1348],{"class":1297}," 1280px",[1046,1350,1084],{"class":1052},[1046,1352,1354],{"class":1048,"line":1353},23,[1046,1355,1225],{"emptyLinePlaceholder":1224},[1046,1357,1359],{"class":1048,"line":1358},24,[1046,1360,1361],{"class":1065},"  \u002F* Borders & radii *\u002F\n",[1046,1363,1365,1368,1370,1372],{"class":1048,"line":1364},25,[1046,1366,1367],{"class":1072},"  --radius-sm",[1046,1369,1035],{"class":1052},[1046,1371,1335],{"class":1297},[1046,1373,1084],{"class":1052},[1046,1375,1377,1380,1382,1385],{"class":1048,"line":1376},26,[1046,1378,1379],{"class":1072},"  --radius-md",[1046,1381,1035],{"class":1052},[1046,1383,1384],{"class":1297}," 0.5rem",[1046,1386,1084],{"class":1052},[1046,1388,1390,1393,1395,1397],{"class":1048,"line":1389},27,[1046,1391,1392],{"class":1072},"  --radius-lg",[1046,1394,1035],{"class":1052},[1046,1396,1298],{"class":1297},[1046,1398,1084],{"class":1052},[1046,1400,1402],{"class":1048,"line":1401},28,[1046,1403,1404],{"class":1052},"}\n",[994,1406,1407],{},"Components reference these variables rather than hard-coded values:",[1037,1409,1411],{"className":1039,"code":1410,"language":1041,"meta":1042,"style":1042},".button-primary {\n  background: var(--color-primary);\n  color: white;\n  border-radius: var(--radius-md);\n  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);\n  font-family: var(--font-family-base);\n}\n\n.button-primary:hover {\n  background: var(--color-primary-hover);\n}\n",[1014,1412,1413,1424,1445,1457,1473,1523,1539,1543,1547,1560,1575],{"__ignoreMap":1042},[1046,1414,1415,1418,1422],{"class":1048,"line":1049},[1046,1416,1417],{"class":1052},".",[1046,1419,1421],{"class":1420},"sBMFI","button-primary",[1046,1423,1059],{"class":1052},[1046,1425,1426,1430,1432,1436,1439,1442],{"class":1048,"line":1062},[1046,1427,1429],{"class":1428},"sqsOY","  background",[1046,1431,1035],{"class":1052},[1046,1433,1435],{"class":1434},"s2Zo4"," var",[1046,1437,1438],{"class":1052},"(",[1046,1440,1441],{"class":1072},"--color-primary",[1046,1443,1444],{"class":1052},");\n",[1046,1446,1447,1450,1452,1455],{"class":1048,"line":1069},[1046,1448,1449],{"class":1428},"  color",[1046,1451,1035],{"class":1052},[1046,1453,1454],{"class":1072}," white",[1046,1456,1084],{"class":1052},[1046,1458,1459,1462,1464,1466,1468,1471],{"class":1048,"line":1087},[1046,1460,1461],{"class":1428},"  border-radius",[1046,1463,1035],{"class":1052},[1046,1465,1435],{"class":1434},[1046,1467,1438],{"class":1052},[1046,1469,1470],{"class":1072},"--radius-md",[1046,1472,1444],{"class":1052},[1046,1474,1475,1478,1480,1483,1485,1488,1490,1493,1496,1499,1502,1504,1506,1508,1510,1512,1514,1516,1518,1521],{"class":1048,"line":1102},[1046,1476,1477],{"class":1428},"  padding",[1046,1479,1035],{"class":1052},[1046,1481,1482],{"class":1434}," calc",[1046,1484,1438],{"class":1052},[1046,1486,1487],{"class":1434},"var",[1046,1489,1438],{"class":1052},[1046,1491,1492],{"class":1072},"--spacing-unit",[1046,1494,1495],{"class":1052},")",[1046,1497,1498],{"class":1052}," *",[1046,1500,1501],{"class":1297}," 3",[1046,1503,1495],{"class":1052},[1046,1505,1482],{"class":1434},[1046,1507,1438],{"class":1052},[1046,1509,1487],{"class":1434},[1046,1511,1438],{"class":1052},[1046,1513,1492],{"class":1072},[1046,1515,1495],{"class":1052},[1046,1517,1498],{"class":1052},[1046,1519,1520],{"class":1297}," 6",[1046,1522,1444],{"class":1052},[1046,1524,1525,1528,1530,1532,1534,1537],{"class":1048,"line":1117},[1046,1526,1527],{"class":1428},"  font-family",[1046,1529,1035],{"class":1052},[1046,1531,1435],{"class":1434},[1046,1533,1438],{"class":1052},[1046,1535,1536],{"class":1072},"--font-family-base",[1046,1538,1444],{"class":1052},[1046,1540,1541],{"class":1048,"line":1132},[1046,1542,1404],{"class":1052},[1046,1544,1545],{"class":1048,"line":1147},[1046,1546,1225],{"emptyLinePlaceholder":1224},[1046,1548,1549,1551,1553,1555,1558],{"class":1048,"line":1162},[1046,1550,1417],{"class":1052},[1046,1552,1421],{"class":1420},[1046,1554,1035],{"class":1052},[1046,1556,1557],{"class":1055},"hover",[1046,1559,1059],{"class":1052},[1046,1561,1562,1564,1566,1568,1570,1573],{"class":1048,"line":1177},[1046,1563,1429],{"class":1428},[1046,1565,1035],{"class":1052},[1046,1567,1435],{"class":1434},[1046,1569,1438],{"class":1052},[1046,1571,1572],{"class":1072},"--color-primary-hover",[1046,1574,1444],{"class":1052},[1046,1576,1577],{"class":1048,"line":1192},[1046,1578,1404],{"class":1052},[1026,1580,1582],{"id":1581},"theme-switching","Theme Switching",[994,1584,1585,1586,1589],{},"Override variables on a ",[1014,1587,1588],{},"[data-theme]"," attribute to enable runtime theme switching:",[1037,1591,1593],{"className":1039,"code":1592,"language":1041,"meta":1042,"style":1042},"[data-theme=\"dark\"] {\n  --color-background: #111827;\n  --color-surface: #1f2937;\n  --color-text: #f3f4f6;\n  --color-text-muted: #9ca3af;\n  --color-border: #374151;\n}\n",[1014,1594,1595,1619,1632,1644,1657,1670,1683],{"__ignoreMap":1042},[1046,1596,1597,1600,1603,1606,1609,1612,1614,1617],{"class":1048,"line":1049},[1046,1598,1599],{"class":1052},"[",[1046,1601,1602],{"class":1055},"data-theme",[1046,1604,1605],{"class":1052},"=",[1046,1607,1608],{"class":1052},"\"",[1046,1610,1611],{"class":1245},"dark",[1046,1613,1608],{"class":1052},[1046,1615,1616],{"class":1052},"]",[1046,1618,1059],{"class":1052},[1046,1620,1621,1623,1625,1627,1630],{"class":1048,"line":1062},[1046,1622,1120],{"class":1072},[1046,1624,1035],{"class":1052},[1046,1626,1078],{"class":1052},[1046,1628,1629],{"class":1072},"111827",[1046,1631,1084],{"class":1052},[1046,1633,1634,1636,1638,1640,1642],{"class":1048,"line":1069},[1046,1635,1135],{"class":1072},[1046,1637,1035],{"class":1052},[1046,1639,1078],{"class":1052},[1046,1641,1157],{"class":1072},[1046,1643,1084],{"class":1052},[1046,1645,1646,1648,1650,1652,1655],{"class":1048,"line":1087},[1046,1647,1150],{"class":1072},[1046,1649,1035],{"class":1052},[1046,1651,1078],{"class":1052},[1046,1653,1654],{"class":1072},"f3f4f6",[1046,1656,1084],{"class":1052},[1046,1658,1659,1661,1663,1665,1668],{"class":1048,"line":1102},[1046,1660,1165],{"class":1072},[1046,1662,1035],{"class":1052},[1046,1664,1078],{"class":1052},[1046,1666,1667],{"class":1072},"9ca3af",[1046,1669,1084],{"class":1052},[1046,1671,1672,1674,1676,1678,1681],{"class":1048,"line":1117},[1046,1673,1180],{"class":1072},[1046,1675,1035],{"class":1052},[1046,1677,1078],{"class":1052},[1046,1679,1680],{"class":1072},"374151",[1046,1682,1084],{"class":1052},[1046,1684,1685],{"class":1048,"line":1132},[1046,1686,1404],{"class":1052},[1037,1688,1692],{"className":1689,"code":1690,"language":1691,"meta":1042,"style":1042},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst theme = useState\u003C'light' | 'dark'>('theme', () => 'light')\n\nconst toggleTheme = () => {\n  theme.value = theme.value === 'light' ? 'dark' : 'light'\n  document.documentElement.setAttribute('data-theme', theme.value)\n  localStorage.setItem('theme', theme.value)\n}\n\nonMounted(() => {\n  const saved = localStorage.getItem('theme') as 'light' | 'dark' | null\n  if (saved) {\n    theme.value = saved\n    document.documentElement.setAttribute('data-theme', saved)\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"toggleTheme\" aria-label=\"Toggle theme\">\n    {{ theme === 'dark' ? '☀️' : '🌙' }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue",[1014,1693,1694,1721,1781,1785,1800,1848,1881,1909,1913,1917,1931,1983,1999,2013,2040,2045,2052,2061,2065,2074,2108,2113,2122],{"__ignoreMap":1042},[1046,1695,1696,1699,1703,1706,1709,1711,1713,1716,1718],{"class":1048,"line":1049},[1046,1697,1698],{"class":1052},"\u003C",[1046,1700,1702],{"class":1701},"swJcz","script",[1046,1704,1705],{"class":1055}," setup",[1046,1707,1708],{"class":1055}," lang",[1046,1710,1605],{"class":1052},[1046,1712,1608],{"class":1052},[1046,1714,1715],{"class":1245},"ts",[1046,1717,1608],{"class":1052},[1046,1719,1720],{"class":1052},">\n",[1046,1722,1723,1726,1729,1731,1734,1736,1738,1741,1743,1746,1748,1750,1752,1755,1757,1759,1762,1764,1766,1769,1772,1774,1776,1778],{"class":1048,"line":1062},[1046,1724,1725],{"class":1055},"const",[1046,1727,1728],{"class":1072}," theme ",[1046,1730,1605],{"class":1052},[1046,1732,1733],{"class":1434}," useState",[1046,1735,1698],{"class":1052},[1046,1737,1249],{"class":1052},[1046,1739,1740],{"class":1245},"light",[1046,1742,1249],{"class":1052},[1046,1744,1745],{"class":1052}," |",[1046,1747,1242],{"class":1052},[1046,1749,1611],{"class":1245},[1046,1751,1249],{"class":1052},[1046,1753,1754],{"class":1052},">",[1046,1756,1438],{"class":1072},[1046,1758,1249],{"class":1052},[1046,1760,1761],{"class":1245},"theme",[1046,1763,1249],{"class":1052},[1046,1765,1252],{"class":1052},[1046,1767,1768],{"class":1052}," ()",[1046,1770,1771],{"class":1055}," =>",[1046,1773,1242],{"class":1052},[1046,1775,1740],{"class":1245},[1046,1777,1249],{"class":1052},[1046,1779,1780],{"class":1072},")\n",[1046,1782,1783],{"class":1048,"line":1069},[1046,1784,1225],{"emptyLinePlaceholder":1224},[1046,1786,1787,1789,1792,1794,1796,1798],{"class":1048,"line":1087},[1046,1788,1725],{"class":1055},[1046,1790,1791],{"class":1072}," toggleTheme ",[1046,1793,1605],{"class":1052},[1046,1795,1768],{"class":1052},[1046,1797,1771],{"class":1055},[1046,1799,1059],{"class":1052},[1046,1801,1802,1805,1807,1810,1813,1816,1818,1820,1823,1825,1827,1829,1832,1834,1836,1838,1841,1843,1845],{"class":1048,"line":1102},[1046,1803,1804],{"class":1072},"  theme",[1046,1806,1417],{"class":1052},[1046,1808,1809],{"class":1072},"value",[1046,1811,1812],{"class":1052}," =",[1046,1814,1815],{"class":1072}," theme",[1046,1817,1417],{"class":1052},[1046,1819,1809],{"class":1072},[1046,1821,1822],{"class":1052}," ===",[1046,1824,1242],{"class":1052},[1046,1826,1740],{"class":1245},[1046,1828,1249],{"class":1052},[1046,1830,1831],{"class":1052}," ?",[1046,1833,1242],{"class":1052},[1046,1835,1611],{"class":1245},[1046,1837,1249],{"class":1052},[1046,1839,1840],{"class":1052}," :",[1046,1842,1242],{"class":1052},[1046,1844,1740],{"class":1245},[1046,1846,1847],{"class":1052},"'\n",[1046,1849,1850,1853,1855,1858,1860,1863,1865,1867,1869,1871,1873,1875,1877,1879],{"class":1048,"line":1117},[1046,1851,1852],{"class":1072},"  document",[1046,1854,1417],{"class":1052},[1046,1856,1857],{"class":1072},"documentElement",[1046,1859,1417],{"class":1052},[1046,1861,1862],{"class":1434},"setAttribute",[1046,1864,1438],{"class":1701},[1046,1866,1249],{"class":1052},[1046,1868,1602],{"class":1245},[1046,1870,1249],{"class":1052},[1046,1872,1252],{"class":1052},[1046,1874,1815],{"class":1072},[1046,1876,1417],{"class":1052},[1046,1878,1809],{"class":1072},[1046,1880,1780],{"class":1701},[1046,1882,1883,1886,1888,1891,1893,1895,1897,1899,1901,1903,1905,1907],{"class":1048,"line":1132},[1046,1884,1885],{"class":1072},"  localStorage",[1046,1887,1417],{"class":1052},[1046,1889,1890],{"class":1434},"setItem",[1046,1892,1438],{"class":1701},[1046,1894,1249],{"class":1052},[1046,1896,1761],{"class":1245},[1046,1898,1249],{"class":1052},[1046,1900,1252],{"class":1052},[1046,1902,1815],{"class":1072},[1046,1904,1417],{"class":1052},[1046,1906,1809],{"class":1072},[1046,1908,1780],{"class":1701},[1046,1910,1911],{"class":1048,"line":1147},[1046,1912,1404],{"class":1052},[1046,1914,1915],{"class":1048,"line":1162},[1046,1916,1225],{"emptyLinePlaceholder":1224},[1046,1918,1919,1922,1924,1927,1929],{"class":1048,"line":1177},[1046,1920,1921],{"class":1434},"onMounted",[1046,1923,1438],{"class":1072},[1046,1925,1926],{"class":1052},"()",[1046,1928,1771],{"class":1055},[1046,1930,1059],{"class":1052},[1046,1932,1933,1936,1939,1941,1944,1946,1949,1951,1953,1955,1957,1960,1964,1966,1968,1970,1972,1974,1976,1978,1980],{"class":1048,"line":1192},[1046,1934,1935],{"class":1055},"  const",[1046,1937,1938],{"class":1072}," saved",[1046,1940,1812],{"class":1052},[1046,1942,1943],{"class":1072}," localStorage",[1046,1945,1417],{"class":1052},[1046,1947,1948],{"class":1434},"getItem",[1046,1950,1438],{"class":1701},[1046,1952,1249],{"class":1052},[1046,1954,1761],{"class":1245},[1046,1956,1249],{"class":1052},[1046,1958,1959],{"class":1701},") ",[1046,1961,1963],{"class":1962},"s7zQu","as",[1046,1965,1242],{"class":1052},[1046,1967,1740],{"class":1245},[1046,1969,1249],{"class":1052},[1046,1971,1745],{"class":1052},[1046,1973,1242],{"class":1052},[1046,1975,1611],{"class":1245},[1046,1977,1249],{"class":1052},[1046,1979,1745],{"class":1052},[1046,1981,1982],{"class":1420}," null\n",[1046,1984,1985,1988,1991,1994,1996],{"class":1048,"line":1207},[1046,1986,1987],{"class":1962},"  if",[1046,1989,1990],{"class":1701}," (",[1046,1992,1993],{"class":1072},"saved",[1046,1995,1959],{"class":1701},[1046,1997,1998],{"class":1052},"{\n",[1046,2000,2001,2004,2006,2008,2010],{"class":1048,"line":1221},[1046,2002,2003],{"class":1072},"    theme",[1046,2005,1417],{"class":1052},[1046,2007,1809],{"class":1072},[1046,2009,1812],{"class":1052},[1046,2011,2012],{"class":1072}," saved\n",[1046,2014,2015,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038],{"class":1048,"line":1228},[1046,2016,2017],{"class":1072},"    document",[1046,2019,1417],{"class":1052},[1046,2021,1857],{"class":1072},[1046,2023,1417],{"class":1052},[1046,2025,1862],{"class":1434},[1046,2027,1438],{"class":1701},[1046,2029,1249],{"class":1052},[1046,2031,1602],{"class":1245},[1046,2033,1249],{"class":1052},[1046,2035,1252],{"class":1052},[1046,2037,1938],{"class":1072},[1046,2039,1780],{"class":1701},[1046,2041,2042],{"class":1048,"line":1234},[1046,2043,2044],{"class":1052},"  }\n",[1046,2046,2047,2050],{"class":1048,"line":1265},[1046,2048,2049],{"class":1052},"}",[1046,2051,1780],{"class":1072},[1046,2053,2054,2057,2059],{"class":1048,"line":1289},[1046,2055,2056],{"class":1052},"\u003C\u002F",[1046,2058,1702],{"class":1701},[1046,2060,1720],{"class":1052},[1046,2062,2063],{"class":1048,"line":1303},[1046,2064,1225],{"emptyLinePlaceholder":1224},[1046,2066,2067,2069,2072],{"class":1048,"line":1316},[1046,2068,1698],{"class":1052},[1046,2070,2071],{"class":1701},"template",[1046,2073,1720],{"class":1052},[1046,2075,2076,2079,2082,2085,2087,2089,2092,2094,2097,2099,2101,2104,2106],{"class":1048,"line":1321},[1046,2077,2078],{"class":1052},"  \u003C",[1046,2080,2081],{"class":1701},"button",[1046,2083,2084],{"class":1055}," @click",[1046,2086,1605],{"class":1052},[1046,2088,1608],{"class":1052},[1046,2090,2091],{"class":1245},"toggleTheme",[1046,2093,1608],{"class":1052},[1046,2095,2096],{"class":1055}," aria-label",[1046,2098,1605],{"class":1052},[1046,2100,1608],{"class":1052},[1046,2102,2103],{"class":1245},"Toggle theme",[1046,2105,1608],{"class":1052},[1046,2107,1720],{"class":1052},[1046,2109,2110],{"class":1048,"line":1327},[1046,2111,2112],{"class":1072},"    {{ theme === 'dark' ? '☀️' : '🌙' }}\n",[1046,2114,2115,2118,2120],{"class":1048,"line":1340},[1046,2116,2117],{"class":1052},"  \u003C\u002F",[1046,2119,2081],{"class":1701},[1046,2121,1720],{"class":1052},[1046,2123,2124,2126,2128],{"class":1048,"line":1353},[1046,2125,2056],{"class":1052},[1046,2127,2071],{"class":1701},[1046,2129,1720],{"class":1052},[1026,2131,2133],{"id":2132},"per-tenant-theming","Per-Tenant Theming",[994,2135,2136],{},"In a multi-tenant storefront, each tenant can have its own theme tokens. Fetch the active tenant's theme during SSR and inject it into the page:",[1037,2138,2140],{"className":1689,"code":2139,"language":1691,"meta":1042,"style":1042},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { data: theme } = await useFetch(`\u002Fapi\u002Ftenant\u002F${route.params.tenant}\u002Ftheme`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :style=\"theme.cssVars\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1014,2141,2142,2162,2177,2234,2242,2246,2254,2275,2286,2294],{"__ignoreMap":1042},[1046,2143,2144,2146,2148,2150,2152,2154,2156,2158,2160],{"class":1048,"line":1049},[1046,2145,1698],{"class":1052},[1046,2147,1702],{"class":1701},[1046,2149,1705],{"class":1055},[1046,2151,1708],{"class":1055},[1046,2153,1605],{"class":1052},[1046,2155,1608],{"class":1052},[1046,2157,1715],{"class":1245},[1046,2159,1608],{"class":1052},[1046,2161,1720],{"class":1052},[1046,2163,2164,2166,2169,2171,2174],{"class":1048,"line":1062},[1046,2165,1725],{"class":1055},[1046,2167,2168],{"class":1072}," route ",[1046,2170,1605],{"class":1052},[1046,2172,2173],{"class":1434}," useRoute",[1046,2175,2176],{"class":1072},"()\n",[1046,2178,2179,2181,2184,2187,2189,2191,2193,2195,2198,2201,2203,2206,2209,2212,2215,2217,2220,2222,2225,2227,2230,2232],{"class":1048,"line":1069},[1046,2180,1725],{"class":1055},[1046,2182,2183],{"class":1052}," {",[1046,2185,2186],{"class":1701}," data",[1046,2188,1035],{"class":1052},[1046,2190,1728],{"class":1072},[1046,2192,2049],{"class":1052},[1046,2194,1812],{"class":1052},[1046,2196,2197],{"class":1962}," await",[1046,2199,2200],{"class":1434}," useFetch",[1046,2202,1438],{"class":1072},[1046,2204,2205],{"class":1052},"`",[1046,2207,2208],{"class":1245},"\u002Fapi\u002Ftenant\u002F",[1046,2210,2211],{"class":1052},"${",[1046,2213,2214],{"class":1072},"route",[1046,2216,1417],{"class":1052},[1046,2218,2219],{"class":1072},"params",[1046,2221,1417],{"class":1052},[1046,2223,2224],{"class":1072},"tenant",[1046,2226,2049],{"class":1052},[1046,2228,2229],{"class":1245},"\u002Ftheme",[1046,2231,2205],{"class":1052},[1046,2233,1780],{"class":1072},[1046,2235,2236,2238,2240],{"class":1048,"line":1087},[1046,2237,2056],{"class":1052},[1046,2239,1702],{"class":1701},[1046,2241,1720],{"class":1052},[1046,2243,2244],{"class":1048,"line":1102},[1046,2245,1225],{"emptyLinePlaceholder":1224},[1046,2247,2248,2250,2252],{"class":1048,"line":1117},[1046,2249,1698],{"class":1052},[1046,2251,2071],{"class":1701},[1046,2253,1720],{"class":1052},[1046,2255,2256,2258,2261,2264,2266,2268,2271,2273],{"class":1048,"line":1132},[1046,2257,2078],{"class":1052},[1046,2259,2260],{"class":1701},"div",[1046,2262,2263],{"class":1055}," :style",[1046,2265,1605],{"class":1052},[1046,2267,1608],{"class":1052},[1046,2269,2270],{"class":1245},"theme.cssVars",[1046,2272,1608],{"class":1052},[1046,2274,1720],{"class":1052},[1046,2276,2277,2280,2283],{"class":1048,"line":1147},[1046,2278,2279],{"class":1052},"    \u003C",[1046,2281,2282],{"class":1701},"slot",[1046,2284,2285],{"class":1052}," \u002F>\n",[1046,2287,2288,2290,2292],{"class":1048,"line":1162},[1046,2289,2117],{"class":1052},[1046,2291,2260],{"class":1701},[1046,2293,1720],{"class":1052},[1046,2295,2296,2298,2300],{"class":1048,"line":1177},[1046,2297,2056],{"class":1052},[1046,2299,2071],{"class":1701},[1046,2301,1720],{"class":1052},[994,2303,2304],{},"The server returns a tenant-specific style object:",[1037,2306,2310],{"className":2307,"code":2308,"language":2309,"meta":1042,"style":1042},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F server\u002Fapi\u002Ftenant\u002F[id]\u002Ftheme.get.ts\nexport default defineEventHandler(async (event) => {\n  const tenantId = getRouterParam(event, 'id')\n  const tenant = await cockpit.tenants.findById(tenantId)\n\n  return {\n    cssVars: {\n      '--color-primary': tenant.branding.primary_color,\n      '--color-secondary': tenant.branding.secondary_color,\n      '--font-family-base': tenant.branding.font_family\n    }\n  }\n})\n","typescript",[1014,2311,2312,2317,2345,2372,2403,2407,2414,2423,2449,2473,2494,2499,2503],{"__ignoreMap":1042},[1046,2313,2314],{"class":1048,"line":1049},[1046,2315,2316],{"class":1065},"\u002F\u002F server\u002Fapi\u002Ftenant\u002F[id]\u002Ftheme.get.ts\n",[1046,2318,2319,2322,2325,2328,2330,2333,2335,2339,2341,2343],{"class":1048,"line":1062},[1046,2320,2321],{"class":1962},"export",[1046,2323,2324],{"class":1962}," default",[1046,2326,2327],{"class":1434}," defineEventHandler",[1046,2329,1438],{"class":1072},[1046,2331,2332],{"class":1055},"async",[1046,2334,1990],{"class":1052},[1046,2336,2338],{"class":2337},"sHdIc","event",[1046,2340,1495],{"class":1052},[1046,2342,1771],{"class":1055},[1046,2344,1059],{"class":1052},[1046,2346,2347,2349,2352,2354,2357,2359,2361,2363,2365,2368,2370],{"class":1048,"line":1069},[1046,2348,1935],{"class":1055},[1046,2350,2351],{"class":1072}," tenantId",[1046,2353,1812],{"class":1052},[1046,2355,2356],{"class":1434}," getRouterParam",[1046,2358,1438],{"class":1701},[1046,2360,2338],{"class":1072},[1046,2362,1252],{"class":1052},[1046,2364,1242],{"class":1052},[1046,2366,2367],{"class":1245},"id",[1046,2369,1249],{"class":1052},[1046,2371,1780],{"class":1701},[1046,2373,2374,2376,2379,2381,2383,2386,2388,2391,2393,2396,2398,2401],{"class":1048,"line":1087},[1046,2375,1935],{"class":1055},[1046,2377,2378],{"class":1072}," tenant",[1046,2380,1812],{"class":1052},[1046,2382,2197],{"class":1962},[1046,2384,2385],{"class":1072}," cockpit",[1046,2387,1417],{"class":1052},[1046,2389,2390],{"class":1072},"tenants",[1046,2392,1417],{"class":1052},[1046,2394,2395],{"class":1434},"findById",[1046,2397,1438],{"class":1701},[1046,2399,2400],{"class":1072},"tenantId",[1046,2402,1780],{"class":1701},[1046,2404,2405],{"class":1048,"line":1102},[1046,2406,1225],{"emptyLinePlaceholder":1224},[1046,2408,2409,2412],{"class":1048,"line":1117},[1046,2410,2411],{"class":1962},"  return",[1046,2413,1059],{"class":1052},[1046,2415,2416,2419,2421],{"class":1048,"line":1132},[1046,2417,2418],{"class":1701},"    cssVars",[1046,2420,1035],{"class":1052},[1046,2422,1059],{"class":1052},[1046,2424,2425,2428,2430,2432,2434,2436,2438,2441,2443,2446],{"class":1048,"line":1147},[1046,2426,2427],{"class":1052},"      '",[1046,2429,1441],{"class":1701},[1046,2431,1249],{"class":1052},[1046,2433,1035],{"class":1052},[1046,2435,2378],{"class":1072},[1046,2437,1417],{"class":1052},[1046,2439,2440],{"class":1072},"branding",[1046,2442,1417],{"class":1052},[1046,2444,2445],{"class":1072},"primary_color",[1046,2447,2448],{"class":1052},",\n",[1046,2450,2451,2453,2456,2458,2460,2462,2464,2466,2468,2471],{"class":1048,"line":1162},[1046,2452,2427],{"class":1052},[1046,2454,2455],{"class":1701},"--color-secondary",[1046,2457,1249],{"class":1052},[1046,2459,1035],{"class":1052},[1046,2461,2378],{"class":1072},[1046,2463,1417],{"class":1052},[1046,2465,2440],{"class":1072},[1046,2467,1417],{"class":1052},[1046,2469,2470],{"class":1072},"secondary_color",[1046,2472,2448],{"class":1052},[1046,2474,2475,2477,2479,2481,2483,2485,2487,2489,2491],{"class":1048,"line":1177},[1046,2476,2427],{"class":1052},[1046,2478,1536],{"class":1701},[1046,2480,1249],{"class":1052},[1046,2482,1035],{"class":1052},[1046,2484,2378],{"class":1072},[1046,2486,1417],{"class":1052},[1046,2488,2440],{"class":1072},[1046,2490,1417],{"class":1052},[1046,2492,2493],{"class":1072},"font_family\n",[1046,2495,2496],{"class":1048,"line":1192},[1046,2497,2498],{"class":1052},"    }\n",[1046,2500,2501],{"class":1048,"line":1207},[1046,2502,2044],{"class":1052},[1046,2504,2505,2507],{"class":1048,"line":1221},[1046,2506,2049],{"class":1052},[1046,2508,1780],{"class":1072},[1026,2510,2512],{"id":2511},"logos-and-assets","Logos and Assets",[994,2514,2515],{},"For tenant-specific logos, favicons, and Open Graph images, serve them via a CDN or the storefront's media API:",[1037,2517,2519],{"className":1689,"code":2518,"language":1691,"meta":1042,"style":1042},"\u003Ctemplate>\n  \u003CNuxtImg\n    :src=\"tenant.branding.logo_url\"\n    :alt=\"`${tenant.name} logo`\"\n    width=\"160\"\n    height=\"40\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[1014,2520,2521,2529,2536,2551,2565,2579,2593,2598],{"__ignoreMap":1042},[1046,2522,2523,2525,2527],{"class":1048,"line":1049},[1046,2524,1698],{"class":1052},[1046,2526,2071],{"class":1701},[1046,2528,1720],{"class":1052},[1046,2530,2531,2533],{"class":1048,"line":1062},[1046,2532,2078],{"class":1052},[1046,2534,2535],{"class":1701},"NuxtImg\n",[1046,2537,2538,2541,2543,2545,2548],{"class":1048,"line":1069},[1046,2539,2540],{"class":1055},"    :src",[1046,2542,1605],{"class":1052},[1046,2544,1608],{"class":1052},[1046,2546,2547],{"class":1245},"tenant.branding.logo_url",[1046,2549,2550],{"class":1052},"\"\n",[1046,2552,2553,2556,2558,2560,2563],{"class":1048,"line":1087},[1046,2554,2555],{"class":1055},"    :alt",[1046,2557,1605],{"class":1052},[1046,2559,1608],{"class":1052},[1046,2561,2562],{"class":1245},"`${tenant.name} logo`",[1046,2564,2550],{"class":1052},[1046,2566,2567,2570,2572,2574,2577],{"class":1048,"line":1102},[1046,2568,2569],{"class":1055},"    width",[1046,2571,1605],{"class":1052},[1046,2573,1608],{"class":1052},[1046,2575,2576],{"class":1245},"160",[1046,2578,2550],{"class":1052},[1046,2580,2581,2584,2586,2588,2591],{"class":1048,"line":1117},[1046,2582,2583],{"class":1055},"    height",[1046,2585,1605],{"class":1052},[1046,2587,1608],{"class":1052},[1046,2589,2590],{"class":1245},"40",[1046,2592,2550],{"class":1052},[1046,2594,2595],{"class":1048,"line":1132},[1046,2596,2597],{"class":1052},"  \u002F>\n",[1046,2599,2600,2602,2604],{"class":1048,"line":1147},[1046,2601,2056],{"class":1052},[1046,2603,2071],{"class":1701},[1046,2605,1720],{"class":1052},[1026,2607,2609],{"id":2608},"best-practices","Best Practices",[994,2611,2612],{},"A theming system stays maintainable when the tokens are few, semantic, and centralized — and tends to rot when they're many, literal, and scattered. A few habits keep it on the right side of that line.",[994,2614,2615,2618,2619,2621,2622,2625,2626,2629,2630,2633],{},[998,2616,2617],{},"Name tokens for their role, not their value."," A ",[1014,2620,1441],{}," survives a rebrand from blue to green; a ",[1014,2623,2624],{},"--color-blue-500"," becomes a lie the moment the brand colour changes. Keep the set small while you're at it — define twenty or thirty core tokens and derive the rest from them with CSS functions like ",[1014,2627,2628],{},"color-mix"," and ",[1014,2631,2632],{},"calc",", rather than hand-maintaining a hundred.",[994,2635,2636,2639,2640,2643,2644,2647],{},[998,2637,2638],{},"Keep theming in one place, and verify it everywhere."," Centralize the tokens in something like ",[1014,2641,2642],{},"assets\u002Fcss\u002Ftheme.css"," rather than scattering overrides through component ",[1014,2645,2646],{},"\u003Cstyle scoped>"," blocks, so there's a single source of truth. Test in both light and dark mode before shipping — a contrast regression is easy to miss in one mode and obvious in the other. And because tenant tokens change rarely, fetch them once per session and cache aggressively server-side rather than on every render.",[1026,2649,2651],{"id":2650},"next-steps","Next Steps",[2653,2654,2655,2665,2673],"ul",{},[2656,2657,2658,2664],"li",{},[998,2659,2660],{},[2661,2662,327],"a",{"href":2663},"\u002Fdocs\u002Fproducts\u002Fsites\u002Farchitecture\u002F"," — Overall stack and structure",[2656,2666,2667,2672],{},[998,2668,2669],{},[2661,2670,171],{"href":2671},"\u002Fdocs\u002Fproducts\u002Fsites\u002Fauthentication\u002F"," — Apply themes per logged-in customer",[2656,2674,2675,2680],{},[998,2676,2677],{},[2661,2678,338],{"href":2679},"\u002Fdocs\u002Fproducts\u002Fsites\u002Fblokki-blocks\u002F"," — Visual page composition",[2682,2683,2684],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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}",{"title":1042,"searchDepth":1062,"depth":1062,"links":2686},[2687,2688,2689,2690,2691,2692],{"id":1028,"depth":1062,"text":1029},{"id":1581,"depth":1062,"text":1582},{"id":2132,"depth":1062,"text":2133},{"id":2511,"depth":1062,"text":2512},{"id":2608,"depth":1062,"text":2609},{"id":2650,"depth":1062,"text":2651},"Customize your storefront's appearance with CSS custom properties","md",null,{"status":2697},"preview",{"title":512,"description":2693},{"loc":513},"PGPdm2o0SlZWn39hDrgPhVb24fbXXWnldHkjf7FIeNk",1785229258897]