Personnalisation

Couleurs & Typographie

Onyx utilise le format OKLCH pour les couleurs et next/font/google pour les polices. Tout se configure en deux fichiers : globals.css pour les couleurs, src/lib/fonts.ts pour les typographies.

Le format OKLCH

OKLCH est un espace colorimétrique perceptuellement uniforme. Il offre un meilleur contrôle que HEX ou HSL : les couleurs restent cohérentes entre le mode clair et le mode sombre, et les dégradés de luminosité sont prévisibles.

Format OKLCH

/* oklch(Luminosité Chroma Teinte) */
oklch(0.65  0.22  264)
/*       ^       ^    ^
    0=noir  0=gris  0-360
    1=blanc max=0.4  degrés */

Utilisez le générateur en ligne oklch.com pour choisir vos couleurs visuellement et copier les valeurs directement.

Les tokens de couleur

Ces variables CSS sont définies dans les blocs :root (mode clair) et .dark de src/app/globals.css. Tous les composants shadcn et les classes Tailwind les lisent automatiquement.

Variable	Usage
`--background`	Fond principal de la page
`--foreground`	Texte principal
`--primary`	Couleur d'accent principale (boutons, liens actifs)
`--primary-foreground`	Texte sur fond primary
`--secondary`	Fond des éléments secondaires
`--muted`	Fond atténué (cards, zones de code)
`--muted-foreground`	Texte secondaire, labels, sous-titres
`--border`	Toutes les bordures
`--ring`	Focus outline des éléments interactifs
`--card`	Fond des cards
`--destructive`	Erreurs et actions destructives

Changer les couleurs

Ouvrez src/app/globals.css et modifiez les valeurs dans les deux blocs :

src/app/globals.css

/* Mode clair */
:root {
  --radius: 0.5rem;  /* arrondi global des composants */
  --background: oklch(0.99 0.003 240);
  --primary: oklch(0.50 0.24 264);
}

/* Mode sombre */
.dark {
  --background: oklch(0.09 0.01 255);
  --primary: oklch(0.65 0.22 264);
}

Pour le mode sombre, augmentez la luminosité des couleurs vives de 0.10 à 0.15 par rapport au mode clair. Les composants shadcn ajustent automatiquement le contraste.

Modifier le rayon global

La variable --radius contrôle l'arrondi de tous les composants (boutons, cards, inputs…). Quelques repères :

0remAngles droits — style éditorial / presse
0.25remLégèrement arrondi — style professionnel
0.5remArrondi modéré — valeur par défaut Onyx
1remTrès arrondi — style SaaS / app moderne

Changer les polices

Les polices sont configurées dans src/lib/fonts.ts via next/font/google. Next.js les télécharge au build et les sert en local — pas de requête externe en prod, pas de flash de police.

Police des titres

Remplacez DM_Serif_Display par la police de votre choix. Le nom de la variable doit rester fontHeading et la CSS var--font-heading :

src/lib/fonts.ts

import { Playfair_Display, DM_Sans, JetBrains_Mono } from "next/font/google";

export const fontHeading = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-heading",
  display: "swap",
  weight: ["400", "700"],
});

Polices disponibles recommandées

Police	Import	Style
DM Serif Display	`DM_Serif_Display`	Élégant, éditorial — défaut Onyx
Playfair Display	`Playfair_Display`	Classique, magazine, haut de gamme
Cormorant Garamond	`Cormorant_Garamond`	Raffiné, naturel, littéraire
Sora	`Sora`	Moderne, tech, sobre
Space Grotesk	`Space_Grotesk`	Géométrique, startup, direct
Nunito	`Nunito`	Arrondi, amical, SaaS moderne

Police du corps de texte

La police du corps est contrôlée par fontBody dans le même fichier. Onyx utilise DM_Sans par défaut. Le principe est identique : remplacez la fonction par celle de la police choisie.

src/lib/fonts.ts

export const fontBody = DM_Sans({
  subsets: ["latin"],
  variable: "--font-body",
  weight: ["300", "400", "500"],
});

Le nom exact de la fonction d'import doit correspondre au nom de la police sur Google Fonts avec les underscores. Par exemple Inter s'importe avec { Inter }, et Open Sans avec { Open_Sans }.

Dark mode

Le dark mode est géré par next-themes. La classe .dark est ajoutée sur la balise html quand l'utilisateur bascule le thème. Vos variables CSS dans le bloc .dark de globals.css prennent alors le relais.

Le toggle est disponible dans le header via le composant ModeToggle (src/components/shared/mode-toggle.tsx). Pour désactiver complètement le dark mode :

site.config.ts

  theme: {
    darkMode: false,
  }

Précédent← Pages & Routes SuivantVercel & Production →