Made it possible to import 3rd party themes

Author: Stephen10121

src/lib/ChangeThemeParams.svelte

@@ -20,7 +20,7 @@
     </div>
 </div>
 {#if theme === "CUSTOM"}
-    <LoadTemplate />
+    <LoadTemplate bind:customThemeJSON={customThemeJSON} />
 {/if}
 <Accordion.Root class="w-full" disabled={theme !== "CUSTOM"}>
     <Accordion.Item value="mainpagestyles">

src/lib/LoadTemplate.svelte

@@ -2,21 +2,61 @@
     import { Button } from "$lib/components/ui/button/index.js";
     import * as Popover from "$lib/components/ui/popover/index.js";
     import * as Select from "$lib/components/ui/select/index.js";
+    import { Label } from "$lib/components/ui/label/index.js";
+    import { Input } from "$lib/components/ui/input/index.js";
+    import { toast } from "svelte-sonner";
+    import { CANDY_THEME, DARK_THEME, LIGHT_THEME, type CustomTheme } from "./utils";
+
+    export let customThemeJSON: CustomTheme;
  
     const templates = [
         { value: "LIGHT", label: "Light Theme" },
         { value: "DARK", label: "Dark Theme" },
+        { value: "CANDY", label: "Candy Theme" },
         { value: "OTHER", label: "3rd party theme" }
     ];
 
-    let selectedTemplate: string;
+    let selectedTemplate: undefined | string;
+    let outsideURL = "";
+
+    async function loadOutsideTheme() {
+        if (outsideURL && outsideURL.length > 0) {
+            try {
+                const resp = await fetch(outsideURL);
+
+                if (resp.ok) {
+                    const respJSON = await resp.json();
+                    customThemeJSON = structuredClone(respJSON);
+
+                    toast.success("Success", { description: "Fetched the 3rd party theme!" });
+                } else {
+                    toast.error("Error", { description: "Failed to fetch 3rd party theme."});
+                }
+            } catch (err) {
+                console.log(err);
+                toast.error("Error", { description: "Failed to fetch 3rd party theme."});
+            }
+        } else {
+            toast.error("Error", { description: "Invalid link."});
+        }
+    }
+
+    function setTemplate(theme: string) {
+        if (theme === "LIGHT") {
+            customThemeJSON = structuredClone(LIGHT_THEME);
+        } else if (theme === "DARK") {
+            customThemeJSON = structuredClone(DARK_THEME);
+        } else if (theme === "CANDY") {
+            customThemeJSON = structuredClone(CANDY_THEME);
+        }
+    }
 
     $: {
-        console.log(selectedTemplate)
+        if (selectedTemplate) setTemplate(selectedTemplate);
     }
 </script>
 
-<Popover.Root>
+<Popover.Root onOutsideClick={() => selectedTemplate = undefined}>
     <Popover.Trigger asChild let:builder>
       <Button builders={[builder]} variant="outline">Load Template</Button>
     </Popover.Trigger>
@@ -37,6 +77,11 @@
                 </Select.Content>
                 <Select.Input />
             </Select.Root>
+            {#if selectedTemplate === "OTHER"}
+                <Label>3rd party url</Label>
+                <Input bind:value={outsideURL} placeholder="e.g. https://website.com/cooltheme.json" />
+                <Button on:click={loadOutsideTheme}>Load</Button>
+            {/if}
         </section>
     </Popover.Content>
 </Popover.Root>

src/lib/utils.ts

@@ -172,4 +172,26 @@ export const DARK_THEME: CustomTheme = {
 	tagFontSize: "0.6rem",
 	timeTextColor: "#fdfdfd",
 	timeTextFontSize: "clamp(0.8rem, 0rem + 1.4vw, 1rem)"
+}
+
+export const CANDY_THEME: CustomTheme = {
+	"backgroundColor": "#fff4e9",
+	"headerColor": "#8d6b94",
+	"dayTextColor": "#f5f5f5",
+	"dayOfWeekSize": "2rem",
+	"selectedDayTextColor": "#fff4e9",
+	"headerHeight": "80px",
+	"headerBoxShadow": "0px 8px 18px -18px rgb(0, 0, 0)",
+	"daySeparatorLineWidth": "1px",
+	"daySeparatorLineStyle": "solid",
+	"daySeparatorLineColor": "#b185a7",
+	"eventTitleColor": "#fff4e9",
+	"eventTitleFontSize": "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
+	"tagFontSize": "0.6rem",
+	"timeTextColor": "#000000",
+	"timeTextFontSize": "clamp(0.8rem, 0rem + 1.4vw, 1rem)",
+	"eventBackgroundColor": "#b185a7",
+	"resourceFontSize": "1rem",
+	"resourceTextColor": "#dbdbdb",
+	"eventBorderRadius": "15px"
 }

static/weirdTheme.json

@@ -0,0 +1,21 @@
+{
+    "backgroundColor": "#fff4e9",
+    "headerColor": "#ff0000",
+    "dayTextColor": "#f5f5f5",
+    "dayOfWeekSize": "2rem",
+    "selectedDayTextColor": "#fff4e9",
+    "headerHeight": "80px",
+    "headerBoxShadow": "0px 8px 18px -18px rgb(0, 0, 0)",
+    "daySeparatorLineWidth": "1px",
+    "daySeparatorLineStyle": "solid",
+    "daySeparatorLineColor": "#b185a7",
+    "eventTitleColor": "#fff4e9",
+    "eventTitleFontSize": "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
+    "tagFontSize": "0.6rem",
+    "timeTextColor": "#000000",
+    "timeTextFontSize": "clamp(0.8rem, 0rem + 1.4vw, 1rem)",
+    "eventBackgroundColor": "#b185a7",
+    "resourceFontSize": "1rem",
+    "resourceTextColor": "#dbdbdb",
+    "eventBorderRadius": "15px"
+}