3.0 KiB
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 :
- CSS de base de l'application (
style.css) ; - CSS personnalisé (les 4 onglets, concaténés) ;
- 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.