207 lines
6.1 KiB
Markdown
207 lines
6.1 KiB
Markdown
# Système de Thèmes
|
|
|
|
## Vue d'ensemble
|
|
|
|
L'application PersoNotes dispose d'un système de thèmes complet permettant aux utilisateurs de personnaliser l'apparence de l'interface. Six thèmes sombres professionnels sont disponibles par défaut.
|
|
|
|
## Thèmes Disponibles
|
|
|
|
### 🌙 Material Dark (défaut)
|
|
Thème professionnel inspiré de Material Design avec des accents bleus.
|
|
- Couleurs principales : Gris foncé, bleu ciel, cyan
|
|
- Parfait pour un usage quotidien professionnel
|
|
|
|
### 🎨 Monokai Dark
|
|
Palette Monokai classique populaire auprès des développeurs.
|
|
- Couleurs principales : Vert kaki, cyan cyan, vert lime
|
|
- Idéal pour ceux qui préfèrent les palettes de code
|
|
|
|
### 🧛 Dracula
|
|
Thème sombre élégant avec des accents violets et cyan.
|
|
- Couleurs principales : Violet foncé, cyan, violet pastel
|
|
- Populaire dans la communauté des développeurs
|
|
|
|
### ⚡ One Dark
|
|
Thème populaire d'Atom avec des couleurs douces.
|
|
- Couleurs principales : Gris-bleu, bleu ciel, violet
|
|
- Confortable pour de longues sessions
|
|
|
|
### ☀️ Solarized Dark
|
|
Palette scientifiquement optimisée pour réduire la fatigue oculaire.
|
|
- Couleurs principales : Bleu marine, bleu océan, cyan
|
|
- Recommandé pour réduire la fatigue visuelle
|
|
|
|
### ❄️ Nord
|
|
Palette arctique apaisante avec des tons bleus froids.
|
|
- Couleurs principales : Gris nordique, bleu glacier, bleu ciel
|
|
- Apaisant et minimaliste
|
|
|
|
### 🌸 Catppuccin
|
|
Thème pastel doux et chaleureux inspiré de Catppuccin Mocha.
|
|
- Couleurs principales : Bleu pastel, rose pastel, texte clair
|
|
- Moderne et élégant avec des accents pastels
|
|
|
|
### 🌲 Everforest
|
|
Palette naturelle inspirée de la forêt avec des tons verts et beiges.
|
|
- Couleurs principales : Vert forêt, bleu aqua, beige chaud
|
|
- Reposant pour les yeux avec des couleurs naturelles
|
|
|
|
## Utilisation
|
|
|
|
### Changer de thème
|
|
|
|
1. Cliquez sur le bouton **Paramètres** (⚙️) en bas de la sidebar
|
|
2. Une modale s'ouvre avec l'aperçu de tous les thèmes disponibles
|
|
3. Cliquez sur la carte du thème souhaité
|
|
4. Le thème s'applique instantanément
|
|
5. Votre choix est automatiquement sauvegardé
|
|
|
|
### Persistance
|
|
|
|
Le thème sélectionné est sauvegardé dans le `localStorage` du navigateur, ce qui signifie que votre préférence sera conservée :
|
|
- Entre les sessions
|
|
- Après la fermeture du navigateur
|
|
- Lors du rechargement de la page
|
|
|
|
## Architecture Technique
|
|
|
|
### Fichiers
|
|
|
|
- **`/static/themes.css`** : Définitions des variables CSS pour tous les thèmes
|
|
- **`/frontend/src/theme-manager.js`** : Gestionnaire JavaScript des thèmes
|
|
- **`/templates/index.html`** : Modale de sélection de thèmes
|
|
|
|
### Variables CSS
|
|
|
|
Chaque thème définit un ensemble de variables CSS :
|
|
|
|
```css
|
|
[data-theme="theme-name"] {
|
|
--bg-primary: #...;
|
|
--bg-secondary: #...;
|
|
--text-primary: #...;
|
|
--accent-primary: #...;
|
|
/* etc. */
|
|
}
|
|
```
|
|
|
|
### API JavaScript
|
|
|
|
```javascript
|
|
// Accès au gestionnaire de thèmes
|
|
window.themeManager
|
|
|
|
// Méthodes disponibles
|
|
themeManager.applyTheme('theme-id') // Appliquer un thème
|
|
themeManager.getCurrentTheme() // Obtenir le thème actuel
|
|
themeManager.getThemes() // Liste des thèmes disponibles
|
|
```
|
|
|
|
## Ajouter un Nouveau Thème
|
|
|
|
### 1. Définir les variables CSS dans `themes.css`
|
|
|
|
```css
|
|
[data-theme="mon-theme"] {
|
|
--bg-primary: #...;
|
|
--bg-secondary: #...;
|
|
--bg-tertiary: #...;
|
|
--bg-elevated: #...;
|
|
|
|
--border-primary: #...;
|
|
--border-secondary: #...;
|
|
|
|
--text-primary: #...;
|
|
--text-secondary: #...;
|
|
--text-muted: #...;
|
|
|
|
--accent-primary: #...;
|
|
--accent-primary-hover: #...;
|
|
--accent-secondary: #...;
|
|
--accent-secondary-hover: #...;
|
|
|
|
--success: #...;
|
|
--warning: #...;
|
|
--error: #...;
|
|
}
|
|
```
|
|
|
|
### 2. Ajouter le thème dans `theme-manager.js`
|
|
|
|
```javascript
|
|
{
|
|
id: 'mon-theme',
|
|
name: 'Mon Thème',
|
|
icon: '🎨',
|
|
description: 'Description de mon thème'
|
|
}
|
|
```
|
|
|
|
### 3. Créer la carte de prévisualisation dans `index.html`
|
|
|
|
```html
|
|
<div class="theme-card" data-theme="mon-theme" onclick="selectTheme('mon-theme')">
|
|
<div class="theme-card-header">
|
|
<span class="theme-card-icon">🎨</span>
|
|
<span class="theme-card-name">Mon Thème</span>
|
|
</div>
|
|
<div class="theme-preview">
|
|
<div class="theme-preview-color"></div>
|
|
<div class="theme-preview-color"></div>
|
|
<div class="theme-preview-color"></div>
|
|
<div class="theme-preview-color"></div>
|
|
</div>
|
|
<p class="theme-description">Description de mon thème</p>
|
|
</div>
|
|
```
|
|
|
|
### 4. Définir les couleurs de prévisualisation dans `themes.css`
|
|
|
|
```css
|
|
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(1) { background: #...; }
|
|
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(2) { background: #...; }
|
|
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(3) { background: #...; }
|
|
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(4) { background: #...; }
|
|
```
|
|
|
|
## Responsive Design
|
|
|
|
Le système de thèmes est entièrement responsive et fonctionne sur :
|
|
- Desktop
|
|
- Tablettes
|
|
- Smartphones
|
|
|
|
Sur mobile, la modale s'adapte automatiquement à la taille de l'écran.
|
|
|
|
## Accessibilité
|
|
|
|
Tous les thèmes sont conçus avec :
|
|
- Des contrastes suffisants pour la lisibilité
|
|
- Des couleurs testées pour l'accessibilité
|
|
- Une cohérence visuelle à travers l'interface
|
|
|
|
## Raccourcis Clavier
|
|
|
|
Actuellement, aucun raccourci clavier n'est implémenté pour les thèmes. Cette fonctionnalité pourrait être ajoutée dans une future version.
|
|
|
|
## Dépannage
|
|
|
|
### Le thème ne se charge pas
|
|
- Vérifiez que `themes.css` est bien chargé dans le HTML
|
|
- Vérifiez que `theme-manager.js` est chargé avant les autres scripts
|
|
- Vérifiez la console du navigateur pour les erreurs
|
|
|
|
### Le thème ne persiste pas
|
|
- Vérifiez que le `localStorage` est activé dans votre navigateur
|
|
- Vérifiez les paramètres de cookies/stockage du navigateur
|
|
|
|
### Le thème s'applique partiellement
|
|
- Rechargez la page avec Ctrl+Shift+R (cache vidé)
|
|
- Vérifiez que toutes les variables CSS sont définies
|
|
|
|
## Performance
|
|
|
|
- Le changement de thème est instantané (pas de rechargement de page)
|
|
- Les variables CSS sont natives et performantes
|
|
- Le localStorage est utilisé de manière optimale
|