Expose a script for SPA that can be loaded early to make sure to avoid white flashes

Author: garronej

scripts/build/build.ts

@@ -106,6 +106,10 @@ import yargsParser from "yargs-parser";
     });
 
     fs.cpSync(pathJoin(__dirname, "main.css"), pathJoin(distDirPath, "main.css"));
+    fs.cpSync(
+        pathJoin(__dirname, "early-color-scheme.js"),
+        pathJoin(distDirPath, "early-color-scheme.js")
+    );
 
     fs.cpSync(pathJoin(dsfrDirPath, "favicon"), pathJoin(distDirPath, "favicon"), {
         "recursive": true

scripts/build/early-color-scheme.js

@@ -0,0 +1,89 @@
+/* eslint-disable no-undef */
+
+{
+    const isDark = (() => {
+        query_param: {
+            const value = new URLSearchParams(location.search).get("dark");
+
+            switch (value) {
+                case "true":
+                    return true;
+                case "false":
+                    return false;
+                default:
+                    break query_param;
+            }
+        }
+
+        local_storage: {
+            const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
+
+            if (colorSchemeReadFromLocalStorage === null) {
+                break local_storage;
+            }
+
+            if (colorSchemeReadFromLocalStorage === "system") {
+                break local_storage;
+            }
+
+            switch (colorSchemeReadFromLocalStorage) {
+                case "dark":
+                    return true;
+                case "light":
+                    return false;
+                default: 
+                    break local_storage;
+            }
+        }
+
+        return matchMedia("(prefers-color-scheme: dark)").matches;
+    })();
+
+    document.documentElement.setAttribute(
+        "data-fr-scheme",
+        (() => {
+            const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
+
+            if (colorSchemeReadFromLocalStorage === null) {
+                return "system";
+            }
+
+            return colorSchemeReadFromLocalStorage;
+        })()
+    );
+    document.documentElement.setAttribute("data-fr-theme", isDark ? "dark" : "light");
+
+    {
+        let element = document.getElementById("dsfr-root-color-scheme");
+
+        if (element !== null) {
+            element.remove();
+        }
+
+        element = document.createElement("style");
+
+        element.id = "dsfr-root-color-scheme";
+
+        element.innerHTML = `:root { color-scheme: ${isDark ? "dark" : "light"}; }`;
+
+        document.head.appendChild(element);
+    }
+
+    {
+        const name = "theme-color";
+
+        let element = document.querySelector(`meta[name=${name}]`);
+
+        if (element !== null) {
+            element.remove();
+        }
+
+        element = document.createElement("meta");
+
+        element.name = name;
+
+        element.content = isDark ? "#161616" : "#ffffff";
+
+        document.head.appendChild(element);
+    }
+}

src/useIsDark/client.ts

@@ -34,7 +34,11 @@ export type UseIsDark = () => {
 const $isAfterFirstEffect = createStatefulObservable(() => false);
 
 export function getIsDarkClientSide() {
-    return $isAfterFirstEffect.current ? $clientSideIsDark.current : ssrWasPerformedWithIsDark;
+    if ($isAfterFirstEffect.current) {
+        return $clientSideIsDark.current;
+    }
+    assert(ssrWasPerformedWithIsDark !== undefined);
+    return ssrWasPerformedWithIsDark;
 }
 
 function getSystemColorScheme() {
@@ -56,7 +60,7 @@ export const useIsDarkClientSide: UseIsDark = () => {
 
     const isDark =
         isFirstRenderingOfTheComponent || !$isAfterFirstEffect.current
-            ? ssrWasPerformedWithIsDark
+            ? (assert(ssrWasPerformedWithIsDark !== undefined), ssrWasPerformedWithIsDark)
             : $clientSideIsDark.current;
 
     const setIsDark = useConstCallback<ReturnType<UseIsDark>["setIsDark"]>(
@@ -97,7 +101,7 @@ export const useIsDarkClientSide: UseIsDark = () => {
     };
 };
 
-let ssrWasPerformedWithIsDark: boolean;
+let ssrWasPerformedWithIsDark: boolean | undefined = undefined;
 
 function getCurrentIsDarkFromHtmlAttribute(): boolean | undefined {
     const colorSchemeFromHtmlAttribute = document.documentElement.getAttribute(data_fr_theme);
@@ -114,6 +118,11 @@ function getCurrentIsDarkFromHtmlAttribute(): boolean | undefined {
     assert(false, `Unrecognized ${data_fr_theme} attribute value: ${colorSchemeFromHtmlAttribute}`);
 }
 
+// Warning: There is a ton of implicit coupling here,
+// scripts/build/early-color-scheme.js
+// and
+// src/useIsDark/scriptToRunAsap.ts
+// need to be updated if anything is changed here.
 export function startClientSideIsDarkLogic(params: {
     registerEffectAction: (action: () => void) => void;
     doPersistDarkModePreferenceWithCookie: boolean;