docs: documentation fonctionnelle, technique et installation

2026-07-05 10:58:29 +02:00
parent 61fb56fa14
commit 64c53f412d
12 changed files with 1452 additions and 0 deletions
@@ -0,0 +1,80 @@
+# 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)