Feat: theme switching

src/layouts/SettingsLayout.astro

@@ -4,13 +4,17 @@ import SettingsNav from "@components/SettingsNav.astro";
 import type { SettingsProps as Props } from "@utils/types.ts";
 
 //I love prop drilling
-const { active } = Astro.props;
+const { active, title } = Astro.props;
 ---
 <Layout>
     <div class="h-full w-full flex font-inter">
         <div class="w-1/4 bg-(--background) flex mt-14">
             <SettingsNav active={active} />
         </div>
+        <div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
+            <h1 class="text-4xl font-semibold"> {title} </h1>
+            <div class="border-b border-(--border) w-full mb-4"></div>
             <slot />
         </div>
+    </div>
 </Layout>

src/pages/[...settings]/appearance.astro

@@ -1,5 +1,48 @@
 ---
+import { readdir } from "node:fs/promises";
+import { join as pathJoin } from "node:path";
+
 import SettingsLayout from "@layouts/SettingsLayout.astro";
+import Dropdown from "@components/ui/Dropdown.astro";
+import { type DropdownOptions } from "@utils/types";
+
+const Themes: DropdownOptions[] = [{ name: 'Default', value: 'default' }];
+const files = await readdir(pathJoin(import.meta.dirname, '..', '..', 'styles', 'themes'), { encoding: 'utf-8' });
+files.forEach((name) => {
+    Themes.push({ 
+        name: name.toLowerCase().charAt(0).toUpperCase() + name.slice(1).replace('.css', ''), 
+        value: name.toLowerCase().replace('.css', '') 
+    });
+});
 ---
-<SettingsLayout active="appearance">
+<SettingsLayout active="appearance" title="Appearance">
+    <div class="w-full flex-grow">
+        <div>
+            <p> Themes </p>
+            <Dropdown id="themeSwitcher" options={Themes} />
+        </div>
+    </div>
 </SettingsLayout>
+
+<script>
+    import { Settings } from "@utils/settings";
+    import { StoreManager } from "@utils/storage";
+
+    const themes = async (settings: Settings, storage: StoreManager<"radius||settings">) => {
+        const dropdown = document.getElementById("dropdownBox-themeSwitcher") as HTMLSelectElement;
+        dropdown.value = storage.getVal('theme');
+        dropdown.addEventListener("change", async () => {
+            settings.theme(dropdown.value);
+        });
+    };
+
+    document.addEventListener("astro:page-load", async () => {
+        try {
+            const settings = await Settings.getInstance();
+            const storageManager = new StoreManager<"radius||settings">("radius||settings");
+            await themes(settings, storageManager);
+        } catch (err) {
+            console.log(err);
+        };
+    });
+</script>

src/pages/[...settings]/index.astro

@@ -9,10 +9,7 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
     { name: k, value: SearchEngines[k] }
 ));
 ---
-<SettingsLayout active="proxy">
-    <div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
-        <h1 class="text-4xl font-semibold"> Proxy </h1>
-        <div class="border-b border-(--border) w-full mb-4"></div>
+<SettingsLayout active="proxy" title="Proxy"> 
     <div class="w-full flex-grow">
         <div>
             <p> Proxy Switcher </p>
@@ -50,17 +47,12 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
             </div>
         </div>
     </div>
-    </div>
 </SettingsLayout>
 <script>
     import { Settings } from "@utils/settings.ts";
     import { SW } from "@utils/proxy.ts";
     import { StoreManager } from "@utils/storage";
-    import { SearchEngines, type DropdownOptions } from "@utils/types";
-    const SearchEngineOptions: DropdownOptions[] = [];
-    Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
-        { name: k, value: SearchEngines[k] }
-    ));
+    import { SearchEngines } from "@utils/types";
 
     type Options = {
         settings: Settings,
@@ -148,6 +140,8 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
             await proxy({settings, sw, storageManager});
             await searchEngine({settings, sw, storageManager});
             await wispServer({settings, sw, storageManager});
-        } catch (err) { console.log(err) }
+        } catch (err) {
+            //console.log(err);
+        }
     });
 </script>

src/pages/index.astro

@@ -104,7 +104,7 @@ const randomSplash = genSplash();
             await init();
         }
         catch (err) {
-            console.log(err);
+            //console.log(err);
         }
     })
 </script>

src/utils/types.ts

@@ -2,6 +2,7 @@ import type { Props } from "astro";
 
 interface SettingsProps extends Props {
     active: 'appearance' | 'credits' | 'links' | 'proxy';
+    title: string;
 }
 
 type DropdownOptions = {