personotes/docs/THEMES.md

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 :

[data-theme="theme-name"] {
    --bg-primary: #...;
    --bg-secondary: #...;
    --text-primary: #...;
    --accent-primary: #...;
    /* etc. */
}

API 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

[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

{
    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

<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

.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