81 lines
3.0 KiB
Markdown
81 lines
3.0 KiB
Markdown
# 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)
|