aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/components/theme-switcher.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/components/theme-switcher.svelte')
-rw-r--r--old-apps/web-shared/src/components/theme-switcher.svelte215
1 files changed, 0 insertions, 215 deletions
diff --git a/old-apps/web-shared/src/components/theme-switcher.svelte b/old-apps/web-shared/src/components/theme-switcher.svelte
deleted file mode 100644
index 6f86875..0000000
--- a/old-apps/web-shared/src/components/theme-switcher.svelte
+++ /dev/null
@@ -1,215 +0,0 @@
-<script lang="ts">
- import {base_domain, CookieNames} from "$shared/lib/configuration";
- import {get_cookie, set_cookie} from "$shared/lib/helpers";
- import {onMount} from "svelte";
-
- type theme = "system"|"dark"|"light";
-
- export let show = false;
- export let glow = false;
- export let selection: theme = "system";
- export let size;
- let prefers = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
- onMount(() => {
- selection = get_cookie(CookieNames.theme) as theme;
- document.addEventListener("keydown", (e) => {
- if (e.code === "Escape") show = false;
- });
- document.addEventListener("click", (e: any) => {
- if (e.target.closest("[data-theme-switcher-element]") === null) show = false;
- });
- });
- let html = document.querySelector("html");
-
- window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
- prefers = event.matches ? "dark" : "light";
- });
-
- $: switch (selection || prefers) {
- case "system":
- html.dataset.theme = prefers;
- break;
- case "light":
- html.dataset.theme = "light";
- break;
- case "dark":
- html.dataset.theme = "dark";
- break;
- }
-
- function change(to: theme) {
- selection = to;
- set_cookie(CookieNames.theme, selection, base_domain());
- }
-</script>
-
-<div class="bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md {glow ? 'inner-glow shadow-xs' : ''}"
- class:is-hidden={!show}
- data-theme-switcher-element
- role="listbox">
- <div class="flex flex-wrap flex-column"
- role="group">
- <div class="margin-bottom-xs flex-grow">
- <span class="text-xs color-contrast-medium">Appearance</span>
- </div>
- <div class="flex gap-xs flex-row">
- <div class="ld-switch-popover__option"
- aria-selected="{selection === 'dark' ? 'true' : 'false'}"
- role="option">
- <figure class="radius-md inner-glow"
- on:click={() => change("dark")}>
- <svg id="Layer_1"
- class="block radius-inherit"
- data-name="Layer 1"
- xmlns="http://www.w3.org/2000/svg"
- width="70"
- height="50"
- viewBox="0 0 70 50">
- <rect width="70"
- height="50"
- fill="#22232a"/>
- <path d="M14,10H70V50H10V14A4,4,0,0,1,14,10Z"
- fill="#5a5c63"/>
- <circle cx="18"
- cy="18"
- r="3"
- fill="#22232a"/>
- <circle cx="27"
- cy="18"
- r="3"
- fill="#22232a"/>
- <circle cx="36"
- cy="18"
- r="3"
- fill="#22232a"/>
- <rect x="17"
- y="28"
- width="46"
- height="3"
- rx="1"
- fill="#fafaff"/>
- <rect x="17"
- y="34"
- width="46"
- height="3"
- rx="1"
- fill="#fafaff"/>
- <rect x="17"
- y="40"
- width="30"
- height="3"
- rx="1"
- fill="#fafaff"/>
- </svg>
- </figure>
- <div class="text-xs margin-top-xxxs padding-x-xxxxs">Dark</div>
- </div>
- <div class="ld-switch-popover__option"
- aria-selected="{selection === 'light' ? 'true' : 'false'}"
- role="option">
- <figure class="radius-md inner-glow"
- on:click={() => change("light")}>
- <svg id="Layer_1"
- class="block radius-inherit"
- data-name="Layer 1"
- xmlns="http://www.w3.org/2000/svg"
- width="70"
- height="50"
- viewBox="0 0 70 50">
- <rect width="70"
- height="50"
- fill="#e5e5e6"/>
- <path d="M14,10H70a0,0,0,0,1,0,0V50a0,0,0,0,1,0,0H10a0,0,0,0,1,0,0V14A4,4,0,0,1,14,10Z"
- fill="#fff"/>
- <circle cx="18"
- cy="18"
- r="3"
- fill="#e5e5e6"/>
- <circle cx="27"
- cy="18"
- r="3"
- fill="#e5e5e6"/>
- <circle cx="36"
- cy="18"
- r="3"
- fill="#e5e5e6"/>
- <rect x="17"
- y="28"
- width="46"
- height="3"
- rx="1"
- fill="#38393e"/>
- <rect x="17"
- y="34"
- width="46"
- height="3"
- rx="1"
- fill="#38393e"/>
- <rect x="17"
- y="40"
- width="30"
- height="3"
- rx="1"
- fill="#38393e"/>
- </svg>
- </figure>
- <div class="text-xs margin-top-xxxs padding-x-xxxxs">Light</div>
- </div>
- <div class="ld-switch-popover__option"
- aria-selected="{selection === 'system' ? 'true' : 'false'}"
- role="option">
- <figure class="radius-md inner-glow"
- on:click={() => change("system")}>
- <svg id="Layer_1"
- data-name="Layer 1"
- xmlns="http://www.w3.org/2000/svg"
- class="block radius-inherit"
- width="70"
- height="50"
- viewBox="0 0 70 50">
- <rect width="35"
- height="50"
- fill="#e5e5e6"/>
- <path d="M14,10H35a0,0,0,0,1,0,0V50a0,0,0,0,1,0,0H10a0,0,0,0,1,0,0V14A4,4,0,0,1,14,10Z"
- fill="#fff"/>
- <circle cx="18"
- cy="18"
- r="3"
- fill="#e5e5e6"/>
- <circle cx="27"
- cy="18"
- r="3"
- fill="#e5e5e6"/>
- <path d="M18,28H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V29A1,1,0,0,1,18,28Z"
- fill="#38393e"/>
- <path d="M18,34H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V35A1,1,0,0,1,18,34Z"
- fill="#38393e"/>
- <path d="M18,40H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V41A1,1,0,0,1,18,40Z"
- fill="#38393e"/>
- <rect x="35"
- width="35"
- height="50"
- fill="#22232a"/>
- <path d="M49,10H70V50H45V14A4,4,0,0,1,49,10Z"
- fill="#5a5c63"/>
- <circle cx="53"
- cy="18"
- r="3"
- fill="#22232a"/>
- <circle cx="62"
- cy="18"
- r="3"
- fill="#22232a"/>
- <path d="M53,28H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V29A1,1,0,0,1,53,28Z"
- fill="#fafaff"/>
- <path d="M53,34H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V35A1,1,0,0,1,53,34Z"
- fill="#fafaff"/>
- <path d="M53,40H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V41A1,1,0,0,1,53,40Z"
- fill="#fafaff"/>
- </svg>
- </figure>
- <div class="text-xs margin-top-xxxs padding-x-xxxxs">System</div>
- </div>
- </div>
- </div>
-</div>
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 13:13:56 +0200