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