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