feat(thunderbird): add support for Octo theme in Thunderbird

README.md

@@ -1,6 +1,6 @@
 # Octo Firefox
 
-Thème Firefox épuré avec basculement automatique clair/foncé.
+Thème Firefox et Thunderbird épuré avec basculement automatique clair/foncé.
 
 ![Thème clair](assets/preview.svg)
 ![Thème dark](assets/preview-dark.svg)
@@ -9,22 +9,34 @@ Thème Firefox épuré avec basculement automatique clair/foncé.
 
 Ce thème applique une palette monochrome à l'interface de Firefox, barres d'outils, onglets, popups et sidebar. Le thème s'adapte automatiquement au mode système : clair le jour, foncé la nuit.
 
+Dans Thunderbird, il couvre aussi le courrier, le calendrier, le volet Aujourd'hui, le carnet d'adresses et la fenêtre de rédaction, avec un accent bleu pour la sélection et les boutons principaux. Le contenu HTML des courriels garde ses propres couleurs.
+
 ## Installation
 
 ### Depuis Firefox Add-ons
 
 Installe directement depuis [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/octo-theme/).
 
+### Thunderbird
+
+Installe `octo-theme-thunderbird.xpi` depuis [addons.thunderbird.net](https://addons.thunderbird.net), ou depuis le fichier : Modules complémentaires et thèmes → roue dentée → Installer un module depuis un fichier.
+
 ## Développement
 
+Firefox refuse les thèmes qui utilisent `theme_experiment`, nécessaire pour Thunderbird. Chaque application a donc son propre manifest :
+
+- `manifest.json` : Firefox
+- `thunderbird/manifest.json` et `thunderbird/octo.css` : Thunderbird
+
 ```bash
 # Charger le thème temporairement pour le tester
-# Dans Firefox, ouvre about:debugging → Ce Firefox → Charger un module temporaire
+# Firefox : about:debugging → Ce Firefox → Charger un module temporaire → manifest.json
-# Sélectionne le fichier manifest.json
+# Thunderbird : Modules complémentaires et thèmes → roue dentée → Déboguer des modules
+#               → Charger un module temporaire → thunderbird/manifest.json
 ```
 
-Pour générer le `.xpi` (archive ZIP renommée) :
+Pour générer les `.xpi` (archives ZIP renommées) :
 
 ```bash
-zip -r octo-theme.xpi manifest.json icons/
+./build.sh
 ```

build.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+# Génère les paquets Firefox et Thunderbird.
+# Firefox refuse "theme_experiment", d'où deux manifests distincts.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+rm -f octo-theme-firefox.xpi octo-theme-thunderbird.xpi
+
+zip -r octo-theme-firefox.xpi manifest.json icons/
+
+(cd thunderbird && zip -r ../octo-theme-thunderbird.xpi manifest.json octo.css)
+zip -r octo-theme-thunderbird.xpi icons/

thunderbird/icons

@@ -0,0 +1 @@
+../icons

thunderbird/manifest.json

@@ -0,0 +1,97 @@
+{
+  "manifest_version": 2,
+  "name": "Octo Theme",
+  "version": "1.0.1",
+  "description": "Thème Thunderbird épuré avec basculement automatique clair/foncé.",
+  "author": "Hyko",
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "octo-theme@hyko",
+      "strict_min_version": "128.0",
+      "strict_max_version": "160.*"
+    }
+  },
+
+  "icons": {
+    "48": "icons/icon.svg"
+  },
+
+  "theme_experiment": {
+    "stylesheet": "octo.css"
+  },
+
+  "theme": {
+    "colors": {
+      "frame":                      "#e0e0e0",
+      "tab_selected":               "#ffffff",
+      "tab_background_text":        "#666666",
+      "tab_background_separator":   "#cccccc",
+      "tab_text":                   "#1a1a1a",
+      "tab_line":                   "#ffffff",
+      "toolbar":                    "#f5f5f5",
+      "toolbar_text":               "#1a1a1a",
+      "toolbar_top_separator":      "#cccccc",
+      "toolbar_bottom_separator":   "#cccccc",
+      "toolbar_vertical_separator": "#cccccc",
+      "toolbar_field":              "#ffffff",
+      "toolbar_field_text":         "#1a1a1a",
+      "toolbar_field_border":       "#cccccc",
+      "toolbar_field_focus":        "#ffffff",
+      "toolbar_field_text_focus":   "#1a1a1a",
+      "toolbar_field_border_focus": "#2188ff",
+      "icons":                      "#555555",
+      "icons_attention":            "#333333",
+      "button_background_hover":    "#e8e8e8",
+      "button_background_active":   "#d0d0d0",
+      "popup":                      "#ffffff",
+      "popup_text":                 "#1a1a1a",
+      "popup_border":               "#cccccc",
+      "popup_highlight":            "#e8e8e8",
+      "popup_highlight_text":       "#1a1a1a",
+      "sidebar":                    "#f5f5f5",
+      "sidebar_text":               "#1a1a1a",
+      "sidebar_border":             "#cccccc",
+      "sidebar_highlight":          "#2188ff",
+      "sidebar_highlight_text":     "#ffffff",
+      "sidebar_highlight_border":   "#2188ff"
+    }
+  },
+
+  "dark_theme": {
+    "colors": {
+      "frame":                      "#000000",
+      "tab_selected":               "#1a1a1a",
+      "tab_background_text":        "#888888",
+      "tab_background_separator":   "#252525",
+      "tab_text":                   "#e6e6e6",
+      "tab_line":                   "#000000",
+      "toolbar":                    "#111111",
+      "toolbar_text":               "#cccccc",
+      "toolbar_top_separator":      "#252525",
+      "toolbar_bottom_separator":   "#252525",
+      "toolbar_vertical_separator": "#252525",
+      "toolbar_field":              "#000000",
+      "toolbar_field_text":         "#e6e6e6",
+      "toolbar_field_border":       "#252525",
+      "toolbar_field_focus":        "#000000",
+      "toolbar_field_text_focus":   "#e6e6e6",
+      "toolbar_field_border_focus": "#1f6feb",
+      "icons":                      "#999999",
+      "icons_attention":            "#cccccc",
+      "button_background_hover":    "#252525",
+      "button_background_active":   "#333333",
+      "popup":                      "#1a1a1a",
+      "popup_text":                 "#e6e6e6",
+      "popup_border":               "#333333",
+      "popup_highlight":            "#2a2a2a",
+      "popup_highlight_text":       "#e6e6e6",
+      "sidebar":                    "#111111",
+      "sidebar_text":               "#cccccc",
+      "sidebar_border":             "#252525",
+      "sidebar_highlight":          "#1f6feb",
+      "sidebar_highlight_text":     "#ffffff",
+      "sidebar_highlight_border":   "#1f6feb"
+    }
+  }
+}

