---
name: project-chart-colors
description: "Couleurs personnalisables des graphiques — UiContext, Settings Apparence, palette MD2, variante Reçu/Projeté"
metadata: 
  node_type: memory
  type: project
  originSessionId: d7532bd8-8eb4-4b40-8c39-8f569dcf432f
---

Fonctionnalité de personnalisation des couleurs des graphiques ajoutée dans Settings > Apparence.

**Fichiers modifiés :** `frontend/src/context/UiContext.jsx`, `frontend/src/pages/Settings.jsx`, `frontend/src/styles.css`

## UiContext
3 nouvelles clés localStorage et états :
- `cl_chart_interets` → `chartInterets` / `setChartInterets` — défaut `#2196f3` (Bleu 500)
- `cl_chart_capital` → `chartCapital` / `setChartCapital` — défaut `#4caf50` (Vert 500)
- `cl_chart_cashback` → `chartCashback` / `setChartCashback` — défaut `#ffc107` (Ambre 500)

Tous exposés dans `useUi()`.

## Settings.jsx — composants ajoutés
- `lightenColor(hex, factor=0.72)` — mélange avec blanc, utilisé pour la variante "Projeté"
- `MD_PALETTE` — palette Material Design 2 complète (19 familles × shades 50→900 + accents A100/A200/A400/A700)
- `isLightColor(hex)` — détecte si une couleur est claire (pour adapter la couleur du texte)
- `findInPalette(hex)` — retrouve `{ family, shade }` d'un hex dans MD_PALETTE
- `SUGGESTED_PALETTES` — 10 palettes prédéfinies (Classique, Indigo & Teal, Nuit, Nature, Coucher de soleil, Violet, Frais, Contraste, Pastel, Moderne)
- `PaletteSelector` — grille 5×2 de cartes avec 3 pastilles colorées ; sélection applique les 3 couleurs
- `ChartColorPicker` — sélecteur en 2 étapes : (1) `<select>` famille + indicateur couleur, (2) grille de teintes ; useEffect synchro famille quand value change depuis l'extérieur
- Icônes SVG inline : `IconInterets`, `IconCapital`, `IconCashback` (taille 22px, fill="currentColor")

## Preview Reçu / Projeté
Chaque picker affiche deux barres :
- **Reçu** — couleur sélectionnée (pleine)
- **Projeté** — version éclaircie à 72% (`lightenColor`)

## CSS (styles.css)
Classes ajoutées : `.chart-color-row`, `.chart-color-item`, `.chart-color-picker`, `.color-family-select-row`, `.color-family-indicator`, `.color-shade-grid`, `.color-shade-btn`, `.color-shade-label`, `.color-preview-pair`, `.color-preview-bar`, `.color-preview-label`, `.color-preview-hex`, `.palette-grid`, `.palette-card`, `.palette-swatches`, `.palette-swatch`, `.palette-name`

**Attention CSS :** `.palette-swatch` et `.color-shade-label` sont des `<span>` — ils nécessitent `display: block` pour que width/height et opacity fonctionnent correctement.

## Prochaine étape
Brancher `chartInterets`, `chartCapital`, `chartCashback` (via `useUi()`) et `lightenColor` dans les composants de graphiques : `InteretsChart.jsx`, `InteretsMensuelsChart.jsx`, `SoldeChart.jsx`, `InteretsDistributionChart.jsx`.
**Why:** L'utilisateur veut que les couleurs choisies dans Settings s'appliquent effectivement aux graphiques.
**How to apply:** Importer `useUi`, déstructurer les 3 couleurs, remplacer les constantes couleur hardcodées par les valeurs dynamiques. Utiliser `lightenColor` importé ou redéfini localement pour les séries projetées.
