@whitemordred/react-native-bootstrap5/THEMING.md

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

# Guide de Thématisation Bootstrap 5 pour React Native

Ce guide explique comment utiliser le système de thème complet Bootstrap 5 dans React Native Bootstrap 5.

## 🎨 Vue d'ensemble

Cette librairie offre une parité complète avec Bootstrap 5.3, incluant :

- ✅ **Toutes les couleurs Bootstrap** (primary, secondary, success, danger, warning, info, light, dark)
- ✅ **Couleurs étendues** (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan)
- ✅ **Variables CSS surchargeables** (light.css, dark.css)
- ✅ **Support RGB** pour les opacités
- ✅ **Variables d'emphase et subtle**
- ✅ **Toutes les variantes de composants**
- ✅ **Utilities classes** (text-*, bg-*, border-*)

## 🚀 Configuration de base

```tsx
import { BootstrapProvider } from '@whitemordred/react-native-bootstrap5';

export default function App() {
  return (
    <BootstrapProvider mode="light">
      {/* Votre application */}
    </BootstrapProvider>
  );
}
```

## 🌙 Mode Dark/Light

### Basculement automatique

```tsx
import { BootstrapProvider } from '@whitemordred/react-native-bootstrap5';

<BootstrapProvider mode="system">
  {/* Suit automatiquement les préférences système */}
</BootstrapProvider>
```

### Basculement manuel

```tsx
import { useTheme } from '@whitemordred/react-native-bootstrap5';

function ThemeToggle() {
  const { isDarkMode, toggleTheme } = useTheme();
  
  return (
    <Button onPress={toggleTheme}>
      {isDarkMode ? '🌙' : '☀️'} Basculer
    </Button>
  );
}
```

## 🎨 Personnalisation des thèmes

### 1. Thème personnalisé complet

```tsx
const customTheme = {
  colors: {
    // Surcharge des couleurs principales
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    danger: '#dc3545',
    warning: '#ffc107',
    info: '#17a2b8',
    light: '#f8f9fa',
    dark: '#343a40',
    
    // Couleurs étendues
    blue: '#0d6efd',
    indigo: '#6610f2',
    purple: '#6f42c1',
    pink: '#d63384',
    red: '#dc3545',
    orange: '#fd7e14',
    yellow: '#ffc107',
    green: '#198754',
    teal: '#20c997',
    cyan: '#0dcaf0',
  },
  darkColors: {
    // Personnalisation pour le mode dark
    primary: '#4fc3f7',
    secondary: '#8e8e93',
    // ... autres couleurs
  }
};

<BootstrapProvider theme={customTheme}>
  {/* Votre app */}
</BootstrapProvider>
```

### 2. Surcharge avec fichiers CSS (Web uniquement)

```tsx
import lightCSS from './custom-light.css';
import darkCSS from './custom-dark.css';

<BootstrapProvider 
  customLightCSS={lightCSS}
  customDarkCSS={darkCSS}
>
  {/* Votre app */}
</BootstrapProvider>
```

Exemple de fichier `custom-light.css` :

```css
:root {
  --bs-primary: #ff5733;
  --bs-primary-rgb: 255, 87, 51;
  --bs-primary-text-emphasis: #cc2e14;
  --bs-primary-bg-subtle: #ffe5df;
  --bs-primary-border-subtle: #ffb3a3;
}
```

## 🎯 Utilisation des variantes

### Boutons avec toutes les variantes

```tsx
// Variantes solides
<Button variant="primary">Primary</Button>
<Button variant="indigo">Indigo</Button>
<Button variant="pink">Pink</Button>

// Variantes outline
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="outline-teal">Outline Teal</Button>

// Nouvelles options Bootstrap 5
<Button variant="link">Link</Button>
<Button pill>Pill Button</Button>
<Button gradient>Gradient</Button>
<Button active>Active State</Button>
```

### Alertes avec emphase

