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