implement darkmode

src/components/artDialog.svelte

@@ -4,7 +4,7 @@
 </script>
 
 {#if selectedImage}
-    <dialog open on:click={() => selectedImage = null} transition:fade={{ duration: 200 }}>
+    <dialog open class="open" on:click={() => selectedImage = null} transition:fade={{ duration: 200 }}>
         <img src={selectedImage} alt="">
         <button>Tap to close</button>
     </dialog>
@@ -18,7 +18,7 @@
         width: 100vw;
         height: 100vh;
         background: rgba(255, 255, 255, 0.6);
-        backdrop-filter: blur(15px);
+        backdrop-filter: blur(15px) saturate(150%);
         z-index: 100;
         border: none;
         margin: 0;
@@ -27,6 +27,9 @@
         justify-content: center;
         align-items: center;
     }
+    :global(.dark dialog[open].open.open) {
+        background: rgba(0, 0, 0, 0.6);
+    }
     dialog img {
         border-radius: 5px;
         max-height: 100%;

src/components/chapter.svelte

@@ -26,7 +26,7 @@
     }
 </script>
 
-<tr on:mouseenter={mouseenter} on:click={click} class:selected={selected} style="background-image: linear-gradient(to right, rgba(0, 255, 0, 0.247) {progress * 100}%, transparent {progress * 100}%)">
+<tr class="chapter item" on:mouseenter={mouseenter} on:click={click} class:selected={selected} style="background-image: linear-gradient(to right, rgba(0, 255, 0, 0.247) {progress * 100}%, transparent {progress * 100}%)">
     <td class="no-wrap">{chapter.attributes.volume ? "Vol " + chapter.attributes.volume : ""}</td>
     <td class="no-wrap">{chapter.attributes.chapter ? "Chapter " + chapter.attributes.chapter : ""}</td>
     <td>
@@ -55,12 +55,21 @@
     tr.selected {
         background: rgba(0,0,0,0.15);
     }
+    :global(.dark tr.chapter.item.selected) {
+        background: rgba(255,255,255,0.15);
+    }
     tr:hover {
         background: rgba(0,0,0,0.2);
     }
+    :global(.dark tr.chapter.item:hover) {
+        background: rgba(255,255,255,0.2);
+    }
     tr.selected:hover {
         background: rgba(0,0,0,0.25);
     }
+    :global(.dark tr.chapter.item.selected:hover) {
+        background: rgba(255,255,255,0.25);
+    }
     .no-wrap {
         white-space: nowrap;
     }
@@ -78,6 +87,9 @@
         text-align: right;
         padding-right: 10px;
     }
+    :global(.dark td.action.no-wrap) {
+        color: white;
+    }
 
     td.action:hover {
         text-decoration: underline;

src/pages/[manga]/index.svelte

@@ -560,6 +560,9 @@
         background: rgb(214, 214, 214);
         border-radius: 5px 0 5px 5px;
     }
+    :global(.dark main > .copyright.copyright.copyright) {
+        background: rgb(64, 64, 64);
+    }
     .copyright-header {
         background: rgb(214, 214, 214);
         padding: 10px;
@@ -567,6 +570,9 @@
         user-select: none;
         cursor: pointer;
     }
+    :global(.dark main > .flex .copyright-header) {
+        background: rgb(64, 64, 64);
+    }
     .copyright-header-active {
         border-radius: 5px 5px 0 0;
     }
@@ -605,6 +611,9 @@
         position: relative;
         transition: all .3s;
     }
+    :global(.dark .state) {
+        color: black;
+    }
 
     .state.idle {
         background: rgb(140, 209, 255);

src/pages/_layout.svelte

@@ -13,11 +13,32 @@
         });
         else console.warn("Page change; GoatCounter not loaded (yet?)", window.location.pathname);
         last = window.location.pathname;
-    })
+    });
+    
+    let defaultDarkmode = window && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    window && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        if(defaultDarkmode == darkmode) {
+            darkmode = event.matches;
+            defaultDarkmode = event.matches;
+        }
+    });
+    let darkmode = localStorage && localStorage.getItem("darkmode") || defaultDarkmode;
+
+    $: if(localStorage && darkmode !== defaultDarkmode) localStorage.setItem("darkmode", darkmode);
+
+    $: if(darkmode) {
+        document.body.classList.add("dark");
+    } else {
+        document.body.classList.remove("dark");
+    }
 </script>
 
+<button class="darkmode-toggle" class:dark={darkmode} on:click={() => darkmode = !darkmode}>{darkmode ? "Light" : "Dark"}</button>
+
 <!-- routify:options preload="proximity" -->
+<div class:dark={darkmode} class="main">
     <slot />
+</div>
 
 {#if $logs.length}
     <div class="flow">
@@ -28,6 +49,36 @@
 {/if}
 
 <style lang="postcss">
+    .darkmode-toggle {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 1000;
+        background: none;
+        border: none;
+        font-size: 1.5em;
+        padding: 0.5em;
+        cursor: pointer;
+    }
+    .main {
+        /* min-width: max(100%, 100vw);
+        min-height: max(100%, 100vh); */
+    }
+    .dark {
+        color: white;
+        background: black;
+    }
+    :global(body.dark) {
+        color: white;
+        background: black;
+    }
+    button.dark {
+        border: 2px solid white;
+        border-top-width: 0;
+        border-right-width: 0;
+        border-radius: 0;
+        border-bottom-left-radius: 5px;
+    }
     .flow {
         position: fixed;
         bottom: 0;