Des tonnes de modifications notamment VIM / Couleurs / typos
This commit is contained in:
206
docs/THEMES.md
Normal file
206
docs/THEMES.md
Normal file
@ -0,0 +1,206 @@
|
||||
# Système de Thèmes
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
L'application Project Notes 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
|
||||
Reference in New Issue
Block a user