restructure themes

src/lib/runes.ts

@@ -2,14 +2,15 @@ import type { Lo, Course } from "$lib/services/models/lo-types";
 import { rune } from "./services/utils/runes.svelte";
 
 export const transitionKey = rune("");
+
 export const layout = rune("expanded");
 export const lightMode = rune("light");
+export const currentTheme = rune("tutors");
 
 export const currentLo = rune<Lo | null>(null);
 export const currentCourse = rune<Course | null>(null);
 export const courseUrl = rune("");
 export const currentLabStepIndex = rune(0);
-export const currentTheme = rune("tutors");
 
 export const cardHeight = rune("380px");
 export const headingText = rune("!text-lg font-semibold");

src/lib/services/models/course-utils.ts

@@ -1,4 +1,4 @@
-import { addIcon } from "$lib/ui/themes/theme-controller";
+import { addIcon } from "$lib/ui/themes/theme-controller.svelte";
 import type { Composite, Course, IconNav, Lo, LoType, Topic } from "./lo-types";
 import { filterByType, setShowHide } from "./lo-utils";
 

src/lib/ui/components/Card.svelte

@@ -12,7 +12,7 @@
     textSize
   } from "$lib/runes";
 
-  import { getTypeColour } from "../themes/theme-controller";
+  import { getTypeColour } from "../themes/theme-controller.svelte";
   import type { CardDetails } from "$lib/services/types.svelte";
   import Icon from "$lib/ui/components/Icon.svelte";
 

src/lib/ui/components/Icon.svelte

@@ -2,7 +2,7 @@
   import Icon from "@iconify/svelte";
 
   import { Tooltip } from "@skeletonlabs/skeleton-svelte";
