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>
-        <slot />
+        <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,45 +9,41 @@ 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>
-        <div class="w-full flex-grow">
+<SettingsLayout active="proxy" title="Proxy"> 
+    <div class="w-full flex-grow">
+        <div>
+            <p> Proxy Switcher </p>
+            <Dropdown id="pSwitcher" options={
+                [
+                    { name: 'Ultraviolet', value: 'uv', default: true },
+                    { name: 'Scramjet', value: 'sj' }
+                ]
+            } />
+        </div>
+        <div class="mt-2">
+            <p> Transport </p>
+            <Dropdown id="tSwitcher" options={
+                [
+                    { name: 'Libcurl', value: 'libcurl', default: true },
+                    { name: 'Epoxy', value: 'epoxy' }
+                ]
+            } />
+        </div>
+        <div class="mt-2">
+            <p> Search Engine </p>
+            <Dropdown id="sSwitcher" options={SearchEngineOptions} />
+        </div>
+        <div class="mt-2 w-80">
             <div>
-                <p> Proxy Switcher </p>
-                <Dropdown id="pSwitcher" options={
-                    [
-                        { name: 'Ultraviolet', value: 'uv', default: true },
-                        { name: 'Scramjet', value: 'sj' }
-                    ]
-                } />
+                <p> Wisp Server </p>
+                <Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" />
             </div>
-            <div class="mt-2">
-                <p> Transport </p>
-                <Dropdown id="tSwitcher" options={
-                    [
-                        { name: 'Libcurl', value: 'libcurl', default: true },
-                        { name: 'Epoxy', value: 'epoxy' }
-                    ]
-                } />
+            <div class="mt-2 mb-2 hidden" id="wispServerInfo">
+                <p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p>
             </div>
-            <div class="mt-2">
-                <p> Search Engine </p>
-                <Dropdown id="sSwitcher" options={SearchEngineOptions} />
-            </div>
-            <div class="mt-2 w-80">
-                <div>
-                    <p> Wisp Server </p>
-                    <Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" />
-                </div>
-                <div class="mt-2 mb-2 hidden" id="wispServerInfo">
-                    <p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p>
-                </div>
-                <div class="mt-2 flex flex-row gap-4">
-                    <Button id="wispServerSave" text="Save Changes" icon="lucide:save" />
-                    <Button id="wispServerReset" text="Reset" icon="lucide:rotate-ccw" />
-                </div>
+            <div class="mt-2 flex flex-row gap-4">
+                <Button id="wispServerSave" text="Save Changes" icon="lucide:save" />
+                <Button id="wispServerReset" text="Reset" icon="lucide:rotate-ccw" />
             </div>
         </div>
     </div>
@@ -56,11 +52,7 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
     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 = {