✨ Add light + dark theme support

feat: conditionally load either light or dark theme
upptime · Feb 18, 2023 · 61a4967 · 61a4967
2 parents 8b71ab8 + a8a3782
commit 61a4967
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -11,10 +11,34 @@
   {/if}
   {#if (config["status-website"] || {}).themeUrl}
     <link rel="stylesheet" href={(config["status-website"] || {}).themeUrl} />
+  {:else if (config["status-website"] || {}).theme)}
+    <link
+      rel="stylesheet"
+      href={`${config.path}/themes/${config["status-website"].theme}.css`}
+    />
   {:else}
+    <!-- https://caniuse.com/prefers-color-scheme -->
+    <!-- https://web.dev/prefers-color-scheme/ -->
+    <script>
+      // If `prefers-color-scheme` is not supported, fall back to light mode.
+      // In this case, light.css will be downloaded with `highest` priority.
+      if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+        document.documentElement.style.display = 'none';
+        document.head.insertAdjacentHTML(
+          'beforeend',
+          '<link rel="stylesheet" href={`${config.path}/themes/light.css`} onload="document.documentElement.style.display = \'\'">',
+        );
+      }
+    </script>
+    <link
+      rel="stylesheet"
+      href={`${config.path}/themes/light.css`}
+      media="(prefers-color-scheme: light)"
+    />
     <link
       rel="stylesheet"
-      href={`${config.path}/themes/${(config["status-website"] || {}).theme || "light"}.css`}
+      href={`${config.path}/themes/dark.css`}
+      media="(prefers-color-scheme: dark)"
     />
   {/if}
   <link rel="stylesheet" href={`${config.path}/global.css`} />