# Themes

Ce répertoire gère le thème clair/sombre de l'interface. Il expose des utilitaires client pour lire, appliquer et réagir au thème, ainsi qu'un script d'initialisation à injecter dans `<head>` pour éviter le flash au chargement.

---

## Structure

```
src/core/themes/
└── index.js    THEME_INIT_SCRIPT, getStoredTheme, applyTheme, getThemeIcon, ThemeWatcher, useTheme
```

---

## Import

```js
import {
  THEME_INIT_SCRIPT,
  getStoredTheme,
  applyTheme,
  getThemeIcon,
  ThemeWatcher,
  useTheme,
} from '@zen/core/themes';
```

Tous les exports sont marqués `'use client'`.

---

## API

### `THEME_INIT_SCRIPT`

Script inline à injecter dans `<head>` avant le premier rendu. Il lit `localStorage` et applique la classe `dark` sur `<html>` immédiatement, ce qui évite le flash de thème (FOUC).

```jsx
// app/layout.js
import { THEME_INIT_SCRIPT } from '@zen/core/themes';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

---

### `getStoredTheme()`

Lit le thème enregistré dans `localStorage`. Retourne `'light'`, `'dark'` ou `'auto'`.

```js
const theme = getStoredTheme(); // 'light' | 'dark' | 'auto'
```

---

### `applyTheme(theme)`

Applique un thème en modifiant `document.documentElement` et en mettant à jour `localStorage`. En mode `'auto'`, retire la préférence stockée et suit le système.

| Valeur | Comportement |
|--------|-------------|
| `'light'` | Retire la classe `dark`, stocke `'light'` |
| `'dark'` | Ajoute la classe `dark`, stocke `'dark'` |
| `'auto'` | Retire la valeur stockée, suit `prefers-color-scheme` |

```js
applyTheme('dark');
applyTheme('auto');
```

---

### `getThemeIcon(theme, systemIsDark)`

Retourne le composant icône correspondant au thème actuel.

| Thème | `systemIsDark` | Icône retournée |
|-------|----------------|-----------------|
| `'light'` | - | `Sun01Icon` |
| `'dark'` | - | `Moon02Icon` |
| `'auto'` | `true` | `MoonCloudIcon` |
| `'auto'` | `false` | `SunCloud01Icon` |

```jsx
const Icon = getThemeIcon(theme, systemIsDark);
return <Icon />;
```

---

### `ThemeWatcher`

Composant sans rendu qui écoute les changements de `prefers-color-scheme`. Si aucune préférence n'est stockée dans `localStorage`, il met à jour la classe `dark` automatiquement quand le système change.

```jsx
// Placer une fois dans le layout racine, après THEME_INIT_SCRIPT.
import { ThemeWatcher } from '@zen/core/themes';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeWatcher />
        {children}
      </body>
    </html>
  );
}
```

---

### `useTheme()`

Hook qui expose le thème actuel et une fonction de basculement cyclique. Synchronise l'état avec `localStorage` et le système au montage.

Retourne `{ theme, toggle, systemIsDark }`.

| Propriété | Type | Description |
|-----------|------|-------------|
| `theme` | `'light' \| 'dark' \| 'auto'` | Thème actif |
| `toggle` | `() => void` | Passe au thème suivant dans le cycle |
| `systemIsDark` | `boolean` | Indique si le système est en mode sombre |

Le cycle de basculement dépend de la préférence système :
- Système clair : `auto` -> `dark` -> `light` -> `auto`
- Système sombre : `auto` -> `light` -> `dark` -> `auto`

```jsx
import { useTheme, getThemeIcon } from '@zen/core/themes';

export function ThemeToggle() {
  const { theme, toggle, systemIsDark } = useTheme();
  const Icon = getThemeIcon(theme, systemIsDark);

  return (
    <button onClick={toggle}>
      <Icon />
    </button>
  );
}
```