thunderbird/octo.css

@@ -0,0 +1,185 @@
+/* Octo Theme pour Thunderbird.
+ * Injectée par theme_experiment dans chaque fenêtre qui accepte les thèmes.
+ * light-dark() suit le basculement entre "theme" et "dark_theme". */
+
+:root:root {
+  /* Échelle de gris neutre, sans la teinte bleutée d'origine */
+  --color-gray-05: #f5f5f5;
+  --color-gray-10: #f0f0f0;
+  --color-gray-20: #e0e0e0;
+  --color-gray-30: #cccccc;
+  --color-gray-40: #999999;
+  --color-gray-50: #666666;
+  --color-gray-60: #333333;
+  --color-gray-70: #252525;
+  --color-gray-80: #1a1a1a;
+  --color-gray-90: #111111;
+
+  /* Les tons "ink" sont violets : on les ramène à des gris neutres */
+  --color-ink-10: #f5f5f5;
+  --color-ink-20: #e8e8e8;
+  --color-ink-30: #cccccc;
+  --color-ink-40: #999999;
+  --color-ink-50: #666666;
+  --color-ink-60: #333333;
+  --color-ink-70: #252525;
+  --color-ink-80: #1a1a1a;
+  --color-ink-90: #111111;
+
+  /* Mise en page : les volets centraux et le contenu partagent le même fond */
+  --layout-background-0: light-dark(#ffffff, #000000);
+  --layout-background-1: light-dark(#ffffff, #000000);
+  --layout-background-2: light-dark(#f5f5f5, #111111);
+  --layout-background-3: light-dark(#e8e8e8, #1a1a1a);
+  --layout-background-4: light-dark(#d0d0d0, #252525);
+
+  --layout-color-0: light-dark(#000000, #ffffff);
+  --layout-color-1: light-dark(#1a1a1a, #e6e6e6);
+  --layout-color-2: light-dark(#555555, #999999);
+  --layout-color-3: light-dark(#888888, #666666);
+
+  --layout-border-0: light-dark(#e0e0e0, #1a1a1a);
+  --layout-border-1: light-dark(#cccccc, #252525);
+  --layout-border-2: light-dark(#999999, #333333);
+
+  /* Accent bleu (Octo VS Code) */
+  --link-color: light-dark(#0366d6, #58a6ff);
+  --link-color-hover: var(--link-color);
+  --link-color-active: var(--link-color);
+  --link-color-visited: var(--link-color);
+  --button-link-text-color: var(--link-color);
+  --button-link-active-text-color: var(--link-color);
+  --new-folder-color: var(--link-color);
+
+  /* Boutons et arrondis */
+  --button-border-radius: 4px;
+  --listbox-border-radius: 4px;
+  --button-border-color: light-dark(#d0d0d0, #252525);
+  --button-hover-background-color: light-dark(#d0d0d0, #252525);
+  --button-active-background-color: light-dark(#c0c0c0, #333333);
+
+  /* Liste des dossiers : sélection par le fond, sans cadre */
+  --list-container-border-selected: transparent;
+  --list-container-border-selected-current: transparent;
+  --list-container-border-hover: transparent;
+  --list-container-border-selected-focused: transparent;
+  --list-container-border-selected-current-focused: transparent;
+  --list-container-background-selected: light-dark(#e8e8e8, #1a1a1a);
+  --list-container-background-selected-current: light-dark(#e8e8e8, #1a1a1a);
+  --list-container-background-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+  --list-container-background-selected-focused: color-mix(in srgb, var(--selected-item-color) 15%, transparent);
+  --list-container-background-selected-current-focused: color-mix(in srgb, var(--selected-item-color) 25%, transparent);
+
+  /* Liste des messages : cartes sans cadre */
+  --tree-view-bg: var(--layout-background-0);
+  --tree-card-border: transparent;
+  --tree-card-border-hover: transparent;
+  --tree-card-border-focus: transparent;
+  --tree-card-border-selected: transparent;
+  --tree-card-border-selected-unfocused: transparent;
+
+  /* Calendrier */
+  --viewBackground: var(--layout-background-0);
+  --viewCalendarHeaderBackground: transparent;
+  --viewTodayBackground: var(--viewBackground);
+  --viewTodayOffBackground: var(--viewOffTimeBackground);
+  --viewWeekendBackground: light-dark(#fafafa, #0a0a0a);
+  --viewTodayWeekendBackground: var(--viewWeekendBackground);
+  --viewMonthOtherBackground: light-dark(#fafafa, #0a0a0a);
+  --viewMonthDayOtherBackground: light-dark(#fafafa, #0a0a0a);
+  --viewOffTimeBackground: light-dark(#fafafa, #0a0a0a);
+  --viewMonthDayOffLabelBackground: var(--viewWeekendBackground);
+  --viewMonthWeekLabelBackground: light-dark(#e8e8e8, #1a1a1a);
+  --viewDayBoxSelectedBackground: color-mix(in srgb, var(--selected-item-color) 10%, var(--viewBackground));
+  --viewDayBoxOffSelectedBackground: var(--viewDayBoxSelectedBackground);
+  --viewDayBoxOtherSelectedBackground: var(--viewDayBoxSelectedBackground);
+  --viewHeaderSelectedBackground: color-mix(in srgb, var(--selected-item-color) 10%, var(--viewBackground));
+  --viewDayLabelSelectedBackground: var(--selected-item-color);
+  --viewDragboxBackground: var(--selected-item-color);
+  --viewDropshadowBackground: var(--selected-item-color);
+
+  --calendar-view-toggle-background: var(--layout-background-3);
+  --calendar-view-toggle-hover-background: var(--layout-background-4);
+  --calendar-view-toggle-active-background: var(--layout-background-4);
+  --calendar-view-toggle-selected-background: var(--layout-background-0);
+  --calendar-view-toggle-selected-hover-background: var(--layout-background-2);
+}
+
+/* Séparateur fin entre les messages en vue cartes */
+:root:root [is="tree-view-table-body"] > .card-layout > td {
+  box-shadow: inset 0 -1px 0 var(--layout-border-0);
+}
+
+/* Liste des calendriers : sélection discrète, pleine couleur seulement au focus */
+:root:root #calendar-list > li.selected {
+  border-color: transparent;
+  background: light-dark(#e8e8e8, #1a1a1a);
+  color: inherit;
+}
+
+:root:root #calendar-list:focus-within > li.selected {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--selected-item-color) 25%, transparent);
+  color: inherit;
+}
+
+/* Mini-calendrier : sélecteur renforcé pour passer devant la variante lwt-tree */
+:root:root:root calendar-minimonth {
+  --mmMainBackground: transparent;
+  --mmMainBorderColor: transparent;
+  --mmMainBorderRadius: 4px;
+  --mmBoxBackground: light-dark(#e8e8e8, #1a1a1a);
+  --mmBoxBorderColor: transparent;
+  --mmBoxItemColor: light-dark(#d0d0d0, #252525);
+  --mmDayColor: var(--layout-color-1);
+  --mmDayOtherColor: var(--layout-color-3);
+  --mmDayWeekColor: var(--layout-color-3);
+  --mmDayTodayColor: var(--layout-color-0);
+  --mmDayTodayBackground: light-dark(#e8e8e8, #1a1a1a);
+  --mmDaySelectedBackground: color-mix(in srgb, var(--selected-item-color) 20%, transparent);
+  --mmDaySelectedBorderColor: color-mix(in srgb, var(--selected-item-color) 60%, transparent);
+  --mmDaySelectedTodayBackground: color-mix(in srgb, var(--selected-item-color) 20%, transparent);
+  --mmDayBorderRadius: 4px;
+}
+
+/* Barre d'onglets façon Firefox : fond = frame, onglets arrondis flottants */
+:root:root {
+  --tabs-toolbar-background-color: transparent;
+  --tabs-toolbar-box-shadow: none;
+}
+
+:root:root #tabs-toolbar {
+  background-image: none;
+  padding-block: 0;
+  padding-inline: 4px;
+}
+
+:root:root .tabmail-tab {
+  margin-block: 4px;
+  margin-inline-end: 4px;
+  border-radius: 4px;
+
+  &[selected] {
+    box-shadow: 0 0 4px light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.6));
+  }
+
+  & .tab-background {
+    border-radius: 4px;
+  }
+
+  & .tab-line {
+    display: none;
+  }
+
+  &:hover .tab-background:not([selected]) {
+    background-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+  }
+}
+
+/* Menus et panneaux : variables définies sur les popups, pas sur :root */
+:root:root :is(menupopup, panel):not(.autoscroller) {
+  --panel-background-color: light-dark(#ffffff, #1a1a1a);
+  --panel-text-color: light-dark(#1a1a1a, #e6e6e6);
+  --panel-border-color: light-dark(#cccccc, #333333);
+  --panel-border-radius: 6px;
+}