Thème

Docus est construit sur Nuxt UI et tire pleinement parti de Tailwind CSS v4 et des variables CSS. L'API Tailwind Variants offre un système de thème flexible et évolutif.

Surcharger avec @theme

Vous pouvez personnaliser votre thème avec des variables CSS à l'intérieur d'une directive @theme pour définir les tokens de design personnalisés de votre projet, comme les polices, couleurs et breakpoints.

Vous pouvez surcharger ce thème en créant un fichier main.css dans votre application.

De cette façon, vous pouvez surcharger votre thème :

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

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Couleurs

Docus utilise des alias de couleurs préconfigurés qui servent à styliser les composants et à alimenter les props color dans toute l'UI.

Chaque badge ci-dessous représente un alias par défaut :

• primary → Couleur principale de la marque, utilisée par défaut pour les composants
  (défaut : vert)
• secondary → Couleur secondaire pour compléter la couleur principale
  (défaut : bleu)
• success → Utilisée pour les états de succès
  (défaut : vert)
• info → Utilisée pour les états d'information
  (défaut : bleu)
• warning → Utilisée pour les avertissements
  (défaut : jaune)
• error → Utilisée pour les erreurs de validation de formulaire
  (défaut : rouge)
• neutral → Couleur neutre pour les fonds, textes, etc.
  (défaut : ardoise)

Vous pouvez personnaliser ces couleurs globalement en mettant à jour le fichier app.config.ts sous la clé ui.colors :

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc'
    }
  }
})

Composants

Au-delà des couleurs, tous les composants Nuxt UI peuvent être thématisés globalement via app.config.ts.

Vous pouvez surcharger l'apparence de n'importe quel composant en utilisant la même structure que l'objet de thème interne du composant (affiché en bas de chaque page de composant).

Par exemple, pour changer l'épaisseur de police de tous les boutons :

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold'
      }
    }
  }
})

Dans cet exemple, la classe font-bold remplacera la classe par défaut font-medium sur tous les boutons.