```tsx
// Style subtle (par défaut)
<Alert variant="primary">
  Message d'information
</Alert>

// Style emphasis (fond plein)
<Alert variant="danger" emphasis>
  Erreur importante !
</Alert>

// Avec bordure
<Alert variant="warning" border>
  Attention requise
</Alert>

// Avec en-tête et icône
<Alert 
  variant="success" 
  heading="Succès !"
  icon={<CheckIcon />}
  dismissible
>
  Opération réussie
</Alert>
```

## 🛠️ Utilitaires de couleur

### Composants utilitaires

```tsx
import { 
  TextUtility, 
  BackgroundUtility, 
  BorderUtility,
  UtilityBox 
} from '@whitemordred/react-native-bootstrap5';

// Texte coloré
<TextUtility color="primary">Texte primary</TextUtility>
<TextUtility color="danger-emphasis">Texte danger emphasis</TextUtility>

// Fond coloré
<BackgroundUtility bg="warning-subtle">
  Fond warning subtle
</BackgroundUtility>

// Bordures
<BorderUtility border="success" rounded="lg">
  Bordure success arrondie
</BorderUtility>

// Combinaison
<UtilityBox 
  bg="primary-subtle"
  border="primary"
  p={3}
  rounded
  shadow="sm"
>
  Box utilitaire complète
</UtilityBox>
```

### Composants prédéfinis

```tsx
import { 
  TextPrimary, 
  TextDanger,
  BgSuccess,
  BgWarning 
} from '@whitemordred/react-native-bootstrap5';

<TextPrimary>Texte primary</TextPrimary>
<TextDanger>Texte danger</TextDanger>

<BgSuccess>
  <Text>Fond success</Text>
</BgSuccess>
```

## 🔧 Variables Bootstrap disponibles

### Variables de couleur

- `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
- `blue`, `indigo`, `purple`, `pink`, `red`, `orange`, `yellow`, `green`, `teal`, `cyan`
- Variantes RGB : `primary-rgb`, `secondary-rgb`, etc.
- Emphase : `primary-text-emphasis`, `primary-bg-subtle`, `primary-border-subtle`

### Variables globales

- `--bs-body-color` : Couleur du texte
- `--bs-body-bg` : Couleur de fond
- `--bs-link-color` : Couleur des liens
- `--bs-border-color` : Couleur des bordures
- `--bs-border-radius` : Rayon des bordures

### Variables de composants

- `--bs-btn-*` : Variables des boutons
- `--bs-card-*` : Variables des cards
- `--bs-modal-*` : Variables des modals
- `--bs-navbar-*` : Variables de la navbar

## 📱 Support multi-plateforme

Le système de thème fonctionne sur toutes les plateformes :

- **iOS/Android** : Utilise les styles React Native natifs
- **Web** : Utilise les variables CSS Bootstrap
- **Windows/macOS** : Support complet avec React Native for Desktop

## 🔍 Exemples avancés

### Thème GitHub

```tsx
const githubTheme = {
  colors: {
    primary: '#0969da',
    success: '#1a7f37',
    danger: '#d1242f',
    warning: '#9a6700',
    backgroundPrimary: '#ffffff',
    backgroundSecondary: '#f6f8fa'
  },
  darkColors: {
    primary: '#58a6ff',
    success: '#3fb950',
    danger: '#f85149',
    warning: '#d29922',
    backgroundPrimary: '#0d1117',
    backgroundSecondary: '#161b22'
  }
};
```

### Thème Material Design

```tsx
const materialTheme = {
  colors: {
    primary: '#1976d2',
    secondary: '#dc004e',
    success: '#388e3c',
    warning: '#f57c00',
    danger: '#d32f2f'
  },
  darkColors: {
    primary: '#90caf9',
    secondary: '#f48fb1',
    success: '#81c784',
    warning: '#ffb74d',
    danger: '#e57373'
  }
};
```

## 🤝 Contribution

Pour contribuer au système de thème, consultez [CONTRIBUTING.md](./CONTRIBUTING.md).