hykocx/octo-firefox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hykocx
2026-09-16 14:36:28 -04:00
parent 2ae11e4118
commit e55df99068
5 changed files with 312 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
thunderbird/icons
Symlink
+1
View File
@@ -0,0 +1 @@
../icons
thunderbird/manifest.json
+97
View File
@@ -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
+185
View File
@@ -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;
}