Moved the themes to the utils page because ill be using them in other places too.

Author: Stephen10121

src/lib/Calendar.svelte

@@ -3,7 +3,7 @@
     import type { EventData } from "$lib";
     import Day from "$lib/Day.svelte";
     import { onMount } from "svelte";
-    import type { CalendarThemes, CustomTheme } from "./utils";
+    import { DARK_THEME, LIGHT_THEME, type CalendarThemes, type CustomTheme } from "./utils";
 
     export let events: EventData[];
     export let theme: CalendarThemes;
@@ -18,48 +18,6 @@
 
     function chooseStyle() {
         let tempStyle = "";
-        const LIGHT_THEME: CustomTheme = {
-            "backgroundColor": "#ededed",
-            "headerColor": "#b3b3b3",
-            "dayTextColor": "#f5f5f5",
-            "dayOfWeekSize": "2rem",
-            "selectedDayTextColor": "#ffffff",
-            "headerHeight": "80px",
-            "headerBoxShadow": "0px 8px 18px -18px rgb(0, 0, 0)",
-            "daySeparatorLineWidth": "1px",
-            "daySeparatorLineStyle": "solid",
-            "daySeparatorLineColor": "#9e9e9e",
-            "eventBorderRadius": "3px",
-            "eventTitleColor": "#6a81a4",
-            "eventTitleFontSize": "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
-            "tagFontSize": "0.6rem",
-            "timeTextColor": "#545454",
-            "timeTextFontSize": "clamp(0.8rem, 0rem + 1.4vw, 1rem)",
-            "eventBackgroundColor": "#adadad",
-            "resourceFontSize": "1rem",
-            "resourceTextColor": "#ffffff"
-        }
-        const DARK_THEME: CustomTheme = {
-            backgroundColor: "#303030",
-            headerColor: "#212121",
-            dayTextColor: "#ffffff",
-            dayOfWeekSize: "2rem",
-            selectedDayTextColor: "#8AB4F4",
-            headerHeight: "80px",
-            headerBoxShadow: "0px 8px 18px -18px rgb(0, 0, 0)",
-            daySeparatorLineWidth: "1px",
-            daySeparatorLineStyle: "dashed",
-            daySeparatorLineColor: "#202020",
-            eventBackgroundColor: "#424242",
-            eventBorderRadius: "3px",
-            eventTitleColor: "#8AB4F4",
-            eventTitleFontSize: "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
-            resourceTextColor: "#ffffff",
-            resourceFontSize: "1rem",
-            tagFontSize: "0.6rem",
-            timeTextColor: "#fdfdfd",
-            timeTextFontSize: "clamp(0.8rem, 0rem + 1.4vw, 1rem)"
-        }
         if (theme === "CUSTOM") {
             for (let i=0;i<Object.keys(customTheme).length;i++) {
                 tempStyle += `--${Object.keys(customTheme)[i]}:${customTheme[Object.keys(customTheme)[i]]};`;

src/lib/utils.ts

@@ -128,4 +128,48 @@ export type CustomTheme = {
 	timeTextColor: string,
 	timeTextFontSize: string,
 	[key: string]: any
+}
+
+export const LIGHT_THEME: CustomTheme = {
+	"backgroundColor": "#ededed",
+	"headerColor": "#b3b3b3",
+	"dayTextColor": "#f5f5f5",
+	"dayOfWeekSize": "2rem",
+	"selectedDayTextColor": "#ffffff",
+	"headerHeight": "80px",
+	"headerBoxShadow": "0px 8px 18px -18px rgb(0, 0, 0)",
+	"daySeparatorLineWidth": "1px",
+	"daySeparatorLineStyle": "solid",
+	"daySeparatorLineColor": "#9e9e9e",
+	"eventBorderRadius": "3px",
+	"eventTitleColor": "#6a81a4",
+	"eventTitleFontSize": "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
+	"tagFontSize": "0.6rem",
+	"timeTextColor": "#545454",
+	"timeTextFontSize": "clamp(0.8rem, 0rem + 1.4vw, 1rem)",
+	"eventBackgroundColor": "#adadad",
+	"resourceFontSize": "1rem",
+	"resourceTextColor": "#ffffff"
+}
+
+export const DARK_THEME: CustomTheme = {
+	backgroundColor: "#303030",
+	headerColor: "#212121",
+	dayTextColor: "#ffffff",
+	dayOfWeekSize: "2rem",
+	selectedDayTextColor: "#8AB4F4",
+	headerHeight: "80px",
+	headerBoxShadow: "0px 8px 18px -18px rgb(0, 0, 0)",
+	daySeparatorLineWidth: "1px",
+	daySeparatorLineStyle: "dashed",
+	daySeparatorLineColor: "#202020",
+	eventBackgroundColor: "#424242",
+	eventBorderRadius: "3px",
+	eventTitleColor: "#8AB4F4",
+	eventTitleFontSize: "clamp(0.9rem, 0.6951rem + 0.6829vw, 1.25rem)",
+	resourceTextColor: "#ffffff",
+	resourceFontSize: "1rem",
+	tagFontSize: "0.6rem",
+	timeTextColor: "#fdfdfd",
+	timeTextFontSize: "clamp(0.8rem, 0rem + 1.4vw, 1rem)"
 }