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

docs(readme): add preview images and update installation instructions

Browse Source
This commit is contained in:
Hyko
2026-04-24 07:54:12 -04:00
parent 863b19c335
commit 172ca32b55
4 changed files with 109 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+8 -5
View File
@@ -1,16 +1,19 @@
# Octo Firefox
Thème Firefox monochrome épuré avec basculement automatique clair/foncé.
Thème Firefox épuré avec basculement automatique clair/foncé.
![Thème clair](assets/preview.svg)
![Thème dark](assets/preview-dark.svg)
## Ce que ça fait
Ce thème applique une palette strictement 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.
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.
## Installation
1. Télécharge le fichier `.xpi` depuis les [releases](../../releases).
2. Dans Firefox, ouvre `about:addons`.
3. Clique sur l'icône ⚙️ → **Installer un module depuis un fichier...** et sélectionne le fichier téléchargé.
### Depuis Firefox Add-ons
Installe directement depuis [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/octo-theme/).
## Développement
assets/preview-dark.svg
+48
View File
@@ -0,0 +1,48 @@
<svg id="preview-svg-root" width="720" height="92" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.com/svgjs" font-size="16px" font-family="Helvetica, Arial, sans-serif">
<defs>
</defs>
<g transform="scale(1)">
<rect width="720" height="92"
class="frame fill" fill="#000000" data-fill="rgba(0,0,0,1)"></rect>
<rect class="toolbar fill" fill="#111111"
width="720" height="48" y="44"
data-fill="rgba(17,17,17,1)"/>
<rect id="svg-selected-tab" class="tab_selected toolbar fill" fill="#111111"
width="166" height="34" x="28" y="5" rx="4"
data-fill="rgba(17,17,17,1)" stroke="transparent" stroke-width="1.5"/>
<rect class="tab_line stroke" stroke="#000000"
width="166" height="34" x="28" y="5" rx="4"
fill="transparent" data-stroke="rgba(0,0,0,1)" stroke-width="1.5"/>
<rect class="bookmark_text fill" fill="#e6e6e6"
width="121" height="4" x="51" y="20" rx="2"
data-fallback="tab_background_text" />
<rect class="tab_background_text fill" fill="#888888"
width="121" height="4" x="221" y="20" rx="2" />
<rect id="svg-url-field" class="toolbar_field fill" fill="#000000"
width="528" height="32" x="114" y="52" rx="4"
data-fill="rgba(0,0,0,1)"/>
<rect id="svg-url-field-text" class="toolbar_field_text fill" fill="#e6e6e6"
width="342" height="4" x="146" y="66" rx="2.2"/>
<circle class="toolbar_field_text stroke" stroke="#e6e6e6"
cx="130" cy="68" r="6.25"
data-stroke="rgba(230,230,230,1)" stroke-width="1.5" fill="transparent"/>
<circle class="bookmark_text stroke" stroke="#999999"
cx="24" cy="68" r="6.25"
data-stroke="rgba(153,153,153,1)" data-fallback="tab_background_text" stroke-width="1.5" fill="transparent" />
<circle class="bookmark_text stroke" stroke="#999999"
cx="60" cy="68" r="6.25"
data-stroke="rgba(153,153,153,1)" data-fallback="tab_background_text" stroke-width="1.5" fill="transparent" />
<g transform="translate(689 61.75)"
class="bookmark_text fill" fill="#999999"
data-fallback="tab_background_text">
<rect width="14" height="1.5" rx="1.333"/>
<rect width="14" height="1.5" y="6" rx="1.333"/>
<rect width="14" height="1.5" y="12" rx="1.333"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

assets/preview.svg
+51
View File
@@ -0,0 +1,51 @@
<svg id="preview-svg-root" width="720" height="92" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.com/svgjs" font-size="16px" font-family="Helvetica, Arial, sans-serif">
<defs>
</defs>
<g transform="scale(1)">
<rect width="720" height="92"
class="frame fill" fill="#e0e0e0" data-fill="rgba(229,230,232,1)"></rect>
<image id="svg-header-img" width="720" height="92" preserveAspectRatio="xMaxYMin slice"
xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCABcAtADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD6AooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//Z"></image>
<rect class="toolbar fill" fill="#f5f5f5"
width="720" height="48" y="44"
data-fill="rgba(255,255,255,0.6)"/>
<rect id="svg-selected-tab" class="tab_selected toolbar fill" fill="#ffffff"
width="166" height="34" x="28" y="5" rx="4"
data-fill="rgba(255,255,255,0.6)" stroke="transparent" stroke-width="1.5"/>
<rect class="tab_line stroke" stroke="#ffffff"
width="166" height="34" x="28" y="5" rx="4"
fill="transparent" data-stroke="rgba(0,0,0,0.25)" stroke-width="1.5"/>
<rect class="bookmark_text fill" fill="#1a1a1a"
width="121" height="4" x="51" y="20" rx="2"
data-fallback="tab_background_text" />
<rect class="tab_background_text fill" fill="#666666"
width="121" height="4" x="221" y="20" rx="2" />
<rect id="svg-url-field" class="toolbar_field fill" fill="#ffffff"
width="528" height="32" x="114" y="52" rx="4"
data-fill="rgba(255,255,255,1)"/>
<rect id="svg-url-field-text" class="toolbar_field_text fill" fill="#1a1a1a"
width="342" height="4" x="146" y="66" rx="2.2"/>
<circle class="toolbar_field_text stroke" stroke="#1a1a1a"
cx="130" cy="68" r="6.25"
data-stroke="rgba(0,0,0,1)" stroke-width="1.5" fill="transparent"/>
<circle class="bookmark_text stroke" stroke="#555555"
cx="24" cy="68" r="6.25"
data-stroke="rgba(0,0,0,1)" data-fallback="tab_background_text" stroke-width="1.5" fill="transparent" />
<circle class="bookmark_text stroke" stroke="#555555"
cx="60" cy="68" r="6.25"
data-stroke="rgba(0,0,0,1)" data-fallback="tab_background_text" stroke-width="1.5" fill="transparent" />
<g transform="translate(689 61.75)"
class="bookmark_text fill" fill="#555555"
data-fallback="tab_background_text">
<rect width="14" height="1.5" rx="1.333"/>
<rect width="14" height="1.5" y="6" rx="1.333"/>
<rect width="14" height="1.5" y="12" rx="1.333"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

