# 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