[{"data":1,"prerenderedAt":742},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Ftheme-et-couleurs":3,"pieces-nuxt-ui":699,"autour-\u002Fnuxt-ui\u002Ftheme-et-couleurs":724,"prerequis-\u002Fnuxt-ui\u002Ftheme-et-couleurs":729,"plan-nuxt-ui":731},{"id":4,"title":5,"body":6,"description":668,"extension":669,"ligne":670,"meta":671,"motsCles":672,"navigation":339,"niveau":676,"path":677,"prerequis":678,"ressources":680,"seo":688,"sources":689,"stem":697,"__hash__":698},"docs\u002Fnuxt-ui\u002F05.theme-et-couleurs.md","Thème, couleurs et mode sombre",{"type":7,"value":8,"toc":658},"minimark",[9,14,36,40,53,165,168,172,179,261,287,293,297,307,372,389,398,402,409,468,480,484,504,565,570,574,581,593,597,654],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,33],"ul",{},[18,19,20],"li",{},"Ce que sont les couleurs sémantiques et comment les changer.",[18,22,23,24,28,29,32],{},"Modifier le thème dans ",[25,26,27],"code",{},"app.config.ts"," et ",[25,30,31],{},"main.css",".",[18,34,35],{},"Ajouter un bouton de mode clair et sombre.",[10,37,39],{"id":38},"des-couleurs-par-rôle","Des couleurs par rôle",[41,42,43,44,47,48,52],"p",{},"Tu l'as vu avec ",[25,45,46],{},"color=\"error\""," : on ne choisit pas « rouge », on choisit un rôle. Ce sont les ",[49,50,51],"strong",{},"couleurs sémantiques",", nommées d'après leur usage.",[54,55,56,72],"table",{},[57,58,59],"thead",{},[60,61,62,66,69],"tr",{},[63,64,65],"th",{},"Rôle",[63,67,68],{},"Couleur par défaut",[63,70,71],{},"Usage",[73,74,75,89,102,114,126,139,152],"tbody",{},[60,76,77,83,86],{},[78,79,80],"td",{},[25,81,82],{},"primary",[78,84,85],{},"vert",[78,87,88],{},"Actions principales",[60,90,91,96,99],{},[78,92,93],{},[25,94,95],{},"secondary",[78,97,98],{},"bleu",[78,100,101],{},"Actions secondaires",[60,103,104,109,111],{},[78,105,106],{},[25,107,108],{},"success",[78,110,85],{},[78,112,113],{},"Réussite",[60,115,116,121,123],{},[78,117,118],{},[25,119,120],{},"info",[78,122,98],{},[78,124,125],{},"Information",[60,127,128,133,136],{},[78,129,130],{},[25,131,132],{},"warning",[78,134,135],{},"jaune",[78,137,138],{},"Avertissement",[60,140,141,146,149],{},[78,142,143],{},[25,144,145],{},"error",[78,147,148],{},"rouge",[78,150,151],{},"Erreur, suppression",[60,153,154,159,162],{},[78,155,156],{},[25,157,158],{},"neutral",[78,160,161],{},"ardoise (slate)",[78,163,164],{},"Textes, bordures, fonds",[41,166,167],{},"Changer la couleur d'un rôle change tous les composants qui l'utilisent, d'un seul coup.",[10,169,171],{"id":170},"choisir-ses-couleurs","Choisir ses couleurs",[41,173,174,175,178],{},"Les rôles se règlent dans ",[25,176,177],{},"app\u002Fapp.config.ts"," :",[180,181,186],"pre",{"className":182,"code":183,"filename":177,"language":184,"meta":185,"style":185},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: 'orange',\n      neutral: 'stone'\n    }\n  }\n})\n","ts","",[25,187,188,208,215,221,234,243,249,255],{"__ignoreMap":185},[189,190,193,197,200,204],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"sOnC1","export",[189,198,199],{"class":195}," default",[189,201,203],{"class":202},"syCW7"," defineAppConfig",[189,205,207],{"class":206},"sIXEE","({\n",[189,209,211],{"class":191,"line":210},2,[189,212,214],{"class":213},"scfrF","  ui: {\n",[189,216,218],{"class":191,"line":217},3,[189,219,220],{"class":213},"    colors: {\n",[189,222,224,227,231],{"class":191,"line":223},4,[189,225,226],{"class":213},"      primary: ",[189,228,230],{"class":229},"shWOn","'orange'",[189,232,233],{"class":213},",\n",[189,235,237,240],{"class":191,"line":236},5,[189,238,239],{"class":213},"      neutral: ",[189,241,242],{"class":229},"'stone'\n",[189,244,246],{"class":191,"line":245},6,[189,247,248],{"class":213},"    }\n",[189,250,252],{"class":191,"line":251},7,[189,253,254],{"class":213},"  }\n",[189,256,258],{"class":191,"line":257},8,[189,259,260],{"class":206},"})\n",[41,262,263,264,267,268,271,272,275,276,278,279,28,281,278,284,286],{},"Les valeurs sont des noms de couleurs de Tailwind, comme ",[25,265,266],{},"orange",", ",[25,269,270],{},"blue"," ou ",[25,273,274],{},"zinc",". Pour un site de cuisine, ",[25,277,266],{}," pour ",[25,280,82],{},[25,282,283],{},"stone",[25,285,158],{}," donnent un ton chaleureux.",[41,288,289,290,292],{},"Les boutons, badges et champs qui utilisent ",[25,291,82],{}," passent à l'orange sans autre modification.",[10,294,296],{"id":295},"ajuster-le-thème-en-css","Ajuster le thème en CSS",[41,298,299,300,303,304,306],{},"Pour changer une police ou ajouter une couleur, utilise le bloc ",[25,301,302],{},"@theme"," dans ",[25,305,31],{},", après les importations.",[180,308,313],{"className":309,"code":310,"filename":311,"language":312,"meta":185,"style":185},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n\n@theme {\n  --font-sans: 'Nunito', sans-serif;\n}\n","app\u002Fassets\u002Fcss\u002Fmain.css","css",[25,314,315,326,335,341,348,367],{"__ignoreMap":185},[189,316,317,320,323],{"class":191,"line":192},[189,318,319],{"class":195},"@import",[189,321,322],{"class":229}," \"tailwindcss\"",[189,324,325],{"class":213},";\n",[189,327,328,330,333],{"class":191,"line":210},[189,329,319],{"class":195},[189,331,332],{"class":229}," \"@nuxt\u002Fui\"",[189,334,325],{"class":213},[189,336,337],{"class":191,"line":217},[189,338,340],{"emptyLinePlaceholder":339},true,"\n",[189,342,343,345],{"class":191,"line":223},[189,344,302],{"class":195},[189,346,347],{"class":213}," {\n",[189,349,350,353,356,359,361,365],{"class":191,"line":236},[189,351,352],{"class":206},"  --font-sans",[189,354,355],{"class":213},": ",[189,357,358],{"class":229},"'Nunito'",[189,360,267],{"class":213},[189,362,364],{"class":363},"s5iOY","sans-serif",[189,366,325],{"class":213},[189,368,369],{"class":191,"line":245},[189,370,371],{"class":213},"}\n",[41,373,374,376,377,380,381,384,385,388],{},[25,375,302],{}," est une syntaxe de Tailwind CSS 4 : tu y déclares des ",[49,378,379],{},"variables CSS"," (des valeurs nommées, commençant par ",[25,382,383],{},"--",") qui deviennent des classes. Ici, ",[25,386,387],{},"--font-sans"," définit la police par défaut.",[390,391,392],"note",{},[41,393,394,395,397],{},"La police doit être chargée par ailleurs, par exemple depuis Google Fonts ou le module Nuxt Fonts. ",[25,396,302],{}," ne la télécharge pas.",[10,399,401],{"id":400},"le-mode-sombre","Le mode sombre",[41,403,404,405,408],{},"Nuxt UI enregistre pour toi le module ",[25,406,407],{},"@nuxtjs\u002Fcolor-mode",". Les composants ont déjà leurs couleurs claires et sombres. Il te reste à offrir un bouton pour basculer.",[180,410,415],{"className":411,"code":412,"filename":413,"language":414,"meta":185,"style":185},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003Cheader>\n    \u003CUColorModeButton \u002F>\n  \u003C\u002Fheader>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FEnTete.vue","vue",[25,416,417,429,439,450,459],{"__ignoreMap":185},[189,418,419,422,426],{"class":191,"line":192},[189,420,421],{"class":213},"\u003C",[189,423,425],{"class":424},"s5JFL","template",[189,427,428],{"class":213},">\n",[189,430,431,434,437],{"class":191,"line":210},[189,432,433],{"class":213},"  \u003C",[189,435,436],{"class":424},"header",[189,438,428],{"class":213},[189,440,441,444,447],{"class":191,"line":217},[189,442,443],{"class":213},"    \u003C",[189,445,446],{"class":424},"UColorModeButton",[189,448,449],{"class":213}," \u002F>\n",[189,451,452,455,457],{"class":191,"line":223},[189,453,454],{"class":213},"  \u003C\u002F",[189,456,436],{"class":424},[189,458,428],{"class":213},[189,460,461,464,466],{"class":191,"line":236},[189,462,463],{"class":213},"\u003C\u002F",[189,465,425],{"class":424},[189,467,428],{"class":213},[41,469,470,472,473,28,476,479],{},[49,471,446],{}," est un bouton qui alterne entre clair et sombre. D'autres composants du même genre existent, comme ",[25,474,475],{},"UColorModeSwitch",[25,477,478],{},"UColorModeSelect",", listés dans la documentation.",[10,481,483],{"id":482},"lire-ou-forcer-le-mode","Lire ou forcer le mode",[41,485,486,487,490,491,494,495,267,498,271,501,32],{},"Le composable ",[25,488,489],{},"useColorMode()"," donne accès au mode choisi. Sa propriété ",[25,492,493],{},"preference"," peut valoir ",[25,496,497],{},"light",[25,499,500],{},"dark",[25,502,503],{},"system",[180,505,507],{"className":411,"code":506,"language":414,"meta":185,"style":185},"\u003Cscript setup lang=\"ts\">\nconst colorMode = useColorMode()\ncolorMode.preference = 'dark'\n\u003C\u002Fscript>\n",[25,508,509,530,547,557],{"__ignoreMap":185},[189,510,511,513,516,519,522,525,528],{"class":191,"line":192},[189,512,421],{"class":213},[189,514,515],{"class":424},"script",[189,517,518],{"class":363}," setup",[189,520,521],{"class":363}," lang",[189,523,524],{"class":213},"=",[189,526,527],{"class":229},"\"ts\"",[189,529,428],{"class":213},[189,531,532,535,538,541,544],{"class":191,"line":210},[189,533,534],{"class":195},"const",[189,536,537],{"class":363}," colorMode",[189,539,540],{"class":195}," =",[189,542,543],{"class":202}," useColorMode",[189,545,546],{"class":213},"()\n",[189,548,549,552,554],{"class":191,"line":217},[189,550,551],{"class":213},"colorMode.preference ",[189,553,524],{"class":195},[189,555,556],{"class":229}," 'dark'\n",[189,558,559,561,563],{"class":191,"line":223},[189,560,463],{"class":213},[189,562,515],{"class":424},[189,564,428],{"class":213},[41,566,567,569],{},[25,568,503],{}," suit le réglage de l'ordinateur de la personne.",[10,571,573],{"id":572},"tester-les-deux-modes","Tester les deux modes",[41,575,576,577,580],{},"Teste toujours ton site en clair et en sombre. Un texte lisible dans un mode peut devenir illisible dans l'autre, surtout si tu as écrit des couleurs fixes comme ",[25,578,579],{},"text-gray-500"," dans tes propres éléments.",[582,583,584],"tip",{},[41,585,586,587,590,591,32],{},"Pour tes propres éléments, préfère les couleurs du thème, comme ",[25,588,589],{},"bg-primary",", à des teintes figées : elles suivent les réglages de ",[25,592,27],{},[10,594,596],{"id":595},"à-retenir","À retenir",[15,598,599,617,627,636,642],{},[18,600,601,602,267,604,267,606,267,608,267,610,267,612,267,614,616],{},"Les couleurs sont des rôles (",[25,603,82],{},[25,605,95],{},[25,607,108],{},[25,609,120],{},[25,611,132],{},[25,613,145],{},[25,615,158],{},").",[18,618,619,620,622,623,626],{},"On les règle dans ",[25,621,27],{},", sous ",[25,624,625],{},"ui.colors",", avec des noms de couleurs Tailwind.",[18,628,629,630,632,633,635],{},"Le bloc ",[25,631,302],{}," de ",[25,634,31],{}," ajuste polices et variables CSS.",[18,637,638,639,641],{},"Le mode sombre est inclus ; ",[25,640,446],{}," permet de basculer.",[18,643,644,647,648,267,650,271,652,32],{},[25,645,646],{},"useColorMode().preference"," accepte ",[25,649,497],{},[25,651,500],{},[25,653,503],{},[655,656,657],"style",{},"html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}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 .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}",{"title":185,"searchDepth":210,"depth":217,"links":659},[660,661,662,663,664,665,666,667],{"id":12,"depth":210,"text":13},{"id":38,"depth":210,"text":39},{"id":170,"depth":210,"text":171},{"id":295,"depth":210,"text":296},{"id":400,"depth":210,"text":401},{"id":482,"depth":210,"text":483},{"id":572,"depth":210,"text":573},{"id":595,"depth":210,"text":596},"Choisir les couleurs sémantiques dans app.config.ts, ajuster le thème dans main.css et gérer le mode sombre avec UColorModeButton.","md","nuxt-ui",{},[27,51,82,158,302,673,446,674,675],"mode sombre","useColorMode","design system","intermediaire","\u002Fnuxt-ui\u002Ftheme-et-couleurs",[679],"\u002Fnuxt-ui\u002Fnavigation-et-superpositions",[681,685],{"nom":682,"url":683,"type":684,"anglais":339},"Nuxt UI, design system (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","doc",{"nom":686,"url":687,"type":684,"anglais":339},"Nuxt UI, mode sombre avec Nuxt (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt",{"title":5,"description":668},[690,692,694],{"nom":691,"url":683},"Design system de Nuxt UI (en anglais)",{"nom":693,"url":687},"Mode sombre avec Nuxt (en anglais)",{"nom":695,"url":696},"Composant ColorModeButton (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","nuxt-ui\u002F05.theme-et-couleurs","PnB-gQIbTvkoqjeixrxeite3gtkrC8UdG4YEjjpWu9I",[700,704,708,712,715,716,720],{"path":701,"title":702,"stem":703},"\u002Fnuxt-ui\u002Finstallation","Installer Nuxt UI","nuxt-ui\u002F01.installation",{"path":705,"title":706,"stem":707},"\u002Fnuxt-ui\u002Fpremiers-composants","Premiers composants","nuxt-ui\u002F02.premiers-composants",{"path":709,"title":710,"stem":711},"\u002Fnuxt-ui\u002Fformulaires","Formulaires et validation","nuxt-ui\u002F03.formulaires",{"path":679,"title":713,"stem":714},"Navigation et superpositions","nuxt-ui\u002F04.navigation-et-superpositions",{"path":677,"title":5,"stem":697},{"path":717,"title":718,"stem":719},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant","nuxt-ui\u002F06.personnaliser-un-composant",{"path":721,"title":722,"stem":723},"\u002Fnuxt-ui","Nuxt UI","nuxt-ui\u002Findex",[725,727],{"title":713,"path":679,"stem":714,"description":726,"children":-1},"Créer un menu avec UNavigationMenu, ouvrir une fenêtre avec UModal, un menu contextuel avec UDropdownMenu et des notifications avec useToast.",{"title":718,"path":717,"stem":719,"description":728,"children":-1},"Modifier l'apparence d'un composant Nuxt UI avec la prop class, la prop ui et la configuration globale dans app.config.ts.",[730],{"path":679,"title":713,"ligne":670},[732,734,735,736,737,738,740],{"path":701,"title":702,"niveau":733,"stem":703},"debutant",{"path":705,"title":706,"niveau":733,"stem":707},{"path":709,"title":710,"niveau":733,"stem":711},{"path":679,"title":713,"niveau":676,"stem":714},{"path":677,"title":5,"niveau":676,"stem":697},{"path":717,"title":718,"niveau":739,"stem":719},"avance",{"path":721,"title":722,"niveau":741,"stem":723},"memo",1794583445973]