change icon

CHANGELOG.md

@@ -1,5 +1,10 @@
 # ChangeLog
 
+## 0.0.36
+
+- Change Icon for adapting both light and dark mode
+- Add Dark Mode Option
+
 ## 0.0.35
 
 - Support Hacker News Modern Extension

scripts/generate-icons.js

@@ -4,14 +4,15 @@ import * as fs from "https://deno.land/[email protected]/fs/mod.ts";
 import * as path from "https://deno.land/[email protected]/path/mod.ts";
 
 async function main(){
+  {
     const icon = await Deno.readFile(
       'assets/icon.png',
     );
     await fs.ensureDir(path.join("src",'icons'));
     // copy icon to dist
     // await Deno.writeFile(getDistFilePath(siteIdentifier, "icon.png"), icon);
     // generate apple-touch-icon
-    const sizes = [16,32,64,128,512]
+    const sizes = [16,32,48,64,128,512]
     for (const size of sizes) {
       const appleTouchIcon = await resize(icon, {
         width: size,
@@ -25,6 +26,7 @@ async function main(){
         },
       );
     }
+  }
 }
 
 main();

src/background/background.js

@@ -23,6 +23,7 @@ chrome.webRequest.onHeadersReceived.addListener(function(details) {
     types: ['main_frame']
 }, ['responseHeaders']);
 
+let currentScheme = 'light'
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "getMainFramePageLanguageState") {
         chrome.tabs.sendMessage(sender.tab.id, {

src/manifest.json

@@ -25,6 +25,7 @@
 
     "icons": {
         "32": "/icons/icon-32.png",
+        "48": "/icons/icon-48.png",
         "64": "/icons/icon-64.png",
         "128": "/icons/icon-128.png"
     },
@@ -80,6 +81,7 @@
             "match_about_blank": true,
             "js": ["/lib/languages.js", "/lib/config.js", "/lib/platformInfo.js"]
         },
+
         {
             "matches": ["<all_urls>"],
             "run_at": "document_end",

src/options/options.html

@@ -126,6 +126,12 @@ <h3 class="w3-wide"><b>Immersive Translate</b></h3>
                 </div>
                 <ul style="margin-right:0 !important;" id="neverTranslateSites" class="w3-ul w3-card-4 w3-margin w3-round list"></ul>
                 <br>
+                <p><b data-i18n="lblDarkMode">Dark mode</b></p>
+                <select id="darkMode" class="w3-select w3-margin">
+                  <option value="auto" data-i18n="msgAutomatic">Automatic</option>
+                  <option value="yes" data-i18n="msgYes">Yes</option>
+                  <option value="no" data-i18n="msgNo">No</option>
+                </select>
                 <div class="w3-display-container w3-padding w3-margin-top">
                   <div class="w3-display-left">
                     <p><b data-i18n="msgIsShowDualLanguage">Show dual language?</b></p>
@@ -301,7 +307,6 @@ <h3 class="w3-wide"><b>Immersive Translate</b></h3>
 
         </div>
     </div>
-
     <script src="/lib/languages.js"></script>
     <script src="/lib/config.js"></script>
     <script src="/lib/platformInfo.js"></script>

src/options/options.js

@@ -89,6 +89,11 @@ twpConfig.onReady(function () {
     fillLanguageList($("#addToNeverTranslateLangs"))
     fillLanguageList($("#addToAlwaysTranslateLangs"))
 
+  $("#darkMode").onchange = (e) => {
+    twpConfig.set("darkMode", e.target.value);
+    updateDarkMode();
+  };
+  $("#darkMode").value = twpConfig.get("darkMode");
     function enableDarkMode() {
         if (!$("#darkModeElement")) {
             const el = document.createElement("style")