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 {
  --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.

Sous-composants Docus

Docus utilise plusieurs composants Nuxt UI en interne pour la navigation, la table des matières et la sous-navigation. Vous pouvez personnaliser leurs variantes par défaut via app.config.ts en utilisant la clé defaultVariants, sans avoir à surcharger le composant entier.

Les composants suivants sont configurables :

Par exemple, pour changer le style de surlignage de la table des matières en circuit et basculer la variante de la navigation latérale en pill :

export default defineAppConfig({
  ui: {
    contentToc: {
      defaultVariants: {
        highlightVariant: 'circuit',
        highlightColor: 'secondary'
      }
    },
    contentNavigation: {
      defaultVariants: {
        variant: 'pill',
        highlight: false
      }
    }
  }
})

Chaque composant supporte les options de variantes suivantes :

• highlight — Afficher une ligne d'indicateur actif (true ou false)
• highlightColor — Couleur de l'indicateur (primary, secondary, neutral, etc.)
• variant — Style visuel (pill ou link, selon le composant)
• highlightVariant — Style de l'indicateur (straight ou circuit, ContentToc uniquement)
• color — Couleur de base du lien actif