[{"data":1,"prerenderedAt":1060},["ShallowReactive",2],{"navigation":3,"\u002Fguide\u002Ftheming":102,"\u002Fguide\u002Ftheming-surround":1055},[4,19,92],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,14],{"title":11,"path":12,"stem":13},"Getting started","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",{"title":15,"path":16,"stem":17},"Theming","\u002Fguide\u002Ftheming","1.guide\u002F2.theming",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24},"Components","i-lucide-shapes","\u002Fcomponents","2.components",[25,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88],{"title":26,"path":22,"stem":27},"Overview","2.components\u002Findex",{"title":29,"path":30,"stem":31},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":33,"path":34,"stem":35},"Code block","\u002Fcomponents\u002Fcode-block","2.components\u002Fcode-block",{"title":37,"path":38,"stem":39},"Date field","\u002Fcomponents\u002Fdate-field","2.components\u002Fdate-field",{"title":41,"path":42,"stem":43},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer",{"title":45,"path":46,"stem":47},"Ecosystem mark","\u002Fcomponents\u002Fecosystem-mark","2.components\u002Fecosystem-mark",{"title":49,"path":50,"stem":51},"Identifier","\u002Fcomponents\u002Fidentifier","2.components\u002Fidentifier",{"title":53,"path":54,"stem":55},"Kicker","\u002Fcomponents\u002Fkicker","2.components\u002Fkicker",{"title":57,"path":58,"stem":59},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":61,"path":62,"stem":63},"Number input","\u002Fcomponents\u002Fnumber-input","2.components\u002Fnumber-input",{"title":65,"path":66,"stem":67},"Quota meter","\u002Fcomponents\u002Fquota-meter","2.components\u002Fquota-meter",{"title":69,"path":70,"stem":71},"Repeating list","\u002Fcomponents\u002Frepeating-list","2.components\u002Frepeating-list",{"title":73,"path":74,"stem":75},"Slideover","\u002Fcomponents\u002Fslideover","2.components\u002Fslideover",{"title":77,"path":78,"stem":79},"Slots","\u002Fcomponents\u002Fslots","2.components\u002Fslots",{"title":81,"path":82,"stem":83},"Status","\u002Fcomponents\u002Fstatus","2.components\u002Fstatus",{"title":85,"path":86,"stem":87},"Theme toggle","\u002Fcomponents\u002Ftheme-toggle","2.components\u002Ftheme-toggle",{"title":89,"path":90,"stem":91},"Token reveal","\u002Fcomponents\u002Ftoken-reveal","2.components\u002Ftoken-reveal",{"title":93,"icon":94,"path":95,"stem":96,"children":97,"page":18},"Utilities","i-lucide-wrench","\u002Futilities","3.utilities",[98],{"title":99,"path":100,"stem":101},"Select none","\u002Futilities\u002Fselect-none","3.utilities\u002Fselect-none",{"id":103,"title":15,"body":104,"component":1049,"description":1050,"extension":1051,"meta":1052,"navigation":912,"path":16,"preview":1049,"seo":1053,"stem":17,"wraps":1049,"__hash__":1054},"docs\u002F1.guide\u002F2.theming.md",{"type":105,"value":106,"toc":1038},"minimark",[107,112,121,133,214,217,221,224,333,339,343,352,356,366,369,382,403,407,414,506,517,521,525,536,610,644,647,653,664,735,759,763,774,777,864,885,976,981,988,1031,1034],[108,109,111],"h2",{"id":110},"the-forest-theme","The Forest theme",[113,114,115,116,120],"p",{},"A Zoo UI theme changes ",[117,118,119],"strong",{},"color and type",", and nothing else. Forest points Nuxt UI's semantic colors at its own ramps, sets Inter and JetBrains Mono, and gives light pages a paper ground under white surfaces. Radius, spacing, shadows, motion, focus rings and every component's geometry stay exactly as Nuxt UI ships them.",[113,122,123,124,128,129,132],{},"Everything downstream is Nuxt UI's own logic: which shade paints a hover, picking the 400 shade in dark mode, the alpha steps behind ",[125,126,127],"code",{},"soft"," and ",[125,130,131],{},"subtle"," variants. The theme chooses colors; it doesn't re-specify components.",[134,135,136,149],"table",{},[137,138,139],"thead",{},[140,141,142,146],"tr",{},[143,144,145],"th",{},"Nuxt UI color",[143,147,148],{},"Forest ramp",[150,151,152,163,181,194,204],"tbody",{},[140,153,154,160],{},[155,156,157],"td",{},[125,158,159],{},"primary",[155,161,162],{},"the scheme's accent",[140,164,165,174],{},[155,166,167,170,171],{},[125,168,169],{},"neutral",", ",[125,172,173],{},"secondary",[155,175,176,177,180],{},"the ",[125,178,179],{},"--pine-*"," grays (Forest's secondary is muted, not a second hue)",[140,182,183,191],{},[155,184,185,170,188],{},[125,186,187],{},"success",[125,189,190],{},"info",[155,192,193],{},"a pair chosen per scheme",[140,195,196,201],{},[155,197,198],{},[125,199,200],{},"warning",[155,202,203],{},"amber",[140,205,206,211],{},[155,207,208],{},[125,209,210],{},"error",[155,212,213],{},"clay red",[113,215,216],{},"On top of the colors, Forest sets a value in the mono face where it reads as data: badges, keyboard keys, and table headers (as a small uppercase kicker). Alerts get a striped edge, and toasts a colored left edge with no progress bar.",[108,218,220],{"id":219},"schemes","Schemes",[113,222,223],{},"A scheme is a set of raw ramps: the grays, the accent, and a success and info pair. Import one after the layer's stylesheet and every component repaints. Use the picker in the header to try them on this page.",[134,225,226,242],{},[137,227,228],{},[140,229,230,233,236,239],{},[143,231,232],{},"Scheme",[143,234,235],{},"File",[143,237,238],{},"Success",[143,240,241],{},"Info",[150,243,244,260,275,290,305,319],{},[140,245,246,249,254,257],{},[155,247,248],{},"Pine · Teal (default)",[155,250,251],{},[125,252,253],{},"schemes\u002Fteal.css",[155,255,256],{},"green",[155,258,259],{},"sky",[140,261,262,265,270,272],{},[155,263,264],{},"Slate · Cobalt",[155,266,267],{},[125,268,269],{},"schemes\u002Fslate-cobalt.css",[155,271,256],{},[155,273,274],{},"cyan",[140,276,277,280,285,287],{},[155,278,279],{},"Graphite · Violet",[155,281,282],{},[125,283,284],{},"schemes\u002Fgraphite-violet.css",[155,286,256],{},[155,288,289],{},"blue",[140,291,292,295,300,303],{},[155,293,294],{},"Paper · Olive",[155,296,297],{},[125,298,299],{},"schemes\u002Fpaper-olive.css",[155,301,302],{},"teal",[155,304,289],{},[140,306,307,310,315,317],{},[155,308,309],{},"Ink · Indigo",[155,311,312],{},[125,313,314],{},"schemes\u002Fink-indigo.css",[155,316,256],{},[155,318,274],{},[140,320,321,324,329,331],{},[155,322,323],{},"Ember · Amber",[155,325,326],{},[125,327,328],{},"schemes\u002Fember.css",[155,330,256],{},[155,332,289],{},[113,334,335,338],{},[117,336,337],{},"Success and info are per scheme"," because they carry fixed meanings and must never read as the primary. Forest's accents span most of the hue wheel, so no single green and blue stay clear of all of them; each scheme's pair sits at least 30° of OKLCH hue away from its accent.",[108,340,342],{"id":341},"the-gray-ramp","The gray ramp",[113,344,345,346,348,349,351],{},"Every surface, text color and border comes from one gray ramp, ",[125,347,179],{},", which is Nuxt UI's ",[125,350,169],{},". The default is slightly green-tinted; each scheme brings its own. These swatches read the live variables, so they follow the scheme you pick.",[353,354],"palette-ramp",{"ramp":355},"pine",[113,357,358,359,362,363,365],{},"The accent ramp, ",[125,360,361],{},"--teal-*"," in every scheme (the name is historical), is Nuxt UI's ",[125,364,159],{},":",[353,367],{"ramp":368},"accent",[113,370,371,372,170,375,170,378,381],{},"Use Nuxt UI's semantic utilities (",[125,373,374],{},"text-muted",[125,376,377],{},"bg-elevated",[125,379,380],{},"border-default",") rather than the ramps directly, so your markup follows the scheme and dark mode on its own.",[113,383,384,387,388,391,392,395,396,398,399,402],{},[117,385,386],{},"The page ground."," Nuxt UI paints the light page with ",[125,389,390],{},"--ui-bg",", the same white its cards, inputs and overlays use. Forest paints the page with ",[125,393,394],{},"--pine-50"," and leaves ",[125,397,390],{}," white, so everything Nuxt UI draws reads as raised. Let the body show through: a wrapper painted ",[125,400,401],{},"bg-default"," hides the ground.",[108,404,406],{"id":405},"colored-edges","Colored edges",[113,408,409,410,413],{},"Zoo UI's one addition to Nuxt UI's surfaces is a ",[117,411,412],{},"3px edge in the surface's color",": on the left of inline surfaces, on the top of overlays. No color, no edge.",[134,415,416,429],{},[137,417,418],{},[140,419,420,423,426],{},[143,421,422],{},"Surface",[143,424,425],{},"How",[143,427,428],{},"Edge",[150,430,431,443,456,468,480,493],{},[140,432,433,435,440],{},[155,434,29],{},[155,436,437],{},[125,438,439],{},"\u003CZCard color=\"…\">",[155,441,442],{},"left",[140,444,445,448,453],{},[155,446,447],{},"Dialog",[155,449,450],{},[125,451,452],{},"\u003CZModal color=\"…\">",[155,454,455],{},"top",[140,457,458,461,466],{},[155,459,460],{},"Side drawer",[155,462,463],{},[125,464,465],{},"\u003CZSlideover color=\"…\">",[155,467,455],{},[140,469,470,473,478],{},[155,471,472],{},"Bottom drawer",[155,474,475],{},[125,476,477],{},"\u003CZDrawer color=\"…\">",[155,479,455],{},[140,481,482,485,491],{},[155,483,484],{},"Toast",[155,486,487,490],{},[125,488,489],{},"useToast().add({ color })"," (Forest)",[155,492,442],{},[140,494,495,498,503],{},[155,496,497],{},"Banner",[155,499,500,490],{},[125,501,502],{},"\u003CUAlert color=\"…\" variant=\"outline\">",[155,504,505],{},"left, striped",[113,507,508,509,512,513,516],{},"The four wrappers belong to the base, so a product without Forest has them too, in its own colors. Each adds only ",[125,510,511],{},"color"," and passes every other prop, ",[125,514,515],{},"v-model",", event and slot straight to the Nuxt UI component.",[518,519],"component-example",{"name":520},"CardEdges",[108,522,524],{"id":523},"per-section-accent","Per-section accent",[113,526,527,528,531,532,535],{},"A product can paint each section in its own hue. Put ",[125,529,530],{},"data-accent=\"\u003Cname>\""," on a container, and everything inside reads six ",[117,533,534],{},"roles"," instead of a fixed color:",[134,537,538,548],{},[137,539,540],{},[140,541,542,545],{},[143,543,544],{},"Role",[143,546,547],{},"For",[150,549,550,560,570,580,590,600],{},[140,551,552,557],{},[155,553,554],{},[125,555,556],{},"--accent",[155,558,559],{},"the solid: an icon tile, a band's rule, a colored edge",[140,561,562,567],{},[155,563,564],{},[125,565,566],{},"--accent-on",[155,568,569],{},"text or an icon on the solid",[140,571,572,577],{},[155,573,574],{},[125,575,576],{},"--accent-strong",[155,578,579],{},"titles and labels in the accent",[140,581,582,587],{},[155,583,584],{},[125,585,586],{},"--accent-soft",[155,588,589],{},"a band or panel tint",[140,591,592,597],{},[155,593,594],{},[125,595,596],{},"--accent-muted",[155,598,599],{},"chips",[140,601,602,607],{},[155,603,604],{},[125,605,606],{},"--accent-line",[155,608,609],{},"a rule or border",[113,611,612,613,616,617,620,621,624,625,628,629,170,632,635,636,639,640,643],{},"The base defines the roles; ",[117,614,615],{},"your product supplies the hues",". A hue is eight stops, ",[125,618,619],{},"--a-50"," to ",[125,622,623],{},"--a-950",", set under ",[125,626,627],{},"[data-accent='\u003Cname>']"," in your CSS. A name with no hue reads as your primary. Components read the roles with arbitrary values (",[125,630,631],{},"bg-(--accent)",[125,633,634],{},"border-(--accent-line)","), and the colored-edge wrappers take ",[125,637,638],{},"color=\"accent\"",". Overlays carry the section's accent with them when they portal to ",[125,641,642],{},"\u003Cbody>",", so a dialog opened from a violet section has a violet edge.",[518,645],{"name":646},"CardAccent",[108,648,650],{"id":649},"light-dark",[125,651,652],{},"light-dark()",[113,654,655,656,659,660,663],{},"Each role carries its light and its dark value in one declaration, ",[125,657,658],{},"light-dark(var(--a-600), var(--a-400))",", so your CSS needs no ",[125,661,662],{},".dark"," rules. Your own tokens can do the same:",[665,666,672],"pre",{"className":667,"code":668,"filename":669,"language":670,"meta":671,"style":671},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","@theme {\n  --color-val-input: light-dark(var(--color-sky-900), var(--color-sky-200));\n}\n","app\u002Fassets\u002Fcss\u002Fmain.css","css","",[125,673,674,687,729],{"__ignoreMap":671},[675,676,679,683],"span",{"class":677,"line":678},"line",1,[675,680,682],{"class":681},"sVHd0","@theme",[675,684,686],{"class":685},"sP7_E"," {\n",[675,688,690,694,696,700,704,707,710,713,716,718,721,724,726],{"class":677,"line":689},2,[675,691,693],{"class":692},"sMMDD","  --color-val-input",[675,695,365],{"class":685},[675,697,699],{"class":698},"su5hD"," light-dark(",[675,701,703],{"class":702},"sptTA","var",[675,705,706],{"class":685},"(",[675,708,709],{"class":692},"--color-sky-900",[675,711,712],{"class":685},"),",[675,714,715],{"class":702}," var",[675,717,706],{"class":685},[675,719,720],{"class":692},"--color-sky-200",[675,722,723],{"class":685},")",[675,725,723],{"class":698},[675,727,728],{"class":685},";\n",[675,730,732],{"class":677,"line":731},3,[675,733,734],{"class":685},"}\n",[113,736,737,738,741,742,744,745,747,748,751,752,128,755,758],{},"This needs ",[125,739,740],{},"color-scheme"," declared where the tokens live. Tailwind's production build compiles ",[125,743,652],{}," into variables it defines only under a ",[125,746,740],{}," declaration, and the color-mode module only toggles a ",[125,749,750],{},"dark"," class. So the base declares ",[125,753,754],{},":root { color-scheme: light }",[125,756,757],{},".dark { color-scheme: dark }",". Without it, such a token resolves in development and comes out empty in production.",[108,760,762],{"id":761},"typefaces-and-the-font-hooks","Typefaces and the font hooks",[113,764,765,766,769,770,773],{},"Forest's faces are ",[117,767,768],{},"Inter"," for the interface and display, and ",[117,771,772],{},"JetBrains Mono"," for code and values. Both are under the SIL Open Font License and self-hosted from fontsource packages the theme depends on, so nothing is fetched from a font CDN.",[113,775,776],{},"Each role is two hooks, a family and its OpenType feature set:",[134,778,779,789],{},[137,780,781],{},[140,782,783,786],{},[143,784,785],{},"Hook",[143,787,788],{},"Forest's default",[150,790,791,804,815,828,840,851],{},[140,792,793,798],{},[155,794,795],{},[125,796,797],{},"--zoo-font-sans",[155,799,800,803],{},[125,801,802],{},"\"Inter Variable\"",", then system faces",[140,805,806,811],{},[155,807,808],{},[125,809,810],{},"--zoo-font-display",[155,812,813,803],{},[125,814,802],{},[140,816,817,822],{},[155,818,819],{},[125,820,821],{},"--zoo-font-mono",[155,823,824,827],{},[125,825,826],{},"\"JetBrains Mono Variable\"",", then system monos",[140,829,830,835],{},[155,831,832],{},[125,833,834],{},"--zoo-features-sans",[155,836,837],{},[125,838,839],{},"normal",[140,841,842,847],{},[155,843,844],{},[125,845,846],{},"--zoo-features-display",[155,848,849],{},[125,850,839],{},[140,852,853,858],{},[155,854,855],{},[125,856,857],{},"--zoo-features-mono",[155,859,860,863],{},[125,861,862],{},"\"calt\" 0",": code ligatures off, so pasted text reads as typed",[113,865,866,867,170,870,128,873,876,877,170,879,128,882,884],{},"Every place the theme sets a face reads the hooks: Tailwind's ",[125,868,869],{},"font-sans",[125,871,872],{},"font-mono",[125,874,875],{},"font-display",", and the defaults for the page and for ",[125,878,125],{},[125,880,881],{},"kbd",[125,883,665],{},". Switching a family switches its feature set with it. The defaults sit in a cascade layer, so any unlayered declaration of your own wins, whatever the import order:",[665,886,888],{"className":667,"code":887,"filename":669,"language":670,"meta":671,"style":671},"@import \"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css\";\n\n:root {\n  --zoo-font-sans: \"Acme Sans\", system-ui, sans-serif;\n  --zoo-features-sans: \"ss01\";\n}\n",[125,889,890,908,914,925,954,971],{"__ignoreMap":671},[675,891,892,895,899,903,906],{"class":677,"line":678},[675,893,894],{"class":681},"@import",[675,896,898],{"class":897},"sjJ54"," \"",[675,900,902],{"class":901},"s_sjI","@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css",[675,904,905],{"class":897},"\"",[675,907,728],{"class":685},[675,909,910],{"class":677,"line":689},[675,911,913],{"emptyLinePlaceholder":912},true,"\n",[675,915,916,919,923],{"class":677,"line":731},[675,917,365],{"class":918},"stp6e",[675,920,922],{"class":921},"s9AJx","root",[675,924,686],{"class":685},[675,926,928,931,933,935,938,940,943,947,949,952],{"class":677,"line":927},4,[675,929,930],{"class":692},"  --zoo-font-sans",[675,932,365],{"class":685},[675,934,898],{"class":897},[675,936,937],{"class":901},"Acme Sans",[675,939,905],{"class":897},[675,941,942],{"class":685},",",[675,944,946],{"class":945},"s_hVV"," system-ui",[675,948,942],{"class":685},[675,950,951],{"class":945}," sans-serif",[675,953,728],{"class":685},[675,955,957,960,962,964,967,969],{"class":677,"line":956},5,[675,958,959],{"class":692},"  --zoo-features-sans",[675,961,365],{"class":685},[675,963,898],{"class":897},[675,965,966],{"class":901},"ss01",[675,968,905],{"class":897},[675,970,728],{"class":685},[675,972,974],{"class":677,"line":973},6,[675,975,734],{"class":685},[977,978,980],"h3",{"id":979},"a-licensed-font-package","A licensed font package",[113,982,983,984,987],{},"A licensed face is best shipped as its own package that sets all six hooks. For example, a package named ",[125,985,986],{},"@acme\u002Flicensed-fonts"," could ship a commercial face family and its feature sets. A product licensed for it imports its CSS after the theme, and the faces and their sets replace Inter and JetBrains Mono together:",[665,989,991],{"className":667,"code":990,"filename":669,"language":670,"meta":671,"style":671},"@import \"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css\";\n@import \"@zooui\u002Ftheme-forest\u002Fschemes\u002Fink-indigo.css\";\n@import \"@acme\u002Flicensed-fonts\u002Ffonts.css\";\n",[125,992,993,1005,1018],{"__ignoreMap":671},[675,994,995,997,999,1001,1003],{"class":677,"line":678},[675,996,894],{"class":681},[675,998,898],{"class":897},[675,1000,902],{"class":901},[675,1002,905],{"class":897},[675,1004,728],{"class":685},[675,1006,1007,1009,1011,1014,1016],{"class":677,"line":689},[675,1008,894],{"class":681},[675,1010,898],{"class":897},[675,1012,1013],{"class":901},"@zooui\u002Ftheme-forest\u002Fschemes\u002Fink-indigo.css",[675,1015,905],{"class":897},[675,1017,728],{"class":685},[675,1019,1020,1022,1024,1027,1029],{"class":677,"line":731},[675,1021,894],{"class":681},[675,1023,898],{"class":897},[675,1025,1026],{"class":901},"@acme\u002Flicensed-fonts\u002Ffonts.css",[675,1028,905],{"class":897},[675,1030,728],{"class":685},[113,1032,1033],{},"Zoo UI itself never depends on such a package; the hooks are the whole contract.",[1035,1036,1037],"style",{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":671,"searchDepth":731,"depth":731,"links":1039},[1040,1041,1042,1043,1044,1045,1046],{"id":110,"depth":689,"text":111},{"id":219,"depth":689,"text":220},{"id":341,"depth":689,"text":342},{"id":405,"depth":689,"text":406},{"id":523,"depth":689,"text":524},{"id":649,"depth":689,"text":652},{"id":761,"depth":689,"text":762,"children":1047},[1048],{"id":979,"depth":731,"text":980},null,"The Forest theme, its six schemes, the gray ramp, colored edges, per-section accents and the font hooks.","md",{},{"title":15,"description":1050},"Elt82BuApxcJlBStzGOcx04L-0vTZ5BedgjmuTuV9qE",[1056,1058],{"title":11,"path":12,"stem":13,"description":1057,"children":-1},"Add Zoo UI to a Nuxt app, with the Forest theme or with your own look.",{"title":26,"path":22,"stem":27,"description":1059,"children":-1},"What Zoo UI adds to Nuxt UI. Every component is written on Nuxt UI's semantic tokens, so it takes your product's colors, with or without a theme.",1794711775782]