gnome-asus-kbd-rgb/docs/ANALYSE_THEME_GNOME.md

# Analyse - Synchronisation Couleur Clavier ↔ Thème GNOME

## 📋 Demande Utilisateur

**Objectif** : Ajouter une option (case à cocher) pour appliquer la couleur sélectionnée du clavier RGB au thème actuel de GNOME (couleur de sélection/accent).

---

## 🔍 Analyse Technique

### 1. Système de Couleurs GNOME

**GNOME 42+** utilise un système de couleurs d'accent :
- **Localisation** : `org.gnome.desktop.interface` → `accent-color`
- **Valeurs possibles** :
  - `blue` (défaut)
  - `teal`
  - `green`
  - `yellow`
  - `orange`
  - `red`
  - `pink`
  - `purple`
  - `slate`

**Limitation** : GNOME utilise des couleurs **prédéfinies** (9 choix), pas de RGB personnalisé libre.

### 2. GTK4 libadwaita

**Couleurs d'accent libadwaita** :
- Utilisées dans les applications modernes (GNOME Files, Settings, etc.)
- Définies dans `~/.config/gtk-4.0/gtk.css` ou via GSettings
- Support de couleurs custom via CSS

---

## 🎯 Solutions Proposées

### Solution A : Mapping RGB → Couleur Accent GNOME (Recommandée) ⭐

**Principe** :
1. Détecter la couleur RGB sélectionnée sur le clavier
2. Calculer la couleur accent GNOME la plus proche (parmi les 9)
3. Appliquer via GSettings : `gsettings set org.gnome.desktop.interface accent-color 'red'`

**Avantages** :
- ✅ Intégration native GNOME
- ✅ Fonctionne avec toutes les apps modernes
- ✅ Pas de fichiers CSS à gérer
- ✅ Simple et stable

**Inconvénients** :
- ⚠️ Limitation à 9 couleurs (approximation nécessaire)
- ⚠️ Pas de correspondance exacte RGB

**Algorithme de mapping** :
```javascript
function rgbToGnomeAccent(r, g, b) {
    const colors = {
        blue:   { r: 53,  g: 132, b: 228 },
        teal:   { r: 51,  g: 209, b: 122 },
        green:  { r: 51,  g: 209, b: 122 },
        yellow: { r: 246, g: 211, b: 45  },
        orange: { r: 255, g: 120, b: 0   },
        red:    { r: 237, g: 51,  b: 59  },
        pink:   { r: 246, g: 97,  b: 81  },
        purple: { r: 145, g: 65,  b: 172 },
        slate:  { r: 119, g: 118, b: 123 }
    };

    // Calculer la distance euclidienne pour chaque couleur
    let minDistance = Infinity;
    let closestColor = 'blue';

    for (const [name, color] of Object.entries(colors)) {
        const distance = Math.sqrt(
            Math.pow(r - color.r, 2) +
            Math.pow(g - color.g, 2) +
            Math.pow(b - color.b, 2)
        );
        if (distance < minDistance) {
            minDistance = distance;
            closestColor = name;
        }
    }

    return closestColor;
}
```

---

### Solution B : CSS Custom pour GTK4 (Couleur Exacte)

**Principe** :
1. Écrire un fichier `~/.config/gtk-4.0/gtk.css` avec la couleur RGB exacte
2. Redéfinir la variable `@accent_color` de libadwaita

**Fichier généré** :
```css
/* Généré par ASUS Keyboard RGB Extension */
@define-color accent_bg_color rgb(255, 165, 0);
@define-color accent_fg_color rgb(255, 255, 255);
@define-color accent_color rgb(255, 165, 0);
```

