Add dark mode compatibility toggle

src/apps.json

@@ -1632,7 +1632,7 @@
         "x-bubble-capacity-used": "",
         "x-bubble-perf": ""
       },
-      "js":{
+      "js": {
         "bubble_environment": "",
         "bubble_hostname_modifier": "",
         "bubble_version": "",

src/drivers/npm/package.json

@@ -2,7 +2,7 @@
   "name": "wappalyzer",
   "description": "Uncovers the technologies used on websites",
   "homepage": "https://github.com/AliasIO/Wappalyzer",
-  "version": "5.8.5",
+  "version": "5.9.0",
   "author": "Elbert Alias",
   "license": "GPL-3.0",
   "repository": {

src/drivers/webextension/_locales/ca/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Avisar-me quan hi hagi una actualització disponible" },
 	"optionDynamicIcon":        { "message": "Utilitzar la icona de la tecnologia enlloc del logotip de Wappalyzer" },
 	"optionTracking":           { "message": "Enviar les tecnologies identificades de forma anònima a wappalyzer.com" },
+  "optionThemeMode":          { "message": "Habilitar la compatibilitat de la manera fosc." },
 	"nothingToDo":              { "message": "Res a fer aquí." },
 	"noAppsDetected":           { "message": "No s'ha detectat cap tecnologia." },
   "categoryPin":              { "message": "Mostrar sempre la icona" },

src/drivers/webextension/_locales/de/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Benachrichtige mich bei Upgrades" },
 	"optionDynamicIcon":        { "message": "Applikations Icon anstatt des Wappalyzer Icons verwenden" },
 	"optionTracking":           { "message": "Anonyme Statistiken an wappalyzer.com übermitteln" },
+  "optionThemeMode":          { "message": "Aktivieren dunklen Modus Kompatibilität." },
 	"nothingToDo":              { "message": "Nichts zu tun." },
 	"noAppsDetected":           { "message": "Keine Applikation entdeckt." },
   "categoryPin":              { "message": "Immer Icon anzeigen" },

src/drivers/webextension/_locales/el/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Ενημερώστε με για αναβαθμίσεις" },
 	"optionDynamicIcon":        { "message": "Use application icon instead of Wappalyzer logo" },
 	"optionTracking":           { "message": "Ανώνυμη αποστολή αναφορών για εντοπισμένες εφαρμογές στο wappalyzer.com για έρευνα" },
+	"optionThemeMode":          { "message": "Ενεργοποίηση συμβατότητας σκοτεινό τρόπο." },
 	"nothingToDo":              { "message": "Καμία ενέργεια." },
 	"noAppsDetected":           { "message": "Δεν ανιχνεύθηκαν εφαρμογές." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/en/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Tell me about upgrades" },
 	"optionDynamicIcon":        { "message": "Use technology icon instead of Wappalyzer logo" },
 	"optionTracking":           { "message": "Anonymously send identified technologies to wappalyzer.com" },
+	"optionThemeMode":          { "message": "Enable dark mode compatibility." },
 	"nothingToDo":              { "message": "Nothing to do here." },
 	"noAppsDetected":           { "message": "No technologies detected." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/es/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Indicarme actualizaciones" },
 	"optionDynamicIcon":        { "message": "Use application icon instead of Wappalyzer logo" },
 	"optionTracking":           { "message": "Enviar informes anónimos sobre las aplicaciones detectadas a wappalyzer.com para análisis" },
+	"optionThemeMode":          { "message": "Habilitar la compatibilidad del modo oscuro." },
 	"nothingToDo":              { "message": "Nada que hacer aquí." },
 	"noAppsDetected":           { "message": "Aplicaciones no detectadas." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/fa/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "درباره ارتقا به من بگویید" },
 	"optionDynamicIcon":        { "message": "از نماد فن آوری به جای علامت Wappalyzer استفاده شود" },
 	"optionTracking":           { "message": "ارسال فن آوری های شناسایی شده به صورت ناشناس به wappalyzer.com" },
+  "optionThemeMode":          { "message": "فعال کردن حالت سازگاری تاریک." },
 	"nothingToDo":              { "message": "هیچ چیز برای انجام اینجا نیست." },
 	"noAppsDetected":           { "message": "هیچ فن‌آوری شناسایی نشده است." },
 	"categoryPin":              { "message": "همیشه نماد را نشان بده" },

src/drivers/webextension/_locales/fr/messages.json

@@ -3,6 +3,7 @@
 	"noAppsDetected":           { "message": "Pas d'applications détectées." },
 	"nothingToDo":              { "message": "Rien à faire ici." },
 	"optionTracking":           { "message": "Envoyer anonymement des rapports sur les applications détectées à wappalyzer.com pour la recherche" },
+  "optionThemeMode":          { "message": "Activer la compatibilité de mode sombre." },
 	"optionUpgradeMessage":     { "message": "M'afficher les mises à jour" },
 	"optionDynamicIcon":        { "message": "Utiliser l'icône de l'application au lieu du logo Wappalyzer" },
 	"options":                  { "message": "Options" },

src/drivers/webextension/_locales/gl_ES/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Infórmame se existe actualizacións" },
 	"optionDynamicIcon":        { "message": "Amosa icono do aplicativo en lugar do de Wappalyzer" },
 	"optionTracking":           { "message": "Envía anonimamente aplicativos identificados a wappalyzer.com" },
+  "optionThemeMode":          { "message": "Permitir a compatibilidade modo escuro." },
 	"nothingToDo":              { "message": "Nada que facer por aquí." },
 	"noAppsDetected":           { "message": "Non se identificaron aplicativos." },
   "categoryPin":              { "message": "Amosar sempre icono" },

src/drivers/webextension/_locales/gr/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Ενημερώστε με για αναβαθμίσεις" },
 	"optionDynamicIcon":        { "message": "Use application icon instead of Wappalyzer logo" },
 	"optionTracking":           { "message": "Ανώνυμη αποστολή αναφορών για εντοπισμένες εφαρμογές στο wappalyzer.com για έρευνα" },
+  "optionThemeMode":          { "message": "Ενεργοποίηση συμβατότητας σκοτεινό τρόπο." },
 	"nothingToDo":              { "message": "Καμία ενέργεια." },
 	"noAppsDetected":           { "message": "Δεν ανιχνεύθηκαν εφαρμογές." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/id/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Beritahu Tentang Peningkatan Versi" },
 	"optionDynamicIcon":        { "message": "Gunakan ikon aplikasi dan bukan logo Wappalyzer" },
 	"optionTracking":           { "message": "Secara anonim kirimkan laporan tentang aplikasi yang terdeteksi ke wappalyzer.com untuk penelitian" },
+  "optionThemeMode":          { "message": "Aktifkan kompatibilitas modus gelap." },
 	"nothingToDo":              { "message": "Tak ada yang dilakukan disini." },
 	"noAppsDetected":           { "message": "Tidak ada aplikasi yang terdeteksi." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/it/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Parlami dell'upgrade" },
 	"optionDynamicIcon":        { "message": "Use application icon instead of Wappalyzer logo" },
 	"optionTracking":           { "message": "Inviare anonimamente un report sulle applicazioni rilevate a wappalyzer.com per l'analisi" },
+  "optionThemeMode":          { "message": "Abilita compatibilità con la modalità scura." },
 	"nothingToDo":              { "message": "Niente da fare qui." },
 	"noAppsDetected":           { "message": "Nessuna applicazione rilevata." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/ja/messages.json

@@ -8,6 +8,8 @@
 	"optionUpgradeMessage":     { "message": "アップデート内容を通知する" },
 	"optionDynamicIcon":        { "message": "Wappalyzerロゴの代わりに技術アイコンを使用する" },
 	"optionTracking":           { "message": "特定した技術を匿名でwappalyzer.comに送信する" },
+  "optionThemeMode":          { "message": "Enable dark mode compatibility." },
+  "optionThemeMode":          { "message": "" },
 	"nothingToDo":              { "message": "ここでは特定出来ません。" },
 	"noAppsDetected":           { "message": "技術は検出されませんでした。" },
   "categoryPin":              { "message": "常にアイコンを表示" },

src/drivers/webextension/_locales/pl/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Powiadamiaj mnie o aktualizacjach" },
 	"optionDynamicIcon":        { "message": "Używaj loga aplikacji zamiast Wappalyzer" },
 	"optionTracking":           { "message": "Przesyłaj anonimowe statystyki aplikacji wykrytych przez Wappalyzer do twórców" },
+  "optionThemeMode":          { "message": "Włącz ciemną kompatybilność trybu." },
 	"nothingToDo":              { "message": "Nic tu nie ma." },
 	"noAppsDetected":           { "message": "Nie wykryto żadnych aplikacji." },
   "categoryPin":              { "message": "Zawsze pokazuj tą ikonę" },

src/drivers/webextension/_locales/pt/messages.json

@@ -4,6 +4,7 @@
   "nothingToDo":              { "message": "Nada a fazer aqui." },
   "optionDynamicIcon":        { "message": "Utilizar o ícone da tecnologia em vez do logótipo do Wappalyzer" },
   "optionTracking":           { "message": "Envie anonimamente tecnologias identificadas para wappalyzer.com" },
+  "optionThemeMode":          { "message": "Permitir a compatibilidade modo escuro." },
   "optionUpgradeMessage":     { "message": "Fale-me sobre actualizações" },
   "options":                  { "message": "Opções" },
   "optionsSave":              { "message": "Opções de Guardar" },

src/drivers/webextension/_locales/pt_BR/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Atualizações automáticas" },
 	"optionDynamicIcon":        { "message": "Utilizar o ícone da tecnologia ao invés da logo do Wappalyzer" },
 	"optionTracking":           { "message": "Enviar relatórios anônimos para wappalyzer.com sobre tecnologias identificadas" },
+  "optionThemeMode":          { "message": "Permitir a compatibilidade modo escuro." },
 	"nothingToDo":              { "message": "Nada a fazer aqui." },
 	"noAppsDetected":           { "message": "Nenhuma tecnologia identificada." },
   "categoryPin":              { "message": "Sempre mostrar ícone" },

src/drivers/webextension/_locales/ro/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Anunță-mă dacă sunt actualizări" },
 	"optionDynamicIcon":        { "message": "Foloseşte icon-ul aplicaţiei în locul logo-ului Wappalyzer" },
 	"optionTracking":           { "message": "Trimite rapoarte anonime despre aplicațiile detectate către wappalyzer.com pentru cercetare" },
+	"optionThemeMode":          { "message": "Activează modul de compatibilitate întuneric." },
 	"nothingToDo":              { "message": "Nimic de făcut pe pagina curentă." },
 	"noAppsDetected":           { "message": "Nici o aplicație detectată." },
   "categoryPin":              { "message": "Afișează icon tot timpul" },

src/drivers/webextension/_locales/ru/messages.json

@@ -56,6 +56,7 @@
   "noAppsDetected":           { "message": "Нет данных о сайте" },
   "nothingToDo":              { "message": "Тут нечего искать" },
   "optionTracking":           { "message": "Анонимно отправлять статистику распознанных данных на сервер (для исследований)" },
+  "optionThemeMode":          { "message": "Включити сумісність темного режиму." },
   "optionDynamicIcon":        { "message": "Использовать значок приложения вместо логотипа Wappalyzer" },
   "optionUpgradeMessage":     { "message": "Оповещать меня об обновлениях" },
   "options":                  { "message": "Настройки" },

src/drivers/webextension/_locales/sk/messages.json

@@ -8,6 +8,7 @@
   "optionUpgradeMessage":     { "message": "Povedzte mi o upgradoch" },
   "optionDynamicIcon":        { "message": "Použiť ikonu aplikácie namiesto loga Wappalyzer" },
   "optionTracking":           { "message": "Anonymne posielať správy o zistených aplikáciách na wappalyzer.com pre výskum" },
+  "optionThemeMode":          { "message": "Povoliť kompatibilitu tmavú režim." },
   "nothingToDo":              { "message": "Nie je tu čo robiť." },
   "noAppsDetected":           { "message": "Žiadne aplikácie neboli zistené." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/tr/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Güncellemeleri göster" },
 	"optionDynamicIcon":        { "message": "Wappalyzer logosu yerine uygulama simgesi kullan" },
 	"optionTracking":           { "message": "Anonim olarak tespit edilen uygulamalar hakkında wappalyzer.com'a araştırma raporları gönderin" },
+	"optionThemeMode":          { "message": "Karanlık modu uyumluluğu etkinleştirin." },
 	"nothingToDo":              { "message": "Burada yapacak birşey yok." },
 	"noAppsDetected":           { "message": "Uygulamalar tespit edilemedi." },
   "categoryPin":              { "message": "Her zaman bu kategorinin ikonunu kullan" },

src/drivers/webextension/_locales/uk/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Сповіщати про оновлення" },
 	"optionDynamicIcon":        { "message": "Використовувати значок застосунку замість логотипу Wappalyzer" },
 	"optionTracking":           { "message": "Анонімно надсилати статистику розпізнавань на сервер для досліджень" },
+  "optionThemeMode":          { "message": "Включити сумісність темного режиму." },
 	"nothingToDo":              { "message": "Тут нічого робити." },
 	"noAppsDetected":           { "message": "Нічого не знайдено." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/uz/messages.json

@@ -8,6 +8,7 @@
 	"optionUpgradeMessage":     { "message": "Yangilanishlar haqida habar berish" },
 	"optionDynamicIcon":        { "message": "Wappalyzer logotipi o'rnida dastur logotipidan foydalanish" },
 	"optionTracking":           { "message": "Wappalyzer takomillashtirish uchun hisobotlarni maxfiy ravishda serverga jo'natish" },
+	"optionThemeMode":          { "message": "qorong'i rejimi mosligini yoqish." },
 	"nothingToDo":              { "message": "Bu yerda tekshirib bolmaydi." },
 	"noAppsDetected":           { "message": "Hech qanday dastur aniqlanmadi." },
   "categoryPin":              { "message": "Always show icon" },

src/drivers/webextension/_locales/zh_CN/messages.json

@@ -8,6 +8,7 @@
   "optionUpgradeMessage":     { "message": "通知我更新详情" },
   "optionDynamicIcon":        { "message": "使用应用程序而非 Wappalyzer 的标志" },
   "optionTracking":           { "message": "发送匿名的应用报告到 wappalyzer.com 供研究使用" },
+  "optionThemeMode":          { "message": "启用暗模式的兼容性。" },
   "nothingToDo":              { "message": "这儿啥也没有。" },
   "noAppsDetected":           { "message": "未检测到任何技术。" },
   "categoryPin":              { "message": "总是显示图标" },

src/drivers/webextension/_locales/zh_TW/messages.json

@@ -8,6 +8,7 @@
   "optionUpgradeMessage":     { "message": "通知我更新內容" },
   "optionDynamicIcon":        { "message": "使用網頁中使用技術的圖示取代 Wappalyzer 的標誌" },
   "optionTracking":           { "message": "匿名傳送已識別的技術至 wappalyzer.com" },
+  "optionThemeMode":          { "message": "啟用暗模式的兼容性。" },
   "nothingToDo":              { "message": "這裡什麼也沒有。" },
   "noAppsDetected":           { "message": "未識別到技術。" },
   "categoryPin":              { "message": "永遠顯示圖示" },

src/drivers/webextension/css/popup.css

@@ -201,56 +201,49 @@ body {
 }
 
 /* Add alternative color palette for Dark mode theme. */
-@media (prefers-color-scheme: dark) {
-  body {
+body.theme-mode-sync  {
   background: linear-gradient(160deg, #32067c, #150233);
-  }
+}
 
-  .header {
+.theme-mode-sync .header {
   border-bottom: 1px solid #000;
-  }
+}
 
-  .header__logo--dark {
+.theme-mode-sync .header__logo--dark {
   display: inline-block;
-  }
+}
 
-  .header__logo--light {
+.theme-mode-sync .header__logo--light {
   display: none;
-  }
+}
 
-  .container {
+.theme-mode-sync .container {
   color: white;
-  }
+}
 
-  .detected__category-link, .detected__app {
+.theme-mode-sync .detected__category-link, .theme-mode-sync .detected__app {
   color: white;
-  }
+}
 
-  .detected__category-link:hover {
+.theme-mode-sync .detected__category-link:hover {
   color: white;
   border-bottom: 1px solid white;
-  }
-
-  .detected__app-icon {
-    -webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,1));
-    filter: drop-shadow(0px 0px 1px rgba(255,255,255,1));
-  }
+}
 
-  .detected__app-version, .detected__app-confidence {
+.theme-mode-sync .detected__app-version, .theme-mode-sync .detected__app-confidence {
   background-color: #4608ad;
-  }
+}
 
-  .detected__app:hover .detected__app-name {
+.theme-mode-sync .detected__app:hover .detected__app-name {
   border-bottom: 1px solid white;
-  }
+}
 
-  .detected__app:hover .detected__app-version,
-  .detected__app:hover .detected__app-confidence {
+.theme-mode-sync .detected__app:hover .theme-mode-sync .detected__app-version,
+.theme-mode-sync .detected__app:hover .theme-mode-sync .detected__app-confidence {
   border-bottom: none;
-  }
+}
 
-  .terms__accept,
-  .terms__privacy {
+.theme-mode-sync .terms__accept,
+.theme-mode-sync .terms__privacy {
   color: white;
-  }
 }

src/drivers/webextension/html/options.html

@@ -40,6 +40,10 @@
             <input id="option-tracking" type="checkbox">
             <span data-i18n="optionTracking">Anonymously send reports on detected applications to wappalyzer.com for research</span>
           </label>
+          <label for="option-theme-mode">
+            <input id="option-theme-mode" type="checkbox">
+            <span data-i18n="optionThemeMode">Enable dark mode compatibility</span>
+          </label>
         </p>
 
         <div id="about">

src/drivers/webextension/js/driver.js

@@ -190,6 +190,13 @@ browser.runtime.onConnect.addListener((port) => {
           patterns: wappalyzer.jsPatterns,
         };
 
+        break;
+      case 'update_theme_mode':
+        // Sync theme mode to popup.
+        response = {
+          themeMode: await getOption('themeMode', false),
+        };
+
         break;
       default:
         // Do nothing

src/drivers/webextension/js/options.js

@@ -93,4 +93,13 @@ document.addEventListener('DOMContentLoaded', async () => {
   el.checked = value;
 
   el.addEventListener('change', e => setOption('tracking', e.target.checked));
+
+  // Theme Mode
+  value = await getOption('themeMode', false);
+
+  el = document.querySelector('#option-theme-mode');
+
+  el.checked = value;
+
+  el.addEventListener('change', e => setOption('themeMode', e.target.checked));
 });

src/drivers/webextension/js/popup.js

@@ -205,6 +205,28 @@ async function getApps() {
   }
 }
 
+/**
+ * Async function to update body class based on option.
+ */
+async function getThemeMode() {
+  try {
+    port.postMessage({
+      id: 'update_theme_mode',
+    });
+  } catch (error) {
+    console.error(error); // eslint-disable-line no-console
+  }
+}
+
+/**
+ * Update theme mode based on browser option.
+ * @param {object} res Response from port listener.
+ */
+function updateThemeMode(res) {
+  if (res.hasOwnProperty('themeMode') && res.themeMode !== false) {
+    document.body.classList.add('theme-mode-sync');
+  }
+}
 function displayApps(response) {
   pinnedCategory = response.pinnedCategory; // eslint-disable-line prefer-destructuring
   termsAccepted = response.termsAccepted; // eslint-disable-line prefer-destructuring
@@ -237,10 +259,15 @@ port.onMessage.addListener((message) => {
     case 'get_apps':
       displayApps(message.response);
 
+      break;
+    case 'update_theme_mode':
+      updateThemeMode(message.response);
+
       break;
     default:
       // Do nothing
   }
 });
 
+getThemeMode();
 getApps();

src/drivers/webextension/manifest.json

@@ -4,7 +4,7 @@
   "author": "Elbert Alias",
   "homepage_url": "https://www.wappalyzer.com",
   "description": "Identify web technologies",
-  "version": "5.8.5",
+  "version": "5.9.0",
   "default_locale": "en",
   "manifest_version": 2,
   "icons": {