Fix: flickering dark mode theme

EthanThatOneKid · May 22, 2024 · 4dfe0cf · 4dfe0cf
1 parent 992171f
commit 4dfe0cf
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -1,5 +1,20 @@
 import { sequence } from '@sveltejs/kit/hooks';
 import { shortener } from '$lib/server/links/shortener';
+import type { Handle } from '@sveltejs/kit';
+
+/**
+ * Handle the site's theme (light/dark) via cookies
+ */
+const handleTheme = (async ({ event, resolve }) => {
+  const theme = event.cookies.get('theme');
+
+  if (theme) {
+    return await resolve(event, {
+      transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`),
+    });
+  }
+  return await resolve(event);
+}) satisfies Handle;
 
 /** See: <https://kit.svelte.dev/docs/hooks#server-hooks> */
-export const handle = sequence(shortener());
+export const handle = sequence(shortener(), handleTheme);
diff --git a/src/lib/public/legacy/theme.ts b/src/lib/public/legacy/theme.ts
@@ -5,27 +5,28 @@ export enum AcmTheme {
   Dark = 'dark',
 }
 
-const STORAGE_KEY = 'theme';
+const ATTRIBUTE_KEY = 'data-theme';
 
 function get(): AcmTheme {
-  const savedValue = localStorage.getItem(STORAGE_KEY);
+  const savedValue = document.documentElement.getAttribute(ATTRIBUTE_KEY);
   if (savedValue === AcmTheme.Dark) return AcmTheme.Dark;
   if (savedValue === AcmTheme.Light) return AcmTheme.Light;
   return matchMedia('(prefers-color-scheme: dark)').matches ? AcmTheme.Dark : AcmTheme.Light;
 }
 
 function save(value: AcmTheme) {
-  localStorage.setItem(STORAGE_KEY, value);
+  document.documentElement.setAttribute(ATTRIBUTE_KEY, value);
+  // Set the cookie's max age value to a year
+  const period = 60 * 60 * 24 * 365;
+  document.cookie = `theme=${value}; max-age=${period}; path=/`;
 
   switch (value) {
     case AcmTheme.Dark: {
-      document.body.classList.add(AcmTheme.Dark);
-      document.body.classList.remove(AcmTheme.Light);
+      document.documentElement.setAttribute(ATTRIBUTE_KEY, AcmTheme.Dark);
       return;
     }
     default: {
-      document.body.classList.remove(AcmTheme.Dark);
-      document.body.classList.add(AcmTheme.Light);
+      document.documentElement.setAttribute(ATTRIBUTE_KEY, AcmTheme.Light);
       return;
     }
   }

diff --git a/static/global.css b/static/global.css
@@ -216,7 +216,7 @@ body:has(nav > input[type='checkbox']:checked) {
   font-size: var(--size-xs);
 }
 
-.light {
+html[data-theme='light'] {
   --acm-dark: #101315;
   --acm-light: #f8f8f8;
   --acm-canvas: #eaeaea;
@@ -230,7 +230,7 @@ body:has(nav > input[type='checkbox']:checked) {
   --button-color: var(--perma-light);
 }
 
-.dark {
+html[data-theme='dark'] {
   --acm-dark: #f8f8f8;
   --acm-light: #101315;
   --acm-canvas: #161b22;
@@ -246,7 +246,7 @@ body:has(nav > input[type='checkbox']:checked) {
 }
 
 @media (prefers-color-scheme: light) {
-  body:not(.dark) {
+  html:not([data-theme='dark']) {
     --acm-dark: #101315;
     --acm-light: #f8f8f8;
     --acm-canvas: #eaeaea;
@@ -263,7 +263,7 @@ body:has(nav > input[type='checkbox']:checked) {
 }
 
 @media (prefers-color-scheme: dark) {
-  body:not(.light) {
+  html:not([data-theme='light']) {
     --acm-dark: #f8f8f8;
     --acm-light: #101315;
     --acm-canvas: #161b22;