🎨 Chromatic UI Themes

Une bibliothèque moderne de thèmes React avec intégration native Tailwind CSS.
Créez rapidement des interfaces élégantes grâce à des palettes de couleurs cohérentes et accessibles.

✨ Points forts

• 🎨 5 thèmes light prêts à l'emploi : Oceanic, Sakura, Forest, Sunset, Arctic
• 🌙 Dark mode (bientôt disponible)
• ⚡ Compatibilité Tailwind CSS via variables CSS automatiques
• 🟦 TypeScript supporté avec typage complet
• 🪝 API React Hooks simple et intuitive
• ♿ Accessibilité intégrée (contraste WCAG)
• 📱 Responsive par défaut

📦 Installation

npm install chromatic-ui-themes

🚀 Mise en route

1. Importer les styles CSS

Important : Ajoutez cette ligne au début de votre fichier principal (App.tsx ou index.tsx) :

import 'chromatic-ui-themes/dist/themes.css';

2. Fournir le thème global

import { ThemeProvider } from 'chromatic-ui-themes';
import 'chromatic-ui-themes/dist/themes.css'; // ← Ligne essentielle !

function App() {
  return (
    <ThemeProvider defaultTheme="oceanic-light">
      <div className="min-h-screen bg-theme-background text-theme-text">
        <h1 className="text-theme-primary">Hello Chromatic UI! 🎨</h1>
      </div>
    </ThemeProvider>
  );
}

3. Utiliser les hooks

import { useTheme, useThemeColors } from 'chromatic-ui-themes';

function MyComponent() {
  const { currentTheme, setTheme, availableThemes } = useTheme();
  const colors = useThemeColors();

  return (
    <div>
      <h2 style={{ color: colors.primary }}>
        Thème actuel : {currentTheme.displayName}
      </h2>

      <select
        value={currentTheme.name}
        onChange={(e) => setTheme(e.target.value)}
        className="bg-theme-surface border-theme-border text-theme-text"
      >
        {availableThemes.map((theme) => (
          <option key={theme.name} value={theme.name}>
            {theme.displayName}
          </option>
        ))}
      </select>
    </div>
  );
}

🎨 Thèmes inclus

Light

• Oceanic Light 🌊 – Bleu océan & turquoise
• Sakura Light 🌸 – Rose cerisier & violet doux
• Forest Light 🌿 – Vert naturel & orange terre
• Sunset Light ☀️ – Orange & rouge coucher de soleil
• Arctic Light ❄️ – Bleu glaciaire & cyan cristal

🚧 Dark themes à venir !

🛠️ Utilisation des classes CSS

Texte

<p class="text-theme-primary">Texte primary</p>
<p class="text-theme-secondary">Texte secondary</p>
<p class="text-theme-accent">Texte accent</p>

Fond

<div class="bg-theme-primary">Background primary</div>
<div class="bg-theme-surface">Background surface</div>

Boutons

<button class="bg-theme-primary text-theme-background hover:bg-theme-primary/90">
  Bouton Primary
</button>
<button class="border border-theme-primary text-theme-primary hover:bg-theme-primary hover:text-theme-background">
  Bouton Outline
</button>

Bordures

<div class="border border-theme-primary">Bordure primary</div>

⚡ Classes CSS prêtes à l'emploi

Les classes de couleurs sont automatiquement disponibles après l'import du CSS :

<!-- Aucune configuration Tailwind nécessaire ! -->
<div class="bg-theme-primary text-theme-background">
  Les classes fonctionnent directement
</div>

💡 Astuce : Si vous utilisez Tailwind CSS, les classes theme-* sont déjà compatibles et fonctionnent sans configuration supplémentaire.

🪝 API des Hooks

useTheme()

const { 
  currentTheme,      // Thème actif
  setTheme,          // Changer de thème
  availableThemes,   // Liste des thèmes
  isDarkMode,        // Mode sombre ?
  toggleDarkMode     // Bascule light/dark
} = useTheme();

useThemeColors()

const colors = useThemeColors();
// colors.primary, colors.secondary, etc.

Raccourcis

const isDark = useIsDarkMode();
const toggleMode = useToggleDarkMode();

🔧 Utilitaires

Génération CSS / Tailwind

import { generateCSSVariables, generateTailwindConfig } from 'chromatic-ui-themes';

const css = generateCSSVariables(oceanicLight);
const config = generateTailwindConfig(oceanicLight);

Vérification accessibilité

import { isAccessible, getContrastRatio } from 'chromatic-ui-themes';

isAccessible('#000000', '#ffffff'); // true
getContrastRatio('#000000', '#ffffff'); // 21

📁 Structure d'un thème

interface ThemeColors {
  primary: string;
  secondary: string;
  accent: string;
  background: string;
  surface: string;
  text: string;
  border: string;
  success: string;
  warning: string;
  error: string;
  info: string;
  // + variations light/dark
}

❗ Dépannage

Les couleurs ne s'appliquent pas ?

Vérifiez que vous avez bien importé le CSS :

import 'chromatic-ui-themes/dist/themes.css';

Cette ligne doit être présente dans votre fichier principal (App.tsx, index.tsx, ou main.tsx).

Les classes Tailwind ne fonctionnent pas ?

1. Assurez-vous d'avoir ajouté les variables CSS dans votre tailwind.config.js
2. Vérifiez que le ThemeProvider englobe bien votre application
3. Redémarrez votre serveur de développement après modification de la config Tailwind

🤝 Contribution

Les contributions sont les bienvenues !

1. Forkez le projet
2. Créez une branche (git checkout -b feature/NouvelleFeature)
3. Committez (git commit -m 'Ajout NouvelleFeature')
4. Pushez (git push origin feature/NouvelleFeature)
5. Ouvrez une Pull Request

📄 Licence

Distribué sous licence MIT.
Voir le fichier LICENSE pour plus de détails.

👨‍💻 Auteur

Kcyvx – @Kcyvx