Merge pull request #876 from emmaroche/theme/festive-theme

update snow background for light mode and add new christmas icons to festive theme

src/lib/ui/themes/icons/festive-icons.ts

@@ -0,0 +1,62 @@
+export const FestiveIcons = {
+  // Home Icon
+  programHome: { type: "tabler:christmas-ball", color: "success" },
+
+  // companion Icons
+  slack: { type: "logos:slack-icon", color: "error" },
+  moodle: { type: "academicons:moodle", color: "warning" },
+  youtube: { type: "fa:youtube", color: "error" },
+  video: { type: "fluent:video-clip-24-filled", color: "error" },
+  zoom: { type: "fluent:video-24-filled", color: "primary" },
+  teams: { type: "logos:microsoft-teams", color: "bg-base-content" },
+
+  // LoTypes icons
+  course: { type: "fluent:notebook-24-filled", color: "primary" },
+  topic: { type: "twemoji:christmas-tree", color: "secondary" }, 
+  unit: { type: "fxemoji:fatherchristmas", color: "tertiary" },
+  side: { type: "fxemoji:fatherchristmas", color: "success" },
+  talk: { type: "fluent:presenter-24-filled", color: "warning" },
+  reference: { type: "fluent:document-copy-24-filled", color: "surface" },
+  lab: { type: "fluent:beaker-24-filled", color: "error" },
+  note: { type: "fluent:notepad-16-regular", color: "success" },
+  archive: { type: "fluent:archive-24-filled", color: "error" },
+  web: { type: "fluent:bookmark-24-regular", color: "primary" },
+  github: { type: "mdi:github", color: "warning" },
+  panelvideo: { type: "fluent:video-clip-24-regular", color: "error" },
+  paneltalk: { type: "fluent:presenter-24-filled", color: "primary" },
+  panelnote: { type: "fluent:notepad-16-regular", color: "warning" },
+
+  // pdf reader icons
+  left: { type: "fluent:ios-arrow-left-24-filled", color: "success" },
+  right: { type: "fluent:ios-arrow-right-24-filled", color: "success" },
+  print: { type: "fluent:print-24-filled", color: "success" },
+  rotate: { type: "fluent:arrow-rotate-clockwise-24-filled", color: "success" },
+  download: { type: "fluent:arrow-download-24-filled", color: "success" },
+  fullScreen: { type: "fluent:arrow-expand-24-filled", color: "success" },
+
+  // tutors time icons
+  online: { type: "fluent:presence-available-24-filled", color: "success" },
+  offline: { type: "fluent:presence-available-24-regular", color: "error" },
+  tutorsTime: { type: "fluent:clock-alarm-24-filled", color: "primary" },
+  timeExport: { type: "fluent:save-arrow-right-24-filled", color: "success" },
+  live: { type: "fluent:people-community-24-filled", color: "success" },
+
+  // app icons
+  search: { type: "fluent:search-24-filled", color: "primary" },
+  tutors: { type: "fa-solid:chalkboard-teacher", color: "bg-base-content" },
+  logout: { type: "fluent:sign-out-24-filled", color: "error" },
+  lightMode: { type: "fluent:paint-brush-24-filled", color: "warning" },
+  light: { type: "fluent:weather-sunny-32-filled", color: "warning" },
+  dark: { type: "fluent:weather-moon-48-filled", color: "warning" },
+  toc: { type: "fluent:line-horizontal-3-20-filled", color: "bg-base-content" },
+  compacted: { type: "fluent:re-order-dots-vertical-24-filled", color: "success" },
+  expanded: { type: "fluent:re-order-dots-horizontal-24-filled", color: "success" },
+  courseinfo: { type: "fluent:info-28-regular", color: "bg-base-content" },
+  calendar: { type: "fluent:calendar-ltr-12-regular", color: "bg-base-content" },
+  appSettings: { type: "fluent:settings-24-filled", color: "primary" },
+  listOnline: { type: "fluent:people-list-24-filled", color: "primary" },
+  edit: { type: "typcn:edit", color: "primary" },
+  info: { type: "fluent:info-28-regular", color: "primary" },
+  close: { type: "fluent:add-square-32-regular", color: "primary" },
+  default: { type: "fluent:re-order-dots-vertical-24-filled", color: "error" }
+};

src/lib/ui/themes/styles/icon-lib.svelte.ts

@@ -3,12 +3,13 @@ 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";
 
 export const themes = [
   { name: "tutors", icons: FluentIconLib },
   { name: "classic", icons: FluentIconLib },
   { name: "dyslexia", icons: FluentIconLib },
-  { name: "festive", icons: FluentIconLib },
+  { name: "festive", icons: FestiveIcons },
   { name: "nouveau", icons: FluentIconLib },
   { name: "concord", icons: FluentIconLib },
   { name: "nosh", icons: FluentIconLib },
@@ -60,6 +61,7 @@ export function getIcon(type: string): IconType {
 export function addIcon(type: string, icon: IconType) {
   FluentIconLib[type] = icon;
   HeroIconLib[type] = icon;
+  FestiveIcons[type] = icon;
 }
 
 export function getTypeColour(type: string): string {

src/routes/snow.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { lightMode } from "../lib/runes";
+
 const snow = {
   // The background color is for making the particles visible since they're white. Remove this section if not needed
   background: {
@@ -53,8 +55,15 @@ 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);