-  import { getIcon } from "../themes/theme-controller";
+  import { getIcon } from "../themes/theme-controller.svelte";
 
   interface Props {
     type?: string;

src/lib/ui/learning-objects/content/Video.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import type { Lo } from "$lib/services/models/lo-types";
   import { currentCourse } from "$lib/runes";
-  import { getIcon } from "../../themes/theme-controller";
+  import { getIcon } from "../../themes/theme-controller.svelte";
 
   let firefox = $state(false);
 

src/lib/ui/themes/LayoutMenu.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
-  import { setDisplayMode, setTheme, themes } from "./theme-controller";
-  import { lightMode } from "$lib/runes";
+  import { setDisplayMode, setTheme, themes } from "./theme-controller.svelte";
+  import { currentTheme, lightMode } from "$lib/runes";
   import Menu from "$lib/ui/components/Menu.svelte";
   import { layout } from "$lib/runes";
   import MenuItem from "$lib/ui/components/MenuItem.svelte";
   import Icon from "../components/Icon.svelte";
 
-  let selectedTheme = localStorage.getItem("selectedTheme") || "tutors";
-
   function changeTheme(theme: string): void {
     setTheme(theme);
-    selectedTheme = theme;
-    localStorage.setItem("selectedTheme", theme);
   }
 
   function toggleDisplayMode(): void {
@@ -51,7 +47,7 @@
     {#each themes as theme}
       <MenuItem
         type="lightMode"
-        isActive={selectedTheme === theme.name}
+        isActive={currentTheme.value === theme.name}
         text={theme.name}
         onClick={() => changeTheme(theme.name)}
       />

src/lib/ui/themes/events/festive.svelte.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { lightMode } from "$lib/runes";
+import { snow } from "./snow";
+
+export async function makeItSnow() {
+  if (lightMode.value === "light") {
+    snow.background.color = "#ffffff"; // White background for light mode
+    snow.particles.color.value = "#e8d1d2"; // Red snowflakes in light mode
+  } else {
+    snow.background.color = "#000000"; // Black background for dark mode
+    snow.particles.color.value = "#ffffff"; // White snowflakes in dark mode
+  }
+
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  await loadSnowPreset(tsParticles);
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  tsParticles.load({
+    id: "tsparticles",
+    options: {
+      //preset: "snow",
+      ...snow,
+      fullScreen: {
+        enable: true,
+        zIndex: -1 // Set z-index here
+      }
+    }
+  });
+}
+
+export async function makeItStopSnowing() {
+  const element = document.getElementById("tsparticles");
+  if (element) {
+    element.remove();
+  }
+}

src/routes/snow.ts → src/lib/ui/themes/events/snow.ts

@@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { lightMode } from "../lib/runes";
-
-const snow = {
+export const snow = {
   // The background color is for making the particles visible since they're white. Remove this section if not needed
   background: {
     color: "#000000"
@@ -55,36 +52,3 @@ const snow = {
     }
   }
 };
-export async function makeItSnow() {
-  if (lightMode.value === "light") {
-    snow.background.color = "#ffffff";  // White background for light mode
-    snow.particles.color.value = "#e8d1d2"; // Red snowflakes in light mode
-  } else {
-    snow.background.color = "#000000";  // Black background for dark mode
-    snow.particles.color.value = "#ffffff"; // White snowflakes in dark mode
-  }
-
-  // @ts-expect-error
-  // eslint-disable-next-line no-undef
-  await loadSnowPreset(tsParticles);
-  // @ts-expect-error
-  // eslint-disable-next-line no-undef
-  tsParticles.load({
-    id: "tsparticles",
-    options: {
-      //preset: "snow",
-      ...snow,
-      fullScreen: {
-        enable: true,
-        zIndex: -1 // Set z-index here
-      }
-    }
-  });
-}
-
-export async function makeItStopSnowing() {
-  const element = document.getElementById("tsparticles");
-  if (element) {
-    element.remove();
-  }
-}

src/lib/ui/themes/theme-controller.ts → src/lib/ui/themes/theme-controller.svelte.ts

@@ -1,9 +1,9 @@
 import { currentTheme, lightMode } from "$lib/runes";
 import type { IconType } from "$lib/services/models/lo-types";
-
 import { FluentIconLib } from "./icons/fluent-icons";
 import { HeroIconLib } from "./icons/hero-icons";
 import { FestiveIcons } from "./icons/festive-icons";
+import { makeItSnow, makeItStopSnowing } from "./events/festive.svelte";
 
 export const themes = [
   { name: "tutors", icons: FluentIconLib },
@@ -15,10 +15,17 @@ export const themes = [
   { name: "cerberus", icons: FluentIconLib }
 ];
 
-export function setDisplayMode(mode: string): void {
-  if (!mode) {
-    mode = "light";
+export function initDisplay(): void {
+  if (localStorage.modeCurrent) {
+    lightMode.value = localStorage.modeCurrent;
+  } else {
+    lightMode.value = "light";
   }
+  setDisplayMode(localStorage.modeCurrent);
+  setTheme(localStorage.theme);
+}
+
+export function setDisplayMode(mode: string): void {
   lightMode.value = mode;
   localStorage.modeCurrent = mode;
   if (mode === "dark") {
@@ -39,6 +46,12 @@ export function setTheme(theme: string): void {
   }
   document.body.setAttribute("data-theme", currentTheme.value);
   localStorage.theme = currentTheme.value;
+
+  if (currentTheme.value === "festive") {
+    makeItSnow();
+  } else {
+    makeItStopSnowing();
+  }
 }
 
 export function getIcon(type: string): IconType {

src/routes/(auth)/auth/SigninWithGithub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getIcon } from "$lib/ui/themes/theme-controller";
+  import { getIcon } from "$lib/ui/themes/theme-controller.svelte";
   import Icon from "@iconify/svelte";
   import { Progress } from "@skeletonlabs/skeleton-svelte";
   import { tutorsConnectService } from "$lib/services/connect.svelte";

src/routes/+layout.svelte

@@ -4,9 +4,7 @@
   import type { PageData } from "./$types";
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
-  import { setDisplayMode, setTheme } from "$lib/ui/themes/theme-controller";
-  import { currentTheme } from "$lib/runes";
-  import { makeItSnow, makeItStopSnowing } from "./snow.ts";
+  import { initDisplay, setTheme } from "$lib/ui/themes/theme-controller.svelte";
 
   interface Props {
     data: PageData;
@@ -20,17 +18,7 @@
 
   onMount(async () => {
     if (browser) {
-      setDisplayMode(localStorage.modeCurrent);
-      setTheme(localStorage.theme);
-    }
-  });
-
-  $effect(() => {
-    console.log(currentTheme.value);
-    if (currentTheme.value === "festive") {
-      makeItSnow();
-    } else {
-      makeItStopSnowing();
+      initDisplay();
     }
   });
 </script>

tailwind.config.ts

@@ -1,11 +1,11 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import { skeleton, contentPath } from "@skeletonlabs/skeleton/plugin";
-import * as themes from "@skeletonlabs/skeleton/themes";
+import { nouveau, rose, cerberus } from "@skeletonlabs/skeleton/themes";
 import tutors from "./src/lib/ui/themes/styles/tutors";
 import classic from "./src/lib/ui/themes/styles/classic";
 import dyslexia from "./src/lib/ui/themes/styles/dyslexia";
-import festive from "./src/lib/ui/themes/styles/festive";
+import festive from "./src/lib/ui/themes/events/festive";
 import type { Config } from "tailwindcss";
 
 export default {
@@ -33,24 +33,7 @@ export default {
     typography,
     forms,
     skeleton({
-      // NOTE: each theme included will be added to your CSS bundle
-      themes: [
-        themes.cerberus,
-        themes.rose,
-        themes.nosh,
-        themes.mona,
-        themes.nosh,
-        themes.fennec,
-        tutors,
-        classic,
-        dyslexia,
-        festive,
-        themes.concord,
-        themes.nouveau,
-        themes.vintage,
-        themes.seafoam,
-        themes.wintry
-      ]
+      themes: [tutors, classic, dyslexia, festive, nouveau, rose, cerberus]
     })
   ]
 } satisfies Config;