Theming — Cmssy Documentation

Vue d'ensemble

cmssy est headless - votre application Next.js possède tout le style visuel (couleurs, typographie, mode sombre) sous forme de Tailwind/CSS standard dans votre propre dépôt. cmssy ne contrôle pas l'apparence de votre site. Ce que cmssy stocke par workspace, c'est le branding : un nom de marque et quelques assets partagés que vous récupérez et appliquez. La référence de style plus bas concerne ce CSS, qui vous appartient - voir Fonctionnalités avancées des blocs pour la configuration Tailwind v4.

Branding

Le branding vit dans la config de site du workspace. Récupérez-le avec fetchSiteConfig depuis @cmssy/react :

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

const { branding } = await fetchSiteConfig(cmssy);
// { brandName, logoUrl, faviconUrl, ogImageUrl } | null

Champ	Description
`brandName`	Nom affiché du site / de la marque.
`logoUrl`	Asset du logo - affichez-le dans votre header.
`faviconUrl`	Favicon - branchez-le dans les icônes de vos metadata.
`ogImageUrl`	Image Open Graph / de partage social par défaut.

Chaque champ est nullable - n'affichez que ce qui est défini. buildCmssyMetadata applique déjà le branding pour le SEO : brandName comme titre de repli et ogImageUrl comme image Open Graph / Twitter par défaut. Appliquez vous-même le favicon et le logo :

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export async function generateMetadata() {
  const { branding } = await fetchSiteConfig(cmssy);
  return branding?.faviconUrl ? { icons: { icon: branding.faviconUrl } } : {};
}

Système de couleurs

Un site cmssy typique utilise des valeurs de couleur OKLCH définies comme variables CSS dans votre application, divisées en tokens sémantiques qui s'adaptent aux modes clair et sombre :

--background / --foreground — fond de page et texte
--primary / --primary-foreground — boutons d'action principaux
--muted / --muted-foreground — fonds discrets et texte d'aide
--card / --card-foreground — surfaces de cartes
--border — couleur de bordure par défaut
--destructive — états d'erreur et de danger

Personnaliser les couleurs

Modifiez le bloc :root dans styles/main.css pour changer votre palette de couleurs. Utilisez des valeurs OKLCH pour l'uniformité perceptuelle :

Mode sombre

Le mode sombre est contrôlé par la classe .dark sur l'élément racine. Surchargez les mêmes variables dans le sélecteur .dark :

Tailwind CSS v4

Le projet utilise Tailwind CSS v4 avec une configuration CSS-first. Différences clés par rapport à v3 :

Pas de tailwind.config.js — tout vit dans le CSS
@theme inline mappe les variables CSS vers les utilitaires Tailwind
Les directives @source indiquent à Tailwind quels fichiers scanner pour les noms de classes
Les classes de dégradé utilisent bg-linear-to-r au lieu de bg-gradient-to-r
Échelle d'ombres décalée : shadow-sm en v4 = l'ancien shadow nu

Border Radius

Le border radius utilise une variable de base --radius. Tous les tokens de rayon en sont dérivés :

rounded-sm = calc(var(--radius) - 4px)
rounded-md = calc(var(--radius) - 2px)
rounded-lg = var(--radius) (10px par défaut)
rounded-xl = calc(var(--radius) + 4px)