icons/icon.svg
+2 -6
View File
@@ -5,12 +5,8 @@
</mask>
<g mask="url(#mask0_121_5)">
<circle cx="24" cy="24" r="24" fill="white"/>
<path d="M36.8356 19.6646C36.9475 19.1634 36.9529 18.6442 36.8513 18.1408C36.7498 17.6374 36.5437 17.1609 36.2463 16.7422C29.1721 5.6022 12.2708 9.0072 9.36366 21.5295C8.93829 23.3906 8.88551 25.3174 9.20834 27.1989C9.53117 29.0805 10.2232 30.8795 11.2447 32.4923C11.5042 32.9521 11.8592 33.3509 12.2859 33.6618C12.7125 33.9728 13.2009 34.1887 13.718 34.295C14.2351 34.4013 14.769 34.3956 15.2837 34.2782C15.7984 34.1608 16.282 33.9345 16.7019 33.6144C16.7443 33.6112 35.172 21.9412 35.2291 21.925C35.6331 21.6733 35.9832 21.3439 36.259 20.9558C36.5347 20.5678 36.7307 20.1289 36.8356 19.6646Z" fill="black"/>
<path d="M24.5021 42.22C22.8384 41.0976 21.5369 39.5157 20.7562 37.6669C20.1587 37.7489 19.5501 37.6766 18.9883 37.457C19.7804 39.9438 21.3945 42.0874 23.5656 43.5359C24.9115 44.4504 26.0117 45.6822 26.7692 47.1224C27.5266 48.5626 27.918 50.1671 27.9088 51.7944C27.9123 52.0756 27.8907 52.3566 27.8443 52.6339C27.8252 52.75 27.8315 52.8689 27.8628 52.9823C27.8941 53.0957 27.9497 53.201 28.0257 53.2908C28.1017 53.3806 28.1963 53.4529 28.303 53.5025C28.4096 53.5522 28.5258 53.5781 28.6435 53.5785C29.5775 53.4156 29.4369 52.9738 29.5234 51.8348C29.538 49.9435 29.0876 48.0775 28.2121 46.401C27.3365 44.7245 26.0625 43.2888 24.5021 42.22Z" fill="black"/>
<path d="M40.9786 31.8303C39.2122 30.6541 37.8619 28.9506 37.1198 26.9624C36.8759 27.5461 36.4696 28.0476 35.9492 28.4074C36.8735 30.3238 38.2884 31.9615 40.0502 33.1543C41.3939 34.0706 42.4919 35.3029 43.2478 36.7429C44.0037 38.1829 44.3943 39.7865 44.3854 41.4128C44.3731 42.2821 44.0436 43.0397 45.12 43.197C46.0524 43.0296 45.9135 42.5841 46 41.4451C46.0136 39.554 45.5629 37.6884 44.6874 36.012C43.8119 34.3357 42.5384 32.8998 40.9786 31.8303Z" fill="black"/>
<path d="M41.7603 43.867C40.0975 43.2591 38.6288 42.2152 37.5082 40.8446C36.3876 39.474 35.6562 37.8271 35.3909 36.0767C35.0705 33.9831 34.2077 32.0098 32.8883 30.353L31.5078 31.2249C32.7294 32.69 33.5228 34.4639 33.8005 36.3512C34.0933 38.2214 34.8403 39.9913 35.9761 41.5057C37.1119 43.0201 38.6018 44.2328 40.3153 45.0376C40.6963 45.2473 41.112 45.3868 41.5424 45.4493C41.735 45.4456 41.9199 45.3733 42.0639 45.2453C42.2079 45.1173 42.3015 44.9422 42.3278 44.7513C42.3541 44.5605 42.3113 44.3665 42.2073 44.2044C42.1033 44.0423 41.9448 43.9226 41.7603 43.867Z" fill="black"/>
<path d="M19.8477 36.0372C20.0772 36.0935 20.3159 36.1025 20.549 36.0636C20.7822 36.0248 21.005 35.9389 21.2039 35.8112L24.8851 33.4943C24.9174 33.4701 24.9578 33.4458 24.9981 33.4216C27.346 31.9383 32.6348 28.6013 34.9358 27.1571C35.3316 26.8985 35.6111 26.496 35.7151 26.0349C35.8191 25.5737 35.7393 25.0902 35.4928 24.6868L35.0327 23.9521L18.2734 34.5195C18.6482 35.1258 19.0623 35.9202 19.8477 36.0372Z" fill="black"/>
<path d="M29.9899 38.7574C28.4079 37.6896 27.1509 36.2064 26.3571 34.4707L24.9766 35.3345C25.8982 37.2455 27.3071 38.88 29.0614 40.0732C30.4057 40.9913 31.5045 42.225 32.2617 43.6661C33.0189 45.1072 33.4113 46.7119 33.4046 48.3399C33.3687 49.2105 33.0963 49.9987 34.1312 50.1159C35.0713 49.9539 34.9225 49.5118 35.0192 48.3722C35.0304 46.4806 34.5778 44.6151 33.701 42.9389C32.8243 41.2628 31.55 39.827 29.9899 38.7574Z" fill="black"/>
<path d="M21.0169 21C20.6194 21 20.2383 21.158 19.9573 21.4393C19.6762 21.7207 19.5184 22.1022 19.5184 22.5C19.5184 22.8978 19.6762 23.2794 19.9573 23.5607C20.2383 23.842 20.6194 24 21.0169 24C21.4143 24 21.7954 23.842 22.0765 23.5607C22.3575 23.2794 22.5154 22.8978 22.5154 22.5C22.5154 22.1022 22.3575 21.7207 22.0765 21.4393C21.7954 21.158 21.4143 21 21.0169 21ZM27.0109 21C26.6134 21 26.2323 21.158 25.9513 21.4393C25.6702 21.7207 25.5124 22.1022 25.5124 22.5C25.5124 22.8978 25.6702 23.2794 25.9513 23.5607C26.2323 23.842 26.6134 24 27.0109 24C27.4083 24 27.7894 23.842 28.0705 23.5607C28.3515 23.2794 28.5094 22.8978 28.5094 22.5C28.5094 22.1022 28.3515 21.7207 28.0705 21.4393C27.7894 21.158 27.4083 21 27.0109 21ZM19.5184 28.5001C19.5184 35.8802 10.887 36.0002 10.5273 36.0002V39.0002C14.6782 39.0002 22.5154 36.8102 22.5154 28.5001V27.0001H19.5184V28.5001ZM28.5094 28.5001V27.0001H25.5124V28.5001C25.5124 32.8202 27.6402 36.0302 31.6712 37.7552C34.5483 38.9852 37.3805 39.0002 37.5004 39.0002V36.0002C37.1407 36.0002 28.5094 35.8802 28.5094 28.5001Z" fill="black"/>
<path d="M36.003 28.5003C36.003 29.3253 35.3287 30.0003 34.5045 30.0003C33.6803 30.0003 33.006 29.3253 33.006 28.5003C33.006 26.2802 33.5305 24.1652 33.9351 22.4702C34.04 22.0202 34.1449 21.5852 34.2348 21.1952C34.5794 19.6051 34.5195 17.9401 34.025 16.3801C32.6464 11.97 28.6304 9 24 9C19.3696 9 15.3536 11.97 13.975 16.3801C13.4946 17.9407 13.4223 19.5986 13.7652 21.1952C13.8551 21.5852 13.96 22.0052 14.0649 22.4702C14.4845 24.1652 14.994 26.2802 14.994 28.5003C14.994 29.3253 14.3197 30.0003 13.4955 30.0003C12.6713 30.0003 11.997 29.3253 11.997 28.5003V27.0002H9V28.5003C9 30.9753 11.023 33.0003 13.4955 33.0003C15.968 33.0003 17.991 30.9753 17.991 28.5003C17.991 26.0252 17.4216 23.6102 16.972 21.7502C16.8671 21.3152 16.7622 20.9102 16.6873 20.5502C16.4459 19.4612 16.4976 18.3275 16.8372 17.2651C17.8112 14.1151 20.6883 12 24 12C27.3117 12 30.1738 14.1151 31.1628 17.2651C31.4925 18.3301 31.5375 19.4701 31.3127 20.5502C31.2378 20.9252 31.1329 21.3152 31.028 21.7502C30.5784 23.6102 30.009 25.9202 30.009 28.5003C30.009 31.0803 32.032 33.0003 34.5045 33.0003C36.977 33.0003 39 30.9753 39 28.5003V27.0002H36.003V28.5003Z" fill="black"/>
</g>
</g>
<defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB