diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html index 92cd48c5..3a9540a8 100644 --- a/src/pages/options/general/general.html +++ b/src/pages/options/general/general.html @@ -4,8 +4,9 @@ + - LibRedirect Options + LibRedirect options @@ -39,9 +40,9 @@ - - - + + + \ No newline at end of file diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js index 17b7a843..07097aaf 100644 --- a/src/pages/options/general/general.js +++ b/src/pages/options/general/general.js @@ -49,19 +49,6 @@ browser.storage.sync.get( themeElement.addEventListener("change", (event) => { const value = event.target.options[theme.selectedIndex].value; - switch (value) { - 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: - document.body.classList.remove("light-theme"); - document.body.classList.remove("dark-theme"); - } browser.storage.sync.set({ theme: value }); }); diff --git a/src/pages/options/init.js b/src/pages/options/init.js index 09b41fd8..deabd92f 100644 --- a/src/pages/options/init.js +++ b/src/pages/options/init.js @@ -1,3 +1,30 @@ -browser.storage.sync.get("theme", (result) => { - if (result.theme) document.body.classList.add(result.theme); -}) \ No newline at end of file +function changeTheme() { + browser.storage.sync.get("theme", (result) => { + console.log("Chaning Theme") + 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 { + document.body.classList.add("dark-theme"); + document.body.classList.remove("light-theme"); + } + + } + }) +} + +changeTheme() + +browser.storage.onChanged.addListener(changeTheme) + +window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", changeTheme) diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html index c7a5fbb7..94abd2e8 100644 --- a/src/pages/options/instagram/instagram.html +++ b/src/pages/options/instagram/instagram.html @@ -5,6 +5,7 @@ + diff --git a/src/pages/options/maps/maps.html b/src/pages/options/maps/maps.html index 79aa08ea..293a5e02 100644 --- a/src/pages/options/maps/maps.html +++ b/src/pages/options/maps/maps.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html index 4f3f853d..fc987d8c 100644 --- a/src/pages/options/medium/medium.html +++ b/src/pages/options/medium/medium.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html index 2e898895..92dd6696 100644 --- a/src/pages/options/reddit/reddit.html +++ b/src/pages/options/reddit/reddit.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html index 654292a8..53a72b57 100644 --- a/src/pages/options/search/search.html +++ b/src/pages/options/search/search.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html index efc43058..b9eed8e3 100644 --- a/src/pages/options/translate/translate.html +++ b/src/pages/options/translate/translate.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html index bd0b37e0..267a93ca 100644 --- a/src/pages/options/twitter/twitter.html +++ b/src/pages/options/twitter/twitter.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html index 72989228..a3eafc15 100644 --- a/src/pages/options/wikipedia/wikipedia.html +++ b/src/pages/options/wikipedia/wikipedia.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index bc0e8ef2..6bb213ac 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -5,8 +5,9 @@ + - LibRedirect Options: Twitter + LibRedirect options: Twitter diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index 52aa11f1..4a1e9874 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -84,6 +84,7 @@ + diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 11561d7b..8625cf9b 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -25,7 +25,6 @@ let disableMediumElement = document.querySelector("#disable-scribe"); window.browser = window.browser || window.chrome; async function wholeInit() { - console.log("staring async func") await youtubeHelper.init(); await twitterHelper.init(); await instagramHelper.init(); diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 1d2e9428..deabdc92 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -10,11 +10,6 @@ body { --light-grey: #c3c3c3; } -body.light-theme { - --text: #000; - --bg-main: #e3e7ea; - --bg-secondary: #fff; -} body { margin: auto; @@ -130,29 +125,6 @@ hr { border: none; } -.light-theme.popup, -.light-theme .popup { - background-color: var(--bg-secondary); -} - -body.light-theme { - --text: #000; - --bg-main: #e3e7ea; - --bg-secondary: #fff; -} - -body.light-theme textarea { - color: black; - border: 1px solid #767676; -} - -body.light-theme textarea:focus { - outline: none; -} - -body.light-theme a { - color: black; -} div.some-block { padding: 0 15px; @@ -301,22 +273,35 @@ button.add { cursor: pointer; } + +.light-theme.popup, +.light-theme .popup { + background-color: var(--bg-secondary); +} + +body.light-theme { + --text: black; + --bg-main: white; + --bg-secondary: #fff; + --active: #fb9817; +} + +body.light-theme select { + border: 1px solid black; +} + +body.light-theme textarea { + color: black; + border: 1px solid #767676; +} + +body.light-theme textarea:focus { + outline: none; +} + +body.light-theme a { + color: black; +} + @media (prefers-color-scheme: light) { - body { - --text: #000; - --text-secondary: #fff; - --bg-main: #e3e7ea; - --bg-secondary: #fff; - } - - body.dark-theme { - --text: #fff; - --text-secondary: #000; - --bg-main: #3c4043; - --bg-secondary: #292a2d; - } - - .popup { - background-color: var(--bg-secondary); - } } \ No newline at end of file