From 2deb8aa53bf30cd532f2405a1fd7be229d4fc210 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Mon, 2 Sep 2024 14:16:21 +0000
Subject: [PATCH] web: add fade-in animation

---
 web/src/app.html              | 47 ++++++++++++++++++++++++++++-------
 web/src/routes/+layout.svelte |  4 ++-
 2 files changed, 41 insertions(+), 10 deletions(-)
diff --git a/web/src/app.html b/web/src/app.html
index 10e4a9a8..41455c77 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -17,17 +17,46 @@
         <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/icons/apple-touch-icon.png">
 
         <link crossorigin="use-credentials" rel="manifest" href="%sveltekit.assets%/manifest.json">
-    </head>
-    <style>
-        body {
-            background-color: black;
-        }
-        @media (prefers-color-scheme: light) {
-            body {
+
+        <noscript>
+            <style>
+                #cobalt { opacity: 1 !important }
+            </style>
+        </noscript>
+
+        <style>
+            body, #body-dark {
+                background-color: black;
+            }
+
+            #body-light {
                 background-color: white;
             }
-        }
-    </style>
+
+            @media (prefers-color-scheme: light) {
+                body {
+                    background-color: white;
+                }
+            }
+
+            #cobalt {
+                opacity: 0;
+            }
+
+            #cobalt.loaded {
+                opacity: 1;
+                transition: opacity .2s ease-out;
+            }
+        </style>
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                let settings = localStorage.getItem('settings'), theme;
+                if (settings && ({ theme } = JSON.parse(settings)?.appearance)) {
+                    document.body.id = `body-${theme}`;
+                }
+            });
+        </script>
+    </head>
     <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
         <div style="display: contents">
             %sveltekit.body%
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 855b99a4..3c5b2c6a 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { afterNavigate } from "$app/navigation";
     import { updated } from "$app/stores";
+    import { browser } from "$app/environment";
 
     import env from "$lib/env";
     import settings from "$lib/state/settings";
@@ -46,9 +47,10 @@
     {/if}
 </svelte:head>
 
-<div style="display: contents" data-theme={$currentTheme} lang={$locale}>
+<div style="display: contents" data-theme={browser ? $currentTheme : undefined} lang={$locale}>
     <div
         id="cobalt"
+        class:loaded={browser}
         data-iphone={device.is.iPhone}
         data-reduce-motion={reduceMotion}
         data-reduce-transparency={reduceTransparency}
