Thème, couleurs et mode sombre

Ce que tu vas apprendre

• Ce que sont les couleurs sémantiques et comment les changer.
• Modifier le thème dans app.config.ts et main.css.
• Ajouter un bouton de mode clair et sombre.

Des couleurs par rôle

Tu l'as vu avec color="error" : on ne choisit pas « rouge », on choisit un rôle. Ce sont les couleurs sémantiques, nommées d'après leur usage.

Changer la couleur d'un rôle change tous les composants qui l'utilisent, d'un seul coup.

Choisir ses couleurs

Les rôles se règlent dans app/app.config.ts :

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'orange',
      neutral: 'stone'
    }
  }
})

Les valeurs sont des noms de couleurs de Tailwind, comme orange, blue ou zinc. Pour un site de cuisine, orange pour primary et stone pour neutral donnent un ton chaleureux.

Les boutons, badges et champs qui utilisent primary passent à l'orange sans autre modification.

Ajuster le thème en CSS

Pour changer une police ou ajouter une couleur, utilise le bloc @theme dans main.css, après les importations.

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Nunito', sans-serif;
}

@theme est une syntaxe de Tailwind CSS 4 : tu y déclares des variables CSS (des valeurs nommées, commençant par --) qui deviennent des classes. Ici, --font-sans définit la police par défaut.

Le mode sombre

Nuxt UI enregistre pour toi le module @nuxtjs/color-mode. Les composants ont déjà leurs couleurs claires et sombres. Il te reste à offrir un bouton pour basculer.

<template>
  <header>
    <UColorModeButton />
  </header>
</template>

UColorModeButton est un bouton qui alterne entre clair et sombre. D'autres composants du même genre existent, comme UColorModeSwitch et UColorModeSelect, listés dans la documentation.

Lire ou forcer le mode

Le composable useColorMode() donne accès au mode choisi. Sa propriété preference peut valoir light, dark ou system.

<script setup lang="ts">
const colorMode = useColorMode()
colorMode.preference = 'dark'
</script>

system suit le réglage de l'ordinateur de la personne.

Tester les deux modes

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 text-gray-500 dans tes propres éléments.

À retenir

• Les couleurs sont des rôles (primary, secondary, success, info, warning, error, neutral).
• On les règle dans app.config.ts, sous ui.colors, avec des noms de couleurs Tailwind.
• Le bloc @theme de main.css ajuste polices et variables CSS.
• Le mode sombre est inclus ; UColorModeButton permet de basculer.
• useColorMode().preference accepte light, dark ou system.