Implement theme initialisation

Reinachan · Reinachan · commit 17dce9f02b53 · 2022-05-11T19:15:57.000+02:00
Runs before body has rendered to prevent flashes of unstyled content
diff --git a/index.html b/index.html
@@ -42,10 +42,22 @@
       name="twitter:description"
       content="Track, Discover and Share Anime and Manga"
     />
+
+    <!--  sets theme before body loads so that we don't get a flash of unstyled content.
+          Cannot be of type module, as that will run it after <body> has initialised  -->
+    <script src="/src/theme-init.ts"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/src/styles/index.css"
+      media="screen"
+    />
   </head>
 
   <body>
-    <div id="app"><!--ssr-outlet--></div>
+    <div id="app">
+      <!--ssr-outlet-->
+    </div>
     <script type="module" src="/src/entry-client.tsx"></script>
   </body>
 </html>
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
@@ -1,6 +1,6 @@
 /* stylelint-disable scale-unlimited/declaration-strict-value */
 
-.theme-dark {
+:root[data-theme='dark'] {
   /***** Color Palette *****/
   --red: #da5e51;
   --light-red: #fc755c;
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
@@ -1,6 +1,6 @@
 /* stylelint-disable scale-unlimited/declaration-strict-value */
 
-.theme-light {
+:root {
   /***** Color Palette *****/
   --red: #da5e51;
   --light-red: #fc755c;
diff --git a/src/styles/themes/oled.css b/src/styles/themes/oled.css
@@ -1,6 +1,6 @@
 /* stylelint-disable scale-unlimited/declaration-strict-value */
 
-.theme-oled {
+:root[data-theme='oled'] {
   /***** Color Palette *****/
   --red: #da5e51;
   --light-red: #fc755c;
diff --git a/src/theme-init.ts b/src/theme-init.ts
@@ -0,0 +1,19 @@
+// This file is imported directly in index.html to eliminate flash of unstyled content
+// Do NOT add an export statement to this, or it will break
+const themeKey = 'theme';
+
+const getPreferredTheme = (): string => {
+  const storedTheme = localStorage.getItem(themeKey);
+
+  return storedTheme ??
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+};
+
+const setTheme = () => {
+  const body = document.querySelector(':root');
+  body?.setAttribute(`data-${themeKey}`, getPreferredTheme());
+};
+
+setTheme();
diff --git a/tsconfig.head.json b/tsconfig.head.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "isolatedModules": false
+  },
+  "include": ["src/theme-init.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,5 +20,9 @@
     "isolatedModules": true,
     "allowJs": false
   },
-  "include": ["./src"]
+  "include": ["./src"],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.head.json" }
+  ]
 }
