← Retour à Theming

Architecture et organisation du système de thèmes

CSSVariables CSS Custom Properties

Variables CSS pour une personnalisation dynamique des thèmes

:root {
  /* Primary Colors */
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;

  /* Background Colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  /* Accent Colors */
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;

  /* Border & Ring */
  --border: 214.3 31.8% 91.4%;
  --ring: 262 83% 58%;
}
TOKENSDesign Token System

Système de tokens hiérarchique pour une cohérence globale

Semantic Tokens

  • • color-text-primary
  • • color-surface-base
  • • color-border-default
  • • space-component-gap

System Tokens

  • • color-purple-500
  • • space-4
  • • radius-md
  • • shadow-lg
ARCHArchitecture des Thèmes

Structure modulaire avec inheritance et override

themes/
├── base/
│   ├── tokens.css          # Variables de base
│   ├── components.css      # Styles des composants
│   └── utilities.css       # Classes utilitaires
├── light/
│   └── theme.css          # Override pour thème clair
├── dark/
│   └── theme.css          # Override pour thème sombre
└── custom/
    ├── brand-a.css        # Thème marque A
    └── brand-b.css        # Thème marque B
CODEImplémentation TypeScript

Interface TypeScript pour la gestion des thèmes

interface Theme {
  name: string;
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
  };
  typography: {
    fontFamily: string;
    fontSize: Record<string, string>;
  };
  spacing: Record<string, string>;
  shadows: Record<string, string>;
}