Adding more settings and combining theme in the general page #80

13 files changed, 220 insertions, 154 deletions

diff --git a/src/assets/javascripts/helpers/general.js b/src/assets/javascripts/helpers/general.js
index fa911b4f..15379288 100644
--- a/src/assets/javascripts/helpers/general.js
+++ b/src/assets/javascripts/helpers/general.js
@@ -9,6 +9,22 @@ function setAlwaysUsePreferred(val) {
     console.log("alwaysUsePreferred: ", alwaysUsePreferred)
 }
 
+let theme;
+const getTheme = () => theme;
+function setTheme(val) {
+    theme = val
+    browser.storage.local.set({ theme });
+    console.log("theme: ", theme)
+}
+
+let applyThemeToSites;
+const getApplyThemeToSites = () => applyThemeToSites;
+function setApplyThemeToSites(val) {
+    applyThemeToSites = val;
+    browser.storage.local.set({ applyThemeToSites })
+    console.log("applyThemeToSites: ", applyThemeToSites)
+}
+
 let exceptions = {
     "url": [],
     "regex": [],
@@ -36,11 +52,17 @@ async function init() {
         resolve => browser.storage.local.get(
             [
                 "exceptions",
-                "alwaysUsePreferred"
+                "alwaysUsePreferred",
+                "theme",
+                "applyThemeToSites",
             ],
             r => { // r = result
                 if (r.exceptions) exceptions = r.exceptions;
                 alwaysUsePreferred = r.alwaysUsePreferred ?? false;
+
+                theme = r.them ?? "DEFAULT"
+                applyThemeToSites = r.applyThemeToSites ?? false;
+
                 resolve();
             }
         )
@@ -54,6 +76,12 @@ export default {
     getAlwaysUsePreferred,
     setAlwaysUsePreferred,
 
+    getApplyThemeToSites,
+    setApplyThemeToSites,
+
+    getTheme,
+    setTheme,
+
     isException,
     init,
 }
\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/twitter.js b/src/assets/javascripts/helpers/twitter.js
index 9c85fa1b..6bd433b7 100644
--- a/src/assets/javascripts/helpers/twitter.js
+++ b/src/assets/javascripts/helpers/twitter.js
@@ -182,6 +182,35 @@ function changeInstance(url) {
   return `${randomInstance}${url.pathname}${url.search}`;
 }
 
+function isNitter(url, type) {
+  let protocolHost = `${url.protocol}//${url.host}`;
+
+  if (type !== "main_frame" && type !== "sub_frame") return false;
+
+  return [
+    ...redirects.nitter.normal,
+    ...redirects.nitter.tor,
+    ...nitterNormalCustomRedirects,
+    ...nitterTorCustomRedirects,
+  ].includes(protocolHost);
+}
+
+let theme;
+let applyThemeToSites;
+function initNitterCookies(url) {
+  let protocolHost = `${url.protocol}//${url.host}`;
+  let themeValue;
+  if (theme == 'light') themeValue = 'Twitter';
+  if (theme == 'dark') themeValue = 'Twitter Dark';
+
+  if (applyThemeToSites && themeValue != 'DEFAULT')
+    browser.cookies.set({
+      url: protocolHost,
+      name: "theme",
+      value: themeValue
+    })
+}
+
 async function init() {
   return new Promise((resolve) => {
     fetch('/instances/data.json').then(response => response.text()).then(data => {
@@ -189,31 +218,42 @@ async function init() {
       browser.storage.local.get(
         [
           "disableTwitter",
+
           "twitterRedirects",
+
+          "theme",
+          "applyThemeToSites",
+
           "nitterNormalRedirectsChecks",
           "nitterNormalCustomRedirects",
+
           "nitterTorRedirectsChecks",
           "nitterTorCustomRedirects",
+
           "twitterProtocol",
+
           "alwaysUsePreferred",
         ],
-        (result) => {
-          disable = result.disableTwitter ?? false;
+        r => {
+          disable = r.disableTwitter ?? false;
 
-          protocol = result.twitterProtocol ?? "normal";
+          protocol = r.twitterProtocol ?? "normal";
 
-          bypassWatchOnTwitter = result.bypassWatchOnTwitter ?? true;
+          bypassWatchOnTwitter = r.bypassWatchOnTwitter ?? true;
 
-          alwaysUsePreferred = result.alwaysUsePreferred ?? true;
+          alwaysUsePreferred = r.alwaysUsePreferred ?? true;
+
+          theme = r.theme ?? 'DEFAULT';
+          applyThemeToSites = r.applyThemeToSites ?? false;
 
           redirects.nitter = dataJson.nitter;
-          if (result.twitterRedirects) redirects = result.twitterRedirects;
+          if (r.twitterRedirects) redirects = r.twitterRedirects;
 
-          nitterNormalRedirectsChecks = result.nitterNormalRedirectsChecks ?? [...redirects.nitter.normal];
-          nitterNormalCustomRedirects = result.nitterNormalCustomRedirects ?? [];
+          nitterNormalRedirectsChecks = r.nitterNormalRedirectsChecks ?? [...redirects.nitter.normal];
+          nitterNormalCustomRedirects = r.nitterNormalCustomRedirects ?? [];
 
-          nitterTorRedirectsChecks = result.nitterTorRedirectsChecks ?? [...redirects.nitter.tor];
-          nitterTorCustomRedirects = result.nitterTorCustomRedirects ?? [];
+          nitterTorRedirectsChecks = r.nitterTorRedirectsChecks ?? [...redirects.nitter.tor];
+          nitterTorCustomRedirects = r.nitterTorCustomRedirects ?? [];
 
           resolve();
         }
@@ -248,6 +288,9 @@ export default {
   getProtocol,
   setProtocol,
 
+  isNitter,
+  initNitterCookies,
+
   redirect,
   init,
   changeInstance,
diff --git a/src/assets/javascripts/helpers/youtube/invidious-preferences.js b/src/assets/javascripts/helpers/youtube/invidious-preferences.js
index f60031fc..22a7dc71 100644
--- a/src/assets/javascripts/helpers/youtube/invidious-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/invidious-preferences.js
@@ -19,7 +19,7 @@ browser.storage.local.get(
         "youtubeVolume",
         "youtubeAutoplay",
         "OnlyEmbeddedVideo",
-        "youtubeTheme",
+        "theme",
         "invidiousVideoQuality",
     ], (result) => {
         let prefs = getCookie();
@@ -31,8 +31,8 @@ browser.storage.local.get(
         if (result.invidiousVideoQuality !== undefined && prefs.quality !== result.invidiousVideoQuality)
             prefs.quality = result.invidiousVideoQuality;
 
-        if (result.youtubeTheme !== undefined && prefs.dark_mode !== result.youtubeTheme)
-            prefs.dark_mode = result.youtubeTheme;
+        if (result.theme !== undefined && prefs.dark_mode !== result.theme)
+            prefs.dark_mode = result.theme;
 
         if (result.youtubeVolume !== undefined && prefs.volume !== result.youtubeVolume)
             prefs.volume = result.youtubeVolume;
diff --git a/src/assets/javascripts/helpers/youtube/piped-preferences.js b/src/assets/javascripts/helpers/youtube/piped-preferences.js
index 5803a1ae..6edd5ba2 100644
--- a/src/assets/javascripts/helpers/youtube/piped-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/piped-preferences.js
@@ -2,28 +2,33 @@ window.browser = window.browser || window.chrome;
 
 browser.storage.local.get(
     [
-        "youtubeTheme",
+        "theme",
+        "applyThemeToSites",
+
         "youtubeVolume",
         "youtubeAutoplay"
     ],
-    res => {
+    r => {
+        let applyThemeToSites = r.applyThemeToSites ?? false;
+
         if (
-            res.youtubeTheme != "DEFAULT" &&
-            localStorage.getItem("theme") != res.youtubeTheme
+            applyThemeToSites &&
+            r.theme != "DEFAULT" &&
+            localStorage.getItem("theme") != r.theme
         )
-            localStorage.setItem("theme", res.youtubeTheme);
+            localStorage.setItem("theme", r.theme);
 
         if (
-            res.youtubeVolume != "--" &&
-            localStorage.getItem("volume") != res.youtubeVolume
+            r.youtubeVolume != "--" &&
+            localStorage.getItem("volume") != r.youtubeVolume
         )
-            localStorage.setItem("volume", res.youtubeVolume / 100);
+            localStorage.setItem("volume", r.youtubeVolume / 100);
 
         if (
-            res.youtubeAutoplay != "DEFAULT" &&
-            localStorage.getItem("playerAutoPlay") != res.youtubeAutoplay
+            r.youtubeAutoplay != "DEFAULT" &&
+            localStorage.getItem("playerAutoPlay") != r.youtubeAutoplay
         )
-            localStorage.setItem("playerAutoPlay", res.youtubeAutoplay);
+            localStorage.setItem("playerAutoPlay", r.youtubeAutoplay);
     }
 )
 
diff --git a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
index c47b8c86..1c6458da 100644
--- a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
@@ -2,7 +2,7 @@ window.browser = window.browser || window.chrome;
 
 browser.storage.local.get(
     [
-        "youtubeTheme",
+        "theme",
         "youtubeAutoplay"
     ],
     res => {
@@ -13,8 +13,8 @@ browser.storage.local.get(
         ) ?? {};
         let oldPrefs = { ...prefs };
 
-        if (res.youtubeTheme == 'dark') prefs.darkMode = true;
-        if (res.youtubeTheme == 'light') prefs.darkMode = false;
+        if (res.theme == 'dark') prefs.darkMode = true;
+        if (res.theme == 'light') prefs.darkMode = false;
 
         if (res.youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = res.youtubeAutoplay;
 
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 3866f72e..e551255e 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -215,7 +215,7 @@ let theme;
 const getTheme = () => theme;
 function setTheme(val) {
   theme = val;
-  browser.storage.local.set({ youtubeTheme: theme })
+  browser.storage.local.set({ theme: theme })
   console.log("theme: ", theme)
 }
 
@@ -495,29 +495,10 @@ function changeInstance(url) {
   return `${randomInstance}${url.pathname}${url.search}`;
 }
 
-function isPipedorInvidious(url, type) {
+function isPipedorInvidious(url, type, frontend) {
   let protocolHost = `${url.protocol}//${url.host}`;
-  return (type === "main_frame" || type === "sub_frame") && [
-    ...redirects.invidious.normal,
-    ...redirects.invidious.tor,
-    ...invidiousNormalCustomRedirects,
-    ...invidiousTorCustomRedirects,
-
-    ...redirects.piped.normal,
-    ...redirects.piped.tor,
-    ...pipedNormalCustomRedirects,
-    ...pipedTorCustomRedirects,
-  ].includes(protocolHost);
-}
 
-function isUrlPipedorInvidious(url, frontend) {
-  try {
-    url = new URL(url);
-  }
-  catch (error) {
-    return
-  }
-  let protocolHost = `${url.protocol}//${url.host}`;
+  if (type !== "main_frame" && type !== "sub_frame") return false;
 
   if (frontend == 'invidious')
     return [
@@ -556,10 +537,13 @@ function isUrlPipedorInvidious(url, frontend) {
   ].includes(protocolHost);
 }
 
+let applyThemeToSites;
 function addUrlParams(url) {
   let protocolHost = `${url.protocol}//${url.host}`;
   let isChanged = false;
   console.log("Adding URL Params", protocolHost);
+  console.log("searchParams", url.searchParams);
+  let oldParams = { ...url.searchParams };
   if (
     [
       ...redirects.invidious.normal,
@@ -568,8 +552,10 @@ function addUrlParams(url) {
       ...invidiousTorCustomRedirects
     ].includes(protocolHost)
   ) {
-    if (!url.searchParams.has("dark_mode") && theme != "DEFAULT") {
-      url.searchParams.append("dark_mode", theme);
+
+    if (applyThemeToSites && !url.searchParams.has("dark_mode") && theme != 'DEFAULT') {
+      if (theme == 'dark') url.searchParams.append("dark_mode", true);
+      else if (theme == 'light') url.searchParams.append("dark_mode", false);
       isChanged = true;
     }
 
@@ -602,8 +588,8 @@ function addUrlParams(url) {
       url.searchParams.append("subtitles", invidiousSubtitles);
       isChanged = true;
     }
-
-  } else if (
+  }
+  else if (
     [
       ...redirects.piped.normal,
       ...redirects.piped.tor,
@@ -626,12 +612,13 @@ function addUrlParams(url) {
       url.searchParams.append("playerAutoPlay", autoplay);
       isChanged = true;
     }
-
   }
+
   if (isChanged) return url.href;
   else return;
 }
 
+
 function initPipedLocalStorage(tabId) {
   browser.tabs.executeScript(
     tabId,
@@ -670,7 +657,8 @@ async function init() {
         [
           "invidiousAlwaysProxy",
           "invidiousVideoQuality",
-          "youtubeTheme",
+          "theme",
+          "applyThemeToSites",
           "persistInvidiousPrefs",
           "disableYoutube",
           "OnlyEmbeddedVideo",
@@ -706,51 +694,53 @@ async function init() {
           "youtubeEmbedExceptions",
           "bypassWatchOnYoutube"
         ],
-        (result) => {
+        r => { // r = result
           redirects.invidious = dataJson.invidious;
-          if (result.youtubeRedirects) redirects = result.youtubeRedirects;
+          if (r.youtubeRedirects) redirects = r.youtubeRedirects;
+
+          disable = r.disableYoutube ?? false;
+          protocol = r.youtubeProtocol ?? 'normal';
+          frontend = r.youtubeFrontend ?? 'invidious';
+          youtubeEmbedFrontend = r.youtubeEmbedFrontend ?? 'invidious';
 
-          disable = result.disableYoutube ?? false;
-          protocol = result.youtubeProtocol ?? 'normal';
-          frontend = result.youtubeFrontend ?? 'invidious';
-          youtubeEmbedFrontend = result.youtubeEmbedFrontend ?? 'invidious';
+          theme = r.theme ?? 'DEFAULT';
+          applyThemeToSites = r.applyThemeToSites ?? false;
 
-          theme = result.youtubeTheme ?? 'DEFAULT';
-          volume = result.youtubeVolume ?? '--';
-          autoplay = result.youtubeAutoplay ?? 'DEFAULT';
+          volume = r.youtubeVolume ?? '--';
+          autoplay = r.youtubeAutoplay ?? 'DEFAULT';
 
-          invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? 'DEFAULT';
-          OnlyEmbeddedVideo = result.OnlyEmbeddedVideo ?? 'both';
-          invidiousVideoQuality = result.invidiousVideoQuality ?? 'DEFAULT';
-          invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'DEFAULT';
-          invidiousSubtitles = result.invidiousSubtitles || '';
+          invidiousAlwaysProxy = r.invidiousAlwaysProxy ?? 'DEFAULT';
+          OnlyEmbeddedVideo = r.OnlyEmbeddedVideo ?? 'both';
+          invidiousVideoQuality = r.invidiousVideoQuality ?? 'DEFAULT';
+          invidiousPlayerStyle = r.invidiousPlayerStyle ?? 'DEFAULT';
+          invidiousSubtitles = r.invidiousSubtitles || '';
 
-          invidiousNormalRedirectsChecks = result.invidiousNormalRedirectsChecks ?? [...redirects.invidious.normal];
-          invidiousNormalCustomRedirects = result.invidiousNormalCustomRedirects ?? [];
+          invidiousNormalRedirectsChecks = r.invidiousNormalRedirectsChecks ?? [...redirects.invidious.normal];
+          invidiousNormalCustomRedirects = r.invidiousNormalCustomRedirects ?? [];
 
-          invidiousTorRedirectsChecks = result.invidiousTorRedirectsChecks ?? [...redirects.invidious.tor];
-          invidiousTorCustomRedirects = result.invidiousTorCustomRedirects ?? [];
+          invidiousTorRedirectsChecks = r.invidiousTorRedirectsChecks ?? [...redirects.invidious.tor];
+          invidiousTorCustomRedirects = r.invidiousTorCustomRedirects ?? [];
 
-          pipedNormalRedirectsChecks = result.pipedNormalRedirectsChecks ?? [...redirects.piped.normal];
-          pipedNormalCustomRedirects = result.pipedNormalCustomRedirects ?? [];
+          pipedNormalRedirectsChecks = r.pipedNormalRedirectsChecks ?? [...redirects.piped.normal];
+          pipedNormalCustomRedirects = r.pipedNormalCustomRedirects ?? [];
 
-          pipedTorRedirectsChecks = result.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
-          pipedTorCustomRedirects = result.pipedTorCustomRedirects ?? [];
+          pipedTorRedirectsChecks = r.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
+          pipedTorCustomRedirects = r.pipedTorCustomRedirects ?? [];
 
 
-          pipedMaterialNormalRedirectsChecks = result.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
-          pipedMaterialNormalCustomRedirects = result.pipedMaterialNormalCustomRedirects ?? [];
+          pipedMaterialNormalRedirectsChecks = r.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
+          pipedMaterialNormalCustomRedirects = r.pipedMaterialNormalCustomRedirects ?? [];
 
-          pipedMaterialTorRedirectsChecks = result.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
-          pipedMaterialTorCustomRedirects = result.pipedMaterialTorCustomRedirects ?? [];
+          pipedMaterialTorRedirectsChecks = r.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
+          pipedMaterialTorCustomRedirects = r.pipedMaterialTorCustomRedirects ?? [];
 
-          persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
+          persistInvidiousPrefs = r.persistInvidiousPrefs ?? false;
 
-          alwaysUsePreferred = result.alwaysUsePreferred ?? true;
+          alwaysUsePreferred = r.alwaysUsePreferred ?? true;
 
-          bypassWatchOnYoutube = result.bypassWatchOnYoutube ?? true;
+          bypassWatchOnYoutube = r.bypassWatchOnYoutube ?? true;
 
-          if (result.youtubeEmbedExceptions) exceptions = result.youtubeEmbedExceptions;
+          if (r.youtubeEmbedExceptions) exceptions = r.youtubeEmbedExceptions;
 
           resolve();
         });
@@ -780,7 +770,6 @@ export default {
   changeInstance,
 
   isPipedorInvidious,
-  isUrlPipedorInvidious,
   addUrlParams,
 
   getDisable,
@@ -859,4 +848,4 @@ export default {
   isException,
 
   init,
-};
+};
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 57d72846..a3ead1da 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -14,9 +14,10 @@
     "128": "assets/images/libredirect-128.png"
   },
   "permissions": [
-    "storage",
     "webRequest",
     "webRequestBlocking",
+    "storage",
+    "cookies",
     "<all_urls>"
   ],
   "browser_action": {
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 7098f6e0..02e575c0 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -39,7 +39,7 @@ browser.storage.onChanged.addListener(wholeInit);
 let BYPASSTABs = [];
 
 browser.webRequest.onBeforeRequest.addListener(
-  (details) => {
+  details => {
     const url = new URL(details.url);
     let initiator;
     if (details.originUrl)
@@ -50,7 +50,7 @@ browser.webRequest.onBeforeRequest.addListener(
     var newUrl;
 
     if (!newUrl) newUrl = youtubeHelper.redirect(url, details, initiator)
-    if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type)) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
+    if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type, 'invidious')) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
     if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type)
 
     if (!newUrl) newUrl = twitterHelper.redirect(url, initiator);
@@ -77,6 +77,8 @@ browser.webRequest.onBeforeRequest.addListener(
 
     if (BYPASSTABs.includes(details.tabId)) newUrl = null;
 
+
+
     if (newUrl) {
       if (newUrl == 'CANCEL') {
         console.log(`Canceled ${url}`);
@@ -109,7 +111,11 @@ browser.tabs.onRemoved.addListener((tabId) => {
 
 browser.tabs.onUpdated.addListener(
   (tabId, changeInfo, _) => {
-    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
-    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
+    let url;
+    try { url = new URL(changeInfo.url); }
+    catch (_) { return }
+    if (youtubeHelper.isPipedorInvidious(url, 'main_frame', 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
+    if (twitterHelper.isNitter(url, 'main_frame')) newUrl = twitterHelper.initNitterCookies(url);
+    // if (changeInfo.url && youtubeHelper.isPipedorInvidious(url, 'main_frame', 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
     // if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'invidious')) youtubeHelper.initInvidiousCookies(tabId);
   });
\ No newline at end of file
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index ddfa931d..cf9615e7 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -90,13 +90,18 @@
     <div class="some-block option-block">
       <h4>Theme</h4>
       <select id="theme">
-        <option value="">System</option>
-        <option value="light-theme">Light</option>
-        <option value="dark-theme">Dark</option>
+        <option value="DEFAULT">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
       </select>
     </div>
 
     <div class="some-block option-block">
+      <h4>Apply Theme to sites</h4>
+      <input id="apply-theme-to-sites" type="checkbox" checked />
+    </div>
+
+    <div class="some-block option-block">
       <h4>Always use Preferred Instances</h4>
       <input id="always-use-preferred" type="checkbox" checked />
     </div>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 344af4aa..22c88143 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -4,43 +4,33 @@ window.browser = window.browser || window.chrome;
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 import generalHelper from "../../../assets/javascripts/helpers/general.js";
 
-let themeElement = document.getElementById("theme");
-
 
-browser.storage.local.get(
-  ["theme"],
-  (result) => {
-    themeElement.value = result.theme || "";
-
-  }
-);
-
-themeElement.addEventListener("change", (event) => {
-  const value = event.target.options[theme.selectedIndex].value;
-  browser.storage.local.set({ theme: value });
-});
 
-document.getElementById("update-instances").addEventListener("click", () => {
-  let oldHtml = document.getElementById("update-instances").innerHTML
-  document.getElementById("update-instances").innerHTML = '...';
+let updateInstancesElement = document.getElementById("update-instances");
+updateInstancesElement.addEventListener("click", () => {
+  let oldHtml = updateInstancesElement.innerHTML
+  updateInstancesElement.innerHTML = '...';
   if (commonHelper.updateInstances()) {
-    document.getElementById("update-instances").innerHTML = 'Done!';
+    updateInstancesElement.innerHTML = 'Done!';
     new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
-      () => document.getElementById("update-instances").innerHTML = oldHtml
+      () => updateInstancesElement.innerHTML = oldHtml
     )
   }
   else
-    document.getElementById("update-instances").innerHTML = 'Failed Miserabely';
+    updateInstancesElement.innerHTML = 'Failed Miserabely';
 });
 
 let exportSettingsElement = document.getElementById("export-settings");
 
 function exportSettings() {
-  browser.storage.local.get(null, result => {
-    let resultString = JSON.stringify(result, null, '  ');
-    exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
-    exportSettingsElement.download = 'libredirect-settings.json';
-  });
+  browser.storage.local.get(
+    null,
+    result => {
+      let resultString = JSON.stringify(result, null, '  ');
+      exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
+      exportSettingsElement.download = 'libredirect-settings.json';
+    }
+  );
 }
 exportSettings();
 
@@ -59,7 +49,6 @@ importSettingsElement.addEventListener("change",
 );
 
 let resetSettingsElement = document.getElementById("reset-settings");
-
 resetSettingsElement.addEventListener("click",
   () => {
     console.log("reset");
@@ -73,12 +62,24 @@ alwaysUsePreferredElement.addEventListener("change",
   event => generalHelper.setAlwaysUsePreferred(event.target.checked)
 );
 
+let applyThemeToSitesElement = document.getElementById("apply-theme-to-sites")
+applyThemeToSitesElement.addEventListener("change",
+  event => generalHelper.setApplyThemeToSites(event.target.checked)
+);
+let themeElement = document.getElementById("theme");
+themeElement.addEventListener("change", event => {
+  const value = event.target.options[theme.selectedIndex].value;
+  generalHelper.setTheme(value);
+})
+
 let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
 let instanceType = "url"
 
 generalHelper.init().then(() => {
   alwaysUsePreferredElement.checked = generalHelper.getAlwaysUsePreferred();
+  themeElement.value = generalHelper.getTheme();
+  applyThemeToSitesElement.checked = generalHelper.getApplyThemeToSites();
   console.log("generalHelper.getAlwaysUsePreferred()");
   instanceTypeElement.addEventListener("change",
     (event) => {
diff --git a/src/pages/options/init.js b/src/pages/options/init.js
index 6b196bfa..60958682 100644
--- a/src/pages/options/init.js
+++ b/src/pages/options/init.js
@@ -1,27 +1,30 @@
 window.browser = window.browser || window.chrome;
 
 function changeTheme() {
-    browser.storage.local.get("theme", (result) => {
-        switch (result.theme) {
-            case "dark-theme":
-                document.body.classList.add("dark-theme");
-                document.body.classList.remove("light-theme");
-                break;
-            case "light-theme":
-                document.body.classList.add("light-theme");
-                document.body.classList.remove("dark-theme");
-                break;
-            default:
-                if (matchMedia("(prefers-color-scheme: light)").matches) {
-                    document.body.classList.add("light-theme");
-                    document.body.classList.remove("dark-theme");
-                } else {
+    browser.storage.local.get(
+        "theme",
+        result => {
+            switch (result.theme) {
+                case "dark":
                     document.body.classList.add("dark-theme");
                     document.body.classList.remove("light-theme");
-                }
+                    break;
+                case "light":
+                    document.body.classList.add("light-theme");
+                    document.body.classList.remove("dark-theme");
+                    break;
+                default:
+                    if (matchMedia("(prefers-color-scheme: light)").matches) {
+                        document.body.classList.add("light-theme");
+                        document.body.classList.remove("dark-theme");
+                    } else {
+                        document.body.classList.add("dark-theme");
+                        document.body.classList.remove("light-theme");
+                    }
 
+            }
         }
-    })
+    )
 }
 
 changeTheme()
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 27c0ceff..347e9221 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -156,15 +156,6 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Theme</h4>
-        <select id="invidious-theme">
-          <option value="DEFAULT">Default</option>
-          <option value="dark">Dark</option>
-          <option value="light">Light</option>
-        </select>
-      </div>
-
-      <div class="some-block option-block">
         <h4>Autoplay Video</h4>
         <select id="invidious-autoplay">
           <option value="DEFAULT">Default</option>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 61c02e98..e480814a 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -86,11 +86,6 @@ disableYoutubeElement.addEventListener("change",
     event => youtubeHelper.setDisable(!event.target.checked)
 );
 
-let themeElement = document.getElementById("invidious-theme");
-themeElement.addEventListener("change",
-    event => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
-);
-
 let volumeElement = document.getElementById("invidious-volume");
 let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",
@@ -166,7 +161,6 @@ function changeProtocolSettings(protocol) {
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
-    themeElement.value = youtubeHelper.getTheme();
     volumeElement.value = youtubeHelper.getVolume();
     volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();