Update: Prepare for dark mode

src/class/Moodle/index.ts

@@ -48,3 +48,7 @@ Moodle.hidden.enable = () => {
 
     playCountUnderTextElement.innerHTML = "想定最大利用者乳首数：4,000";
 };
+
+Moodle.dark.enable = () => {
+    Moodle.dark.base.apply("#page");
+};

src/class/StorageTool/index.ts

@@ -1,5 +1,7 @@
 import IsTrue from "../../utils/isTrue";
 
+type Keys = "dark" | "rainbow" | "enabled-hidden" | "show-hidden-option" | "installed";
+
 export class StorageTool {
     id: string;
     constructor(id: string) {
@@ -11,7 +13,7 @@ export class StorageTool {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async set(key: string, value: any) {
+    async set(key: Keys, value: any) {
         let newData = { [key]: value };
         const storage = StorageTool.getChromeStorage();
         if (!storage) {
@@ -24,7 +26,7 @@ export class StorageTool {
 
         storage.set({ [this.id]: newData });
     }
-    async getBool(key: string) {
+    async getBool(key: Keys) {
         const storage = StorageTool.getChromeStorage();
         if (!storage) {
             console.error("Storage is not supported");
@@ -35,7 +37,7 @@ export class StorageTool {
 
         return IsTrue(rawdata);
     }
-    async get(key: string) {
+    async get(key: Keys) {
         const storage = StorageTool.getChromeStorage();
         if (!storage) {
             console.error("Storage is not supported");

src/class/UnivWebsite/index.ts

@@ -51,14 +51,15 @@ export class UnivWebsite<T> {
             site.dark.disable();
         }
 
-        const isHiddenEnabled = await new StorageTool("other").getBool("enabled-hidden");
+        const otherStorage = new StorageTool("other");
+        const isHiddenEnabled = await otherStorage.getBool("enabled-hidden");
         if (isHiddenEnabled) {
             document.documentElement.dataset.gaming_gundai_hidden = "true";
-            site.storage.set("hidden", "true");
+            otherStorage.set("enabled-hidden", "true");
             site.hidden.enable();
         } else {
             document.documentElement.dataset.gaming_gundai_hidden = "false";
-            site.storage.set("hidden", "false");
+            site.storage.set("enabled-hidden", "false");
             site.hidden.disable();
         }
     }

src/components/SwitchItem.tsx

@@ -6,21 +6,22 @@ import { useCallback, useEffect, useState } from "react";
 import { WebSites } from "../class";
 import IsTrue from "../utils/isTrue";
 import { FrontConfig } from "./config";
+import { Category } from "./type";
 
-export function SwitchItem({ config, className }: { config: FrontConfig; className?: string }) {
+export function SwitchItem({ config, className, category }: { config: FrontConfig; className?: string; category: Category }) {
     const [enabled, setEnabled] = useState(false);
 
     console.log(`Render SwitchItem with ${config.name}`);
     useEffect(() => {
-        WebSites[config.id].storage.get("enabled").then((value) => {
+        WebSites[config.id].storage.get(category).then((value) => {
             setEnabled(IsTrue(value));
         });
     }, []);
 
     const genericChangeHandle = useCallback(() => {
         return (e: React.ChangeEvent<HTMLInputElement>) => {
             setEnabled(e.target.checked);
-            WebSites[config.id].storage.set("enabled", e.target.checked.toString());
+            WebSites[config.id].storage.set(category, e.target.checked.toString());
             chrome.runtime.sendMessage("reload");
         };
     }, []);

src/components/Switches.tsx

@@ -1,11 +1,12 @@
 import { FrontConfigs } from "./config";
 import { SwitchItem } from "./SwitchItem";
+import { Category } from "./type";
 
-export function Switches({ className }: { className?: string }) {
+export function Switches({ className, category }: { className?: string; category: Category }) {
     return (
         <>
             {FrontConfigs.map((config) => {
-                return <SwitchItem config={config} key={config.id} className={className} />;
+                return <SwitchItem category={category} config={config} key={config.id} className={className} />;
             })}
         </>
     );

src/components/type.ts

@@ -0,0 +1 @@
+export type Category = "rainbow" | "dark";

src/options/pages/Top.tsx

@@ -10,9 +10,15 @@ import IsTrue from "../../utils/isTrue";
 export default function Top() {
     return (
         <>
-            <ConfigSection name="Websites" desc="有効化するウェブサイトを設定します">
+            <ConfigSection name="Rainbow Websites" desc="虹色にするウェブサイトを設定します">
                 <div className="flex flex-wrap">
-                    <Switches className=" flex-row-reverse items-center child:m-2" />
+                    <Switches className="flex-row-reverse items-center child:m-2" category="rainbow" />
+                </div>
+            </ConfigSection>
+
+            <ConfigSection name="Dark Websites" desc="ダークモードを有効化するウェブサイトを設定します">
+                <div className="flex flex-wrap">
+                    <Switches className="flex-row-reverse items-center child:m-2" category="dark" />
                 </div>
             </ConfigSection>
 

src/popup/components/Main.tsx

@@ -18,7 +18,7 @@ export default function Main(props: MainProps) {
         [],
     );
 
-    const switches = <Switches className="w-full justify-center child:w-1/2 child:text-center" />;
+    const switches = <Switches category="rainbow" className="w-full justify-center child:w-1/2 child:text-center" />;
     const hiddenMsg = <p className="text-center text-lg">設定画面を表示中はポップアップを利用できません</p>;
 
     return (

src/scripts/content_sso.ts

@@ -3,6 +3,4 @@ import "/styles/sso.css";
 import { SSO } from "../class";
 import loadGamingWebsite from "../utils/loadGamingWebsite";
 
-//window.addEventListener("load", async () => await runFuncIfEnabled(SSO.EnableRainbow));
-
 loadGamingWebsite(SSO);