feat: docker compose maybe

node_modules/@skeletonlabs/skeleton/dist/utilities/LightSwitch/LightSwitch.svelte

@@ -0,0 +1,78 @@
+<script>import { onMount } from "svelte";
+import { modeCurrent, setModeUserPrefers, setModeCurrent, setInitialClassState, getModeOsPrefers } from "./lightswitch.js";
+export let title = "Toggle light or dark mode.";
+export let bgLight = "bg-surface-50";
+export let bgDark = "bg-surface-900";
+export let fillLight = "fill-surface-50";
+export let fillDark = "fill-surface-900";
+export let width = "w-12";
+export let height = "h-6";
+export let ring = "ring-[1px] ring-surface-500/30";
+export let rounded = "rounded-token";
+const cTransition = `transition-all duration-[200ms]`;
+const cTrack = "cursor-pointer";
+const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
+const cIcon = "w-[70%] aspect-square";
+const svgPath = {
+  sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",
+  moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+};
+function onToggleHandler() {
+  $modeCurrent = !$modeCurrent;
+  setModeUserPrefers($modeCurrent);
+  setModeCurrent($modeCurrent);
+}
+function onKeyDown(event) {
+  if (["Enter", "Space"].includes(event.code)) {
+    event.preventDefault();
+    event.currentTarget.click();
+  }
+}
+onMount(() => {
+  if (!("modeCurrent" in localStorage)) {
+    setModeCurrent(getModeOsPrefers());
+  }
+});
+$:
+  trackBg = $modeCurrent === true ? bgLight : bgDark;
+$:
+  thumbBg = $modeCurrent === true ? bgDark : bgLight;
+$:
+  thumbPosition = $modeCurrent === true ? "translate-x-[100%]" : "";
+$:
+  iconFill = $modeCurrent === true ? fillLight : fillDark;
+$:
+  classesTrack = `${cTrack} ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${$$props.class ?? ""}`;
+$:
+  classesThumb = `${cThumb} ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`;
+$:
+  classesIcon = `${cIcon} ${iconFill}`;
+</script>
+
+<svelte:head>
+	<!-- Workaround for a svelte parsing error: https://github.com/sveltejs/eslint-plugin-svelte/issues/492 -->
+	{@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
+</svelte:head>
+
+<div
+	class="lightswitch-track {classesTrack}"
+	on:click={onToggleHandler}
+	on:click
+	on:keydown={onKeyDown}
+	on:keydown
+	on:keyup
+	on:keypress
+	role="switch"
+	aria-label="Light Switch"
+	aria-checked={$modeCurrent}
+	{title}
+	tabindex="0"
+>
+	<!-- Thumb -->
+	<div class="lightswitch-thumb {classesThumb}">
+		<!-- SVG -->
+		<svg class="lightswitch-icon {classesIcon}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+			<path d={$modeCurrent ? svgPath.sun : svgPath.moon} />
+		</svg>
+	</div>
+</div>

node_modules/@skeletonlabs/skeleton/dist/utilities/LightSwitch/LightSwitch.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        /** Customize the `title` attribute for the component.*/
+        title?: string | undefined;
+        /** Provide classes to set the light background color.*/
+        bgLight?: string | undefined;
+        /** Provide classes to set the dark background color.*/
+        bgDark?: string | undefined;
+        /** Provide classes to set the light SVG fill color.*/
+        fillLight?: string | undefined;
+        /** Provide classes to set the dark SVG fill color.*/
+        fillDark?: string | undefined;
+        /** Provide classes to set width styles.*/
+        width?: string | undefined;
+        /** Provide classes to set height styles. Should be half of width.*/
+        height?: string | undefined;
+        /** Provide classes to set ring styles.*/
+        ring?: string | undefined;
+        /** Provide classes to set border radius styles.*/
+        rounded?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LightSwitchProps = typeof __propDef.props;
+export type LightSwitchEvents = typeof __propDef.events;
+export type LightSwitchSlots = typeof __propDef.slots;
+export default class LightSwitch extends SvelteComponentTyped<LightSwitchProps, LightSwitchEvents, LightSwitchSlots> {
+}
+export {};

node_modules/@skeletonlabs/skeleton/dist/utilities/LightSwitch/lightswitch.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="svelte" />
+/** Store: OS Preference Mode */
+export declare const modeOsPrefers: import("svelte/store").Writable<boolean>;
+/** Store: User Preference Mode */
+export declare const modeUserPrefers: import("svelte/store").Writable<boolean | undefined>;
+/** Store: Current Mode State */
+export declare const modeCurrent: import("svelte/store").Writable<boolean>;
+/** Get the OS Preference for light/dark mode */
+export declare function getModeOsPrefers(): boolean;
+/** Get the User for light/dark mode */
+export declare function getModeUserPrefers(): boolean | undefined;
+/** Get the Automatic Preference light/dark mode */
+export declare function getModeAutoPrefers(): boolean;
+/** Set the User Preference for light/dark mode */
+export declare function setModeUserPrefers(value: boolean): void;
+/** Set the the current light/dark mode */
+export declare function setModeCurrent(value: boolean): void;
+/** Set the visible light/dark mode on page load. */
+export declare function setInitialClassState(): void;
+/** Automatically set the visible light/dark, updates on change. */
+export declare function autoModeWatcher(): void;

node_modules/@skeletonlabs/skeleton/dist/utilities/LightSwitch/lightswitch.js

@@ -0,0 +1,72 @@
+// Lightswitch Service
+import { get } from 'svelte/store';
+// DO NOT replace this ⬇ import, it has to be imported directly
+import { localStorageStore } from '../LocalStorageStore/LocalStorageStore.js';
+// Stores ---
+// TRUE: light, FALSE: dark
+/** Store: OS Preference Mode */
+export const modeOsPrefers = localStorageStore('modeOsPrefers', false);
+/** Store: User Preference Mode */
+export const modeUserPrefers = localStorageStore('modeUserPrefers', undefined);
+/** Store: Current Mode State */
+export const modeCurrent = localStorageStore('modeCurrent', false);
+// Get ---
+/** Get the OS Preference for light/dark mode */
+export function getModeOsPrefers() {
+    const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+    modeOsPrefers.set(prefersLightMode);
+    return prefersLightMode;
+}
+/** Get the User for light/dark mode */
+export function getModeUserPrefers() {
+    return get(modeUserPrefers);
+}
+/** Get the Automatic Preference light/dark mode */
+export function getModeAutoPrefers() {
+    const os = getModeOsPrefers();
+    const user = getModeUserPrefers();
+    const modeValue = user !== undefined ? user : os;
+    return modeValue;
+}
+// Set ---
+/** Set the User Preference for light/dark mode */
+export function setModeUserPrefers(value) {
+    modeUserPrefers.set(value);
+}
+/** Set the the current light/dark mode */
+export function setModeCurrent(value) {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = `dark`;
+    value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    modeCurrent.set(value);
+}
+// Lightswitch Utility
+/** Set the visible light/dark mode on page load. */
+export function setInitialClassState() {
+    const elemHtmlClasses = document.documentElement.classList;
+    // Conditions
+    const condLocalStorageUserPrefs = localStorage.getItem('modeUserPrefers') === 'false';
+    const condLocalStorageUserPrefsExists = !('modeUserPrefers' in localStorage);
+    const condMatchMedia = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // Add/remove `.dark` class to HTML element
+    if (condLocalStorageUserPrefs || (condLocalStorageUserPrefsExists && condMatchMedia)) {
+        elemHtmlClasses.add('dark');
+    }
+    else {
+        elemHtmlClasses.remove('dark');
+    }
+}
+// Auto-Switch Utility
+/** Automatically set the visible light/dark, updates on change. */
+export function autoModeWatcher() {
+    const mql = window.matchMedia('(prefers-color-scheme: light)');
+    function setMode(value) {
+        const elemHtmlClasses = document.documentElement.classList;
+        const classDark = `dark`;
+        value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    }
+    setMode(mql.matches);
+    mql.onchange = () => {
+        setMode(mql.matches);
+    };
+}