feat: implement theme changing

quick settings are now properly implemented

src/lib/QuickSetting.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+ import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+ import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+
+ import { crossfade, fade } from 'svelte/transition';
+ import { expoInOut } from 'svelte/easing';
+
+ const [send, receive] = crossfade({
+     duration: 350,
+     easing: expoInOut
+ });
+
+ import { createEventDispatcher } from "svelte";
+ const dispatch = createEventDispatcher();
+
+ export let enabled: boolean = false;
+ export let icon: IconDefinition | undefined = undefined;
+ export let chevron: IconDefinition | undefined = undefined;
+ export let title: string;
+ export let subtitle: string = "";
+
+ export let showMenu: boolean = false;
+ export let menu: {
+     title: string,
+     items?: {
+	 value: string,
+	 enabled?: boolean,
+     }[]
+ } = { title: "Menu" };
+
+ export let column: number | undefined = undefined, row: number | undefined = undefined;
+</script>
+
+{#if showMenu}
+    <div class="modal-background clickable" transition:fade="{{easing: expoInOut}}"
+	 on:click={() => showMenu = false} />
+    <div class="menu" in:send="{{key: 0}}" out:receive="{{key: 0}}">
+	<h1 class="no-select">{menu.title}</h1>
+	<div class="items d-flex col">
+	    {#each menu.items || [] as item}
+		<button class="item mb-8 radius-24 border-0 px-24 py-24"
+			class:enabled="{item.enabled}"
+			on:click={() => dispatch("menu:click", item.value)}
+		    >{item.value}</button>
+	    {/each}
+	</div>
+    </div>
+{:else}
+    <button in:send="{{key: 0}}" out:receive="{{key: 0}}"
+	    style:grid-row-start="{row}"
+	    style:grid-column-start="{column}"
+	    class:enabled="{enabled}"
+	    class="border-0 ma-8 radius-32 d-flex pa-8 no-select"
+	    on:click>
+	<div class="button-icon px-8">
+	    {#if icon}
+		<FontAwesomeIcon icon="{icon}" />
+	    {/if}
+	</div>
+	<div class="button-text d-flex col grow-1">
+	    <div class="title mb-2">
+		{title}
+	    </div>
+	    <div class="subtitle overflow-hidden">
+		{subtitle}
+	    </div>
+	</div>
+	<div class="button-icon px-8">
+	    {#if chevron}
+		<FontAwesomeIcon icon="{chevron}" />
+	    {/if}
+	</div>
+    </button>
+{/if}
+
+<style lang="scss">
+ .hide {
+     visibility: hidden;
+ }
+
+ button {
+     height: auto;
+     align-items: center;
+     text-align: start;
+     /* padding-left: 24px; */
+     font-size: 1.2em;
+     transition: background-color;
+     transition-duration: 250ms;
+     font-size: calc(15px + 0.390625vw);
+ }
+
+ button.enabled {
+     background: var(--base-600);
+     color: var(--base-700);
+ }
+ button:not(.enabled) {
+     background: var(--base-800);
+ }
+
+ .button-text {
+     min-width: 0;
+ }
+
+ button .title {
+     font-weight: bold;
+     font-size: .9em;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+ }
+ button .subtitle {
+     font-size: .85em;
+     font-weight: 300;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+ }
+
+ .menu {
+     position: absolute;
+     left: 50%;
+     top: 50%;
+     width: calc(100vw - 4em);
+     max-width: 32em;
+     max-height: calc(100vh - 4em);
+     overflow: auto;
+     transform: translate(-50%,-50%);
+     padding: 1em;
+     border-radius: 12px;
+     background: var(--base-700);
+     z-index: 300;
+ }
+
+ .modal-background {
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     background: rgba(0,0,0,0.3);
+     z-index: 300;
+ }
+
+ .items {
+
+ }
+
+</style>