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 :

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é :

/* 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

<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()

// 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

/**
 * 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() :

_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.