**Avantages** :
- ✅ Couleur RGB exacte (pas d'approximation)
- ✅ Personnalisation totale

**Inconvénients** :
- ⚠️ Modification de fichiers système
- ⚠️ Peut casser avec mises à jour GNOME
- ⚠️ Nécessite redémarrage apps GTK4
- ⚠️ Complexité maintenance

---

### Solution C : Hybride (A + B)

**Principe** :
1. **Par défaut** : Solution A (GSettings accent-color)
2. **Option avancée** : Solution B (CSS custom)

**Interface** :
```
┌─────────────────────────────────────┐
│ ☑ Synchroniser avec le thème GNOME │
│                                     │
│ Mode synchronisation :              │
│ ○ Couleurs prédéfinies (9 choix)   │  ← Solution A
│ ○ Couleur exacte (avancé)          │  ← Solution B
└─────────────────────────────────────┘
```

---

## 🎨 Implémentation Recommandée : Solution A

### Étape 1 : Ajouter GSettings

**Fichier** : `extension/schemas/org.gnome.shell.extensions.asuskbdrgb.gschema.xml`

```xml
<key name="sync-gnome-theme" type="b">
  <default>false</default>
  <summary>Synchroniser avec le thème GNOME</summary>
  <description>Applique la couleur du clavier comme accent GNOME</description>
</key>
```

### Étape 2 : Ajouter UI (Case à cocher)

**Fichier** : `extension/ui.js` dans `_buildUI()`

```javascript
// Après les presets
const syncThemeItem = new PopupMenu.PopupSwitchMenuItem(
    'Synchroniser thème GNOME',
    this._settings.get_boolean('sync-gnome-theme')
);

syncThemeItem.connect('toggled', (item) => {
    this._settings.set_boolean('sync-gnome-theme', item.state);
    if (item.state) {
        this._syncGnomeTheme();
    }
});

this.menu.addMenuItem(syncThemeItem);
```

### Étape 3 : Fonction de synchronisation

**Fichier** : `extension/ui.js`

```javascript
/**
 * Synchronise la couleur du clavier avec le thème GNOME
 */
_syncGnomeTheme() {
    if (!this._settings.get_boolean('sync-gnome-theme')) return;

    const accent = this._rgbToGnomeAccent(
        this._currentR,
        this._currentG,
        this._currentB
    );

    try {
        const interfaceSettings = new Gio.Settings({
            schema: 'org.gnome.desktop.interface'
        });
        interfaceSettings.set_string('accent-color', accent);

        log(`[ASUS RGB] Thème GNOME mis à jour : ${accent}`);
    } catch (error) {
        log(`[ASUS RGB] Erreur sync thème : ${error}`);
    }
}

/**
 * Trouve la couleur accent GNOME la plus proche
 */
_rgbToGnomeAccent(r, g, b) {
    const colors = {
        blue:   { r: 53,  g: 132, b: 228 },
        teal:   { r: 51,  g: 209, b: 122 },
        green:  { r: 51,  g: 209, b: 122 },
        yellow: { r: 246, g: 211, b: 45  },
        orange: { r: 255, g: 120, b: 0   },
        red:    { r: 237, g: 51,  b: 59  },
        pink:   { r: 246, g: 97,  b: 81  },
        purple: { r: 145, g: 65,  b: 172 },
        slate:  { r: 119, g: 118, b: 123 }
    };

    let minDistance = Infinity;
    let closestColor = 'blue';

    for (const [name, color] of Object.entries(colors)) {
        const distance = Math.sqrt(
            Math.pow(r - color.r, 2) +
            Math.pow(g - color.g, 2) +
            Math.pow(b - color.b, 2)
        );
        if (distance < minDistance) {
            minDistance = distance;
            closestColor = name;
        }
    }

    return closestColor;
}
```

### Étape 4 : Appeler lors des changements

**Dans `_onRGBChanged()`** :
```javascript
_onRGBChanged() {
    this._updateColorPreview();

    Backend.writeRGBDebounced(
        this._currentR,
        this._currentG,
        this._currentB,
        this._currentMasterGain,
        () => this._updateInfoLine()
    );

    // Synchroniser avec GNOME si activé
    this._syncGnomeTheme();  // ← Ajouter cette ligne
}
```

---

## 📊 Comparaison Solutions

| Critère | Solution A (GSettings) | Solution B (CSS) | Solution C (Hybride) |
|---------|------------------------|------------------|----------------------|
| **Simplicité** | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| **Précision couleur** | ⭐⭐⭐ (9 choix) | ⭐⭐⭐⭐⭐ (exact) | ⭐⭐⭐⭐⭐ |
| **Stabilité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| **Compatibilité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| **Temps dev** | 30 min | 2h | 3h |
| **Risque** | Aucun | Moyen | Faible |

---

## 🎯 Recommandation Finale

### **Solution A - GSettings Accent Color** 🏆

**Pourquoi** :
1. ✅ **Simple et rapide** à implémenter (30 minutes)
2. ✅ **100% natif GNOME** (pas de hack CSS)
3. ✅ **Stable** et compatible avec futures versions
4. ✅ **Suffisant** pour la plupart des cas (9 couleurs couvrent bien le spectre)

**Exemple de résultat** :
```
Clavier RGB:       (255, 165, 0)  → Orange vif
Couleur GNOME:     'orange'       → Orange GNOME standard
Rendu applications: 🟠 Boutons, sélections, accents
```

**Temps d'implémentation** : 30 minutes
- 5 min : Ajouter GSettings
- 10 min : Ajouter UI (checkbox)
- 10 min : Fonction `_rgbToGnomeAccent()`
- 5 min : Intégration dans `_onRGBChanged()`

---

## 🚀 Prochaine Étape

**Voulez-vous que j'implémente la Solution A maintenant ?**

Cela ajoutera :
- ☑ Case "Synchroniser thème GNOME" dans le menu
- 🎨 Application automatique de la couleur accent la plus proche
- 🔄 Mise à jour en temps réel lors des changements de couleur clavier

**Note** : Si vous souhaitez la couleur RGB exacte (Solution B), je peux aussi l'implémenter, mais c'est plus risqué et complexe.