[{"data":1,"prerenderedAt":819},["ShallowReactive",2],{"navigation_docs_en":3,"-en-concepts-theme":128,"-en-concepts-theme-surround":814},[4,41,77,103],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":40},"Getting Started","i-lucide-rocket","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fen\u002Fgetting-started\u002Fintroduction","en\u002F1.getting-started\u002F2.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fen\u002Fgetting-started\u002Finstallation","en\u002F1.getting-started\u002F3.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Project Structure","\u002Fen\u002Fgetting-started\u002Fproject-structure","en\u002F1.getting-started\u002F4.project-structure","i-lucide-folder-tree",{"title":26,"path":27,"stem":28,"icon":29},"Studio module","\u002Fen\u002Fgetting-started\u002Fstudio","en\u002F1.getting-started\u002F5.studio","i-lucide-mouse-pointer-2",{"title":31,"path":32,"stem":33,"icon":34},"Migration","\u002Fen\u002Fgetting-started\u002Fmigration","en\u002F1.getting-started\u002F6.migration","i-lucide-replace",{"title":36,"path":37,"stem":38,"icon":39},"Troubleshooting","\u002Fen\u002Fgetting-started\u002Ftroubleshooting","en\u002F1.getting-started\u002F7.troubleshooting","i-lucide-wrench",false,{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":40},"Core Concepts","i-lucide-brain","\u002Fen\u002Fconcepts","en\u002F2.concepts",[47,52,57,62,67,72],{"title":48,"path":49,"stem":50,"icon":51},"Edition","\u002Fen\u002Fconcepts\u002Fedition","en\u002F2.concepts\u002F2.edition","i-lucide-pencil",{"title":53,"path":54,"stem":55,"icon":56},"Configuration","\u002Fen\u002Fconcepts\u002Fconfiguration","en\u002F2.concepts\u002F3.configuration","i-lucide-settings",{"title":58,"path":59,"stem":60,"icon":61},"Theme","\u002Fen\u002Fconcepts\u002Ftheme","en\u002F2.concepts\u002F4.theme","i-lucide-paint-roller",{"title":63,"path":64,"stem":65,"icon":66},"Customization","\u002Fen\u002Fconcepts\u002Fcustomization","en\u002F2.concepts\u002F5.customization","i-lucide-pen-tool",{"title":68,"path":69,"stem":70,"icon":71},"Internationalization","\u002Fen\u002Fconcepts\u002Finternationalization","en\u002F2.concepts\u002F6.internationalization","i-lucide-globe",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt","\u002Fen\u002Fconcepts\u002Fnuxt","en\u002F2.concepts\u002F8.nuxt","i-simple-icons-nuxt",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":40},"Essentials","i-lucide-book-open","\u002Fen\u002Fessentials","en\u002F3.essentials",[83,88,93,98],{"title":84,"path":85,"stem":86,"icon":87},"Markdown Syntax","\u002Fen\u002Fessentials\u002Fmarkdown-syntax","en\u002F3.essentials\u002F1.markdown-syntax","i-lucide-heading-1",{"title":89,"path":90,"stem":91,"icon":92},"Code Blocks","\u002Fen\u002Fessentials\u002Fcode-blocks","en\u002F3.essentials\u002F2.code-blocks","i-lucide-code-xml",{"title":94,"path":95,"stem":96,"icon":97},"Components","\u002Fen\u002Fessentials\u002Fcomponents","en\u002F3.essentials\u002F3.components","i-lucide-component",{"title":99,"path":100,"stem":101,"icon":102},"Images and Embeds","\u002Fen\u002Fessentials\u002Fimages-embeds","en\u002F3.essentials\u002F4.images-embeds","i-lucide-image",{"title":104,"icon":105,"path":106,"stem":107,"children":108,"page":40},"AI","i-lucide-sparkles","\u002Fen\u002Fai","en\u002F4.ai",[109,113,118,123],{"title":110,"path":111,"stem":112,"icon":105},"Assistant","\u002Fen\u002Fai\u002Fassistant","en\u002F4.ai\u002F1.assistant",{"title":114,"path":115,"stem":116,"icon":117},"MCP Server","\u002Fen\u002Fai\u002Fmcp","en\u002F4.ai\u002F2.mcp","i-lucide-cpu",{"title":119,"path":120,"stem":121,"icon":122},"Agent Skills","\u002Fen\u002Fai\u002Fskills","en\u002F4.ai\u002F3.skills","i-lucide-wand-sparkles",{"title":124,"path":125,"stem":126,"icon":127},"LLMs Integration","\u002Fen\u002Fai\u002Fllms","en\u002F4.ai\u002F4.llms","i-lucide-message-circle-code",{"id":129,"title":58,"body":130,"description":807,"extension":808,"links":809,"meta":810,"navigation":811,"path":59,"seo":812,"stem":60,"__hash__":813},"docs_en\u002Fen\u002F2.concepts\u002F4.theme.md",{"type":131,"value":132,"toc":800},"minimark",[133,137,142,151,157,164,167,470,474,481,484,575,586,670,673,687,696,699,775,785,794,796],[134,135,136],"p",{},"Docus is built on top of Nuxt UI and takes full advantage of Tailwind CSS v4, CSS variables. The Tailwind Variants API offers a flexible and scalable theming system.",[138,139,141],"tip",{"to":140},"https:\u002F\u002Fui.nuxt.com\u002Fgetting-started\u002Ftheme","For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.",[143,144,146,147],"h2",{"id":145},"override-with-theme","Override with ",[148,149,150],"code",{},"@theme",[134,152,153,154,156],{},"You can customize your theme with CSS variables inside a ",[148,155,150],{}," directive to define your project's custom design tokens, like fonts, colors, and breakpoints",[134,158,159,160,163],{},"You can override this theme by creating a ",[148,161,162],{},"main.css"," file in your application.",[134,165,166],{},"This way you can override your theme:",[168,169,170,392],"code-group",{},[171,172,178],"pre",{"className":173,"code":174,"filename":175,"language":176,"meta":177,"style":177},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n\n@theme {\n  --font-sans: 'Public Sans', sans-serif;\n\n  --breakpoint-3xl: 1920px;\n\n  --color-green-50: #EFFDF5;\n  --color-green-100: #D9FBE8;\n  --color-green-200: #B3F5D1;\n  --color-green-300: #75EDAE;\n  --color-green-400: #00DC82;\n  --color-green-500: #00C16A;\n  --color-green-600: #00A155;\n  --color-green-700: #007F45;\n  --color-green-800: #016538;\n  --color-green-900: #0A5331;\n  --color-green-950: #052E16;\n}\n","assets\u002Fcss\u002Fmain.css","css","",[148,179,180,203,217,224,232,248,253,259,264,276,287,298,309,320,331,342,353,364,375,386],{"__ignoreMap":177},[181,182,185,189,193,197,200],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"s7zQu","@import",[181,190,192],{"class":191},"sMK4o"," \"",[181,194,196],{"class":195},"sfazB","tailwindcss",[181,198,199],{"class":191},"\"",[181,201,202],{"class":191},";\n",[181,204,206,208,210,213,215],{"class":183,"line":205},2,[181,207,188],{"class":187},[181,209,192],{"class":191},[181,211,212],{"class":195},"@nuxt\u002Fui",[181,214,199],{"class":191},[181,216,202],{"class":191},[181,218,220],{"class":183,"line":219},3,[181,221,223],{"emptyLinePlaceholder":222},true,"\n",[181,225,227,229],{"class":183,"line":226},4,[181,228,150],{"class":187},[181,230,231],{"class":191}," {\n",[181,233,235,239,242,246],{"class":183,"line":234},5,[181,236,238],{"class":237},"sTEyZ","  --font-sans: 'Public Sans'",[181,240,241],{"class":191},",",[181,243,245],{"class":244},"sBMFI"," sans-serif",[181,247,202],{"class":237},[181,249,251],{"class":183,"line":250},6,[181,252,223],{"emptyLinePlaceholder":222},[181,254,256],{"class":183,"line":255},7,[181,257,258],{"class":237},"  --breakpoint-3xl: 1920px;\n",[181,260,262],{"class":183,"line":261},8,[181,263,223],{"emptyLinePlaceholder":222},[181,265,267,270,273],{"class":183,"line":266},9,[181,268,269],{"class":237},"  --color-green-50: ",[181,271,272],{"class":191},"#",[181,274,275],{"class":237},"EFFDF5;\n",[181,277,279,282,284],{"class":183,"line":278},10,[181,280,281],{"class":237},"  --color-green-100: ",[181,283,272],{"class":191},[181,285,286],{"class":237},"D9FBE8;\n",[181,288,290,293,295],{"class":183,"line":289},11,[181,291,292],{"class":237},"  --color-green-200: ",[181,294,272],{"class":191},[181,296,297],{"class":237},"B3F5D1;\n",[181,299,301,304,306],{"class":183,"line":300},12,[181,302,303],{"class":237},"  --color-green-300: ",[181,305,272],{"class":191},[181,307,308],{"class":237},"75EDAE;\n",[181,310,312,315,317],{"class":183,"line":311},13,[181,313,314],{"class":237},"  --color-green-400: ",[181,316,272],{"class":191},[181,318,319],{"class":237},"00DC82;\n",[181,321,323,326,328],{"class":183,"line":322},14,[181,324,325],{"class":237},"  --color-green-500: ",[181,327,272],{"class":191},[181,329,330],{"class":237},"00C16A;\n",[181,332,334,337,339],{"class":183,"line":333},15,[181,335,336],{"class":237},"  --color-green-600: ",[181,338,272],{"class":191},[181,340,341],{"class":237},"00A155;\n",[181,343,345,348,350],{"class":183,"line":344},16,[181,346,347],{"class":237},"  --color-green-700: ",[181,349,272],{"class":191},[181,351,352],{"class":237},"007F45;\n",[181,354,356,359,361],{"class":183,"line":355},17,[181,357,358],{"class":237},"  --color-green-800: ",[181,360,272],{"class":191},[181,362,363],{"class":237},"016538;\n",[181,365,367,370,372],{"class":183,"line":366},18,[181,368,369],{"class":237},"  --color-green-900: ",[181,371,272],{"class":191},[181,373,374],{"class":237},"0A5331;\n",[181,376,378,381,383],{"class":183,"line":377},19,[181,379,380],{"class":237},"  --color-green-950: ",[181,382,272],{"class":191},[181,384,385],{"class":237},"052E16;\n",[181,387,389],{"class":183,"line":388},20,[181,390,391],{"class":237},"}\n",[171,393,398],{"className":394,"code":395,"filename":396,"language":397,"meta":177,"style":177},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fui'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css']\n})\n","nuxt.config.ts","ts",[148,399,400,418,443,462],{"__ignoreMap":177},[181,401,402,405,408,412,415],{"class":183,"line":184},[181,403,404],{"class":187},"export",[181,406,407],{"class":187}," default",[181,409,411],{"class":410},"s2Zo4"," defineNuxtConfig",[181,413,414],{"class":237},"(",[181,416,417],{"class":191},"{\n",[181,419,420,424,427,430,433,435,437,440],{"class":183,"line":205},[181,421,423],{"class":422},"swJcz","  modules",[181,425,426],{"class":191},":",[181,428,429],{"class":237}," [",[181,431,432],{"class":191},"'",[181,434,212],{"class":195},[181,436,432],{"class":191},[181,438,439],{"class":237},"]",[181,441,442],{"class":191},",\n",[181,444,445,448,450,452,454,457,459],{"class":183,"line":219},[181,446,447],{"class":422},"  css",[181,449,426],{"class":191},[181,451,429],{"class":237},[181,453,432],{"class":191},[181,455,456],{"class":195},"~\u002Fassets\u002Fcss\u002Fmain.css",[181,458,432],{"class":191},[181,460,461],{"class":237},"]\n",[181,463,464,467],{"class":183,"line":226},[181,465,466],{"class":191},"}",[181,468,469],{"class":237},")\n",[143,471,473],{"id":472},"colors","Colors",[134,475,476,477,480],{},"Docus uses pre-configured color aliases that are used to style components and power the ",[148,478,479],{},"color"," props across the UI.",[134,482,483],{},"Each badge below represents a default alias:",[485,486,487,505,517,528,539,551,563],"ul",{},[488,489,490,495,496,499,500],"li",{},[491,492],"u-badge",{"label":493,"variant":494},"primary","outline"," → Main brand color, used as the default color for components ",[497,498],"br",{}," ",[181,501,504],{"className":502},[503],"text-xs,text-muted","(default: green)",[488,506,507,510,511,499,513],{},[491,508],{"label":509,"variant":494,"color":509},"secondary"," → Secondary color to complement the primary color ",[497,512],{},[181,514,516],{"className":515},[503],"(default: blue)",[488,518,519,522,523,499,525],{},[491,520],{"label":521,"variant":494,"color":521},"success"," → Used for success states ",[497,524],{},[181,526,504],{"className":527},[503],[488,529,530,533,534,499,536],{},[491,531],{"label":532,"variant":494,"color":532},"info"," → Used for informational states ",[497,535],{},[181,537,516],{"className":538},[503],[488,540,541,544,545,499,547],{},[491,542],{"label":543,"variant":494,"color":543},"warning"," → Used for warning states ",[497,546],{},[181,548,550],{"className":549},[503],"(default: yellow)",[488,552,553,556,557,499,559],{},[491,554],{"label":555,"variant":494,"color":555},"error"," → Used for form error validation states ",[497,558],{},[181,560,562],{"className":561},[503],"(default: red)",[488,564,565,568,569,499,571],{},[491,566],{"label":567,"variant":494,"color":567},"neutral"," → Neutral color for backgrounds, text, etc. ",[497,570],{},[181,572,574],{"className":573},[503],"(default: slate)",[134,576,577,578,581,582,585],{},"You can customize these colors globally by updating the ",[148,579,580],{},"app.config.ts"," file under the ",[148,583,584],{},"ui.colors"," key:",[171,587,589],{"className":394,"code":588,"filename":580,"language":397,"meta":177,"style":177},"export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: 'blue',\n      neutral: 'zinc'\n    }\n  }\n})\n",[148,590,591,604,613,622,639,654,659,664],{"__ignoreMap":177},[181,592,593,595,597,600,602],{"class":183,"line":184},[181,594,404],{"class":187},[181,596,407],{"class":187},[181,598,599],{"class":410}," defineAppConfig",[181,601,414],{"class":237},[181,603,417],{"class":191},[181,605,606,609,611],{"class":183,"line":205},[181,607,608],{"class":422},"  ui",[181,610,426],{"class":191},[181,612,231],{"class":191},[181,614,615,618,620],{"class":183,"line":219},[181,616,617],{"class":422},"    colors",[181,619,426],{"class":191},[181,621,231],{"class":191},[181,623,624,627,629,632,635,637],{"class":183,"line":226},[181,625,626],{"class":422},"      primary",[181,628,426],{"class":191},[181,630,631],{"class":191}," '",[181,633,634],{"class":195},"blue",[181,636,432],{"class":191},[181,638,442],{"class":191},[181,640,641,644,646,648,651],{"class":183,"line":234},[181,642,643],{"class":422},"      neutral",[181,645,426],{"class":191},[181,647,631],{"class":191},[181,649,650],{"class":195},"zinc",[181,652,653],{"class":191},"'\n",[181,655,656],{"class":183,"line":250},[181,657,658],{"class":191},"    }\n",[181,660,661],{"class":183,"line":255},[181,662,663],{"class":191},"  }\n",[181,665,666,668],{"class":183,"line":261},[181,667,466],{"class":191},[181,669,469],{"class":237},[143,671,94],{"id":672},"components",[134,674,675,676,683,684,686],{},"Beyond colors, all ",[677,678,682],"a",{"href":679,"rel":680},"https:\u002F\u002Fui.nuxt.com\u002Fcomponents",[681],"nofollow","Nuxt UI components"," can be themed globally via ",[148,685,580],{},".",[134,688,689,690,695],{},"You can override any component’s appearance by using the same structure as the component’s internal theme object (displayed at ",[677,691,694],{"href":692,"rel":693},"https:\u002F\u002Fui.nuxt.com\u002Fcomponents\u002Fcard#theme",[681],"the end of each component page",").",[134,697,698],{},"For example, to change the font weight of all buttons:",[171,700,702],{"className":394,"code":701,"filename":580,"language":397,"meta":177,"style":177},"export default defineAppConfig({\n  ui: {\n    button: {\n      slots: {\n        base: 'font-bold'\n      }\n    }\n  }\n})\n",[148,703,704,716,724,733,742,756,761,765,769],{"__ignoreMap":177},[181,705,706,708,710,712,714],{"class":183,"line":184},[181,707,404],{"class":187},[181,709,407],{"class":187},[181,711,599],{"class":410},[181,713,414],{"class":237},[181,715,417],{"class":191},[181,717,718,720,722],{"class":183,"line":205},[181,719,608],{"class":422},[181,721,426],{"class":191},[181,723,231],{"class":191},[181,725,726,729,731],{"class":183,"line":219},[181,727,728],{"class":422},"    button",[181,730,426],{"class":191},[181,732,231],{"class":191},[181,734,735,738,740],{"class":183,"line":226},[181,736,737],{"class":422},"      slots",[181,739,426],{"class":191},[181,741,231],{"class":191},[181,743,744,747,749,751,754],{"class":183,"line":234},[181,745,746],{"class":422},"        base",[181,748,426],{"class":191},[181,750,631],{"class":191},[181,752,753],{"class":195},"font-bold",[181,755,653],{"class":191},[181,757,758],{"class":183,"line":250},[181,759,760],{"class":191},"      }\n",[181,762,763],{"class":183,"line":255},[181,764,658],{"class":191},[181,766,767],{"class":183,"line":261},[181,768,663],{"class":191},[181,770,771,773],{"class":183,"line":266},[181,772,466],{"class":191},[181,774,469],{"class":237},[134,776,777,778,780,781,784],{},"In this example, the ",[148,779,753],{}," class will override the default ",[148,782,783],{},"font-medium"," class on all buttons.",[786,787,789,790,793],"note",{"to":788},"https:\u002F\u002Fui.nuxt.com\u002Fcomponents\u002Fbutton#theme","To explore the available theme options for each component, refer to the ",[791,792,58],"strong",{}," section in their respective Nuxt UI documentation page.",[143,795],{"id":177},[797,798,799],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}",{"title":177,"searchDepth":205,"depth":205,"links":801},[802,804,805,806],{"id":145,"depth":205,"text":803},"Override with @theme",{"id":472,"depth":205,"text":473},{"id":672,"depth":205,"text":94},{"id":177,"depth":205,"text":177},"Custom the appearance of your Docus documentation thanks to Nuxt UI flexible theming.","md",null,{},{"icon":61},{"title":58,"description":807},"xFEwrBQk59zEc2fomqxoPcc2AXzh7Iveb5u-zvrJAPA",[815,817],{"title":53,"path":54,"stem":55,"description":816,"icon":56,"children":-1},"Customize your Docus documentation from the Nuxt application configuration file. ",{"title":63,"path":64,"stem":65,"description":818,"icon":66,"children":-1},"Learn how to override built-in components in Docus to customize your documentation.",1776085194089]