# Thèmes et personnalisation

Pena permet de modifier entièrement l'apparence du rendu, via deux mécanismes
complémentaires : les **thèmes rapides** (prêts à l'emploi) et l'**éditeur CSS** (sur mesure).
Tout se passe dans la **modale « Personnaliser CSS »**, ouverte depuis la barre latérale.

## Thèmes rapides

Six thèmes sont fournis et gérés par le backend. Chacun est un fichier CSS intégré à
l'application.

| Identifiant | Libellé affiché |
|---|---|
| `default` | Défaut |
| `dark` | Mode sombre |
| `sepia` | Sépia |
| `large-text` | Grand texte |
| `emerald` | Accent émeraude |
| `shell-indigo` | Shell Indigo |

### Utilisation
- Les thèmes apparaissent sous forme de **badges cliquables** dans la modale.
- Un clic applique le thème **immédiatement**.
- Le badge du thème actif est mis en évidence.
- Cliquer à nouveau sur le thème actif le **désactive** (retour au rendu de base).
- Le thème choisi est mémorisé (localStorage, clé `pena_quick_theme`) et réappliqué au
  prochain démarrage.

## Éditeur CSS personnalisé

Pour aller plus loin qu'un thème, la modale propose un éditeur de CSS libre, organisé en
**4 onglets** thématiques. Chaque onglet conserve son propre CSS, indépendamment des autres :

| Onglet | Vocation |
|---|---|
| Arrière-scène | Styles généraux / d'ambiance |
| Police | Typographie |
| Contenu fond | Mise en forme du contenu |
| Développement | Réglages avancés / divers |

### Fonctionnement
- On écrit du **CSS standard** dans la zone de texte de l'onglet sélectionné.
- Le bouton **« ★ Enregistrer »** sauvegarde le CSS courant et l'applique aussitôt.
- Le bouton **« Réinitialiser »** efface **tout** le CSS personnalisé **et** désactive le
  thème rapide actif.
- Le bouton **« Fermer »** ferme la modale sans enregistrer les changements en cours.
- Un champ permet de nommer la configuration.

### Application combinée
Le CSS finalement appliqué est la **concaténation** du CSS des 4 onglets, suivi du CSS du
thème rapide actif. L'ordre de cascade est donc :

1. CSS de base de l'application (`style.css`) ;
2. CSS personnalisé (les 4 onglets, concaténés) ;
3. CSS du thème rapide actif (s'il y en a un).

Ainsi, un thème rapide peut compléter un CSS personnalisé, et le CSS personnalisé peut
surcharger le rendu de base.

## Persistance des préférences

Toutes les préférences sont stockées localement (localStorage) et restaurées à chaque
ouverture :

| Donnée | Clé localStorage |
|---|---|
| Thème rapide actif | `pena_quick_theme` |
| CSS onglet « Arrière-scène » | `pena_css_general` |
| CSS onglet « Police » | `pena_css_police` |
| CSS onglet « Contenu fond » | `pena_css_contenu` |
| CSS onglet « Développement » | `pena_css_avance` |

> Ces données sont propres à la machine et à l'installation : elles ne sont pas synchronisées
> et ne quittent jamais l'ordinateur.

## Voir aussi

- [Interface](1.3-Interface.md)
- [Fonctionnalités](1.2-Fonctionnalites.md)
- [Commandes Tauri — Thèmes](../2-technique/2.2-Commandes-Tauri.md#thèmes)