Add dark mode (#32)

src/background.ts

@@ -3,6 +3,7 @@ import { BlockIndicator } from "./decorators/BlockIndicator";
 import { CorrectFinalPrice } from "./decorators/CorrectFinalPrice";
 import { PriceCheckerIndicator } from "./decorators/PriceCheckerIndicator";
 import { Language } from "./enums/Language";
+import { DarkModeHandler } from "./handlers/darkModeHandler";
 import { PromotionalVideoHandler } from "./handlers/promotionalVideoHandler";
 import { SponsoredFBTHandler } from "./handlers/sponsoredFBTHandler";
 import { SponsoredProductHandler } from "./handlers/sponsoredProductHandler";
@@ -13,89 +14,93 @@ import { retrieveVisibility } from "./retrievers/visibilityRetriever";
 import { State } from "./types/State";
 
 const state: State = {
-    visible: true,
-    language: Language.ENGLISH,
-    sponsoredCount: 0,
-    sponsoredShelfCount: 0,
-    videoCount: 0,
+  visible: true,
+  language: Language.ENGLISH,
+  sponsoredCount: 0,
+  sponsoredShelfCount: 0,
+  videoCount: 0,
+  darkMode: false,
 };
 
 const sponsoredShelfHandler = new SponsoredShelfHandler(state);
 const promotionalVideoHandler = new PromotionalVideoHandler(state);
 const sponsoredProductHandler = new SponsoredProductHandler(state);
 const sponsoredProductListHandler = new SponsoredProductListHandler(state);
 const sponsoredFBTHandler = new SponsoredFBTHandler(state);
+const darkModeHandler = new DarkModeHandler(state);
 
 const blockIndicator = new BlockIndicator(state);
 const btsIndicator = new PriceCheckerIndicator(state);
 const correctFinalPrice = new CorrectFinalPrice(state);
 
 (function () {
-    async function initializer() {
-        state.visible = retrieveVisibility();
-        state.language = retrieveLanguage();
+  async function initializer() {
+    state.visible = retrieveVisibility();
+    state.language = retrieveLanguage();
 
-        flagContent();
-        await flagAdditionalContent();
+    document.body.appendChild(darkModeHandler.createDarkModeToggle());
 
-        blockIndicator.addOrUpdate();
-    }
+    flagContent();
+    await flagAdditionalContent();
 
-    function flagContent() {
-        promotionalVideoHandler.flag();
-        sponsoredShelfHandler.flag();
-        sponsoredProductHandler.flag();
-        sponsoredProductListHandler.flag();
-        sponsoredFBTHandler.flag();
-    }
+    blockIndicator.addOrUpdate();
+  }
 
-    async function flagAdditionalContent() {
-        toggleContentVisibility(state);
-        await btsIndicator.start();
-        await correctFinalPrice.start();
-    }
+  function flagContent() {
+    promotionalVideoHandler.flag();
+    sponsoredShelfHandler.flag();
+    sponsoredProductHandler.flag();
+    sponsoredProductListHandler.flag();
+    sponsoredFBTHandler.flag();
+  }
+
+  async function flagAdditionalContent() {
+    toggleContentVisibility(state);
+    await btsIndicator.start();
+    await correctFinalPrice.start();
+  }
 
-    function observeMutations() {
-        const observer1 = new MutationObserver(() => flagContent());
-        const observer2 = new MutationObserver(
-            (mutationsList: MutationRecord[]) => {
-                for (const mutation of mutationsList) {
-                    if (
-                        mutation.type === "attributes" &&
+  function observeMutations() {
+    const observer1 = new MutationObserver(() => flagContent());
+    const observer2 = new MutationObserver(
+      (mutationsList: MutationRecord[]) => {
+        for (const mutation of mutationsList) {
+          if (
+            mutation.type === "attributes" &&
             mutation.attributeName === "id"
-                    ) {
-                        blockIndicator.addOrUpdate();
-                    }
-                }
-            }
-        );
+          ) {
+            blockIndicator.addOrUpdate();
+          }
+        }
+      }
+    );
 
-        observer1.observe(document.body, { childList: true, subtree: true });
-        observer2.observe(document.body, { attributes: true });
-    }
+    observer1.observe(document.body, { childList: true, subtree: true });
+    observer2.observe(document.body, { attributes: true });
+  }
 
-    window.onload = async function () {
-        await initializer();
-        observeMutations();
-    };
+  window.onload = async function () {
+    await initializer();
+    observeMutations();
+  };
 })();
 
 chrome.runtime.onMessage.addListener(
-    (
-        request: { action: string },
-        sender: chrome.runtime.MessageSender,
-        sendResponse: (response: {
+  (
+    request: { action: string },
+    sender: chrome.runtime.MessageSender,
+    sendResponse: (response: {
       sponsoredCount: number;
       sponsoredShelfCount: number;
       videoCount: number;
     }) => void
-    ) => {
-        if (request.action === "getCount") {
-            sendResponse({
-                sponsoredCount: state.sponsoredCount,
-                sponsoredShelfCount: state.sponsoredShelfCount,
-                videoCount: state.videoCount,
-            });
-        }
+  ) => {
+    if (request.action === "getCount") {
+      sendResponse({
+        sponsoredCount: state.sponsoredCount,
+        sponsoredShelfCount: state.sponsoredShelfCount,
+        videoCount: state.videoCount,
+      });
     }
+  }
 );

src/css/darkModeToggle.css

@@ -0,0 +1,28 @@
+.dark-mode-toggle {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 50px !important;
+  height: 50px !important;
+  padding: 8px !important;
+  border: 1px solid #bbbbbb !important;
+  border-radius: 50% !important;
+  background: #55868c !important;
+  color: #ffffff !important;
+  cursor: pointer !important;
+  position: fixed !important;
+  bottom: 20px !important;
+  left: 20px !important;
+  z-index: 9999 !important;
+}
+
+.dark-mode .dark-mode-toggle {
+  border-color: var(--dark-mode-border) !important;
+  color: var(--dark-mode-text) !important;
+}
+
+.dark-mode-toggle svg {
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 !important;
+}