Fix initial render client side Next

Author: garronej

src/lib/darkMode.ts

@@ -59,9 +59,9 @@ const useIsDarkServerSide: UseIsDark = () => {
 export const useIsDark = isBrowser ? useIsDarkClientSide : useIsDarkServerSide;
 
 function getCurrentIsDarkFromHtmlAttribute(): boolean {
-    const colorSchemeReadFromDom = document.documentElement.getAttribute(data_fr_theme);
+    const colorSchemeReadFromHtmlAttribute = document.documentElement.getAttribute(data_fr_theme);
 
-    switch (colorSchemeReadFromDom) {
+    switch (colorSchemeReadFromHtmlAttribute) {
         case null:
         case "light":
             return false;

src/next.tsx

@@ -140,6 +140,21 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
 
     const colorSchemeKey = "dsfrColorScheme";
 
+    const isDarkFromHtmlAttribute = (() => {
+        if (!isBrowser) {
+            return undefined;
+        }
+
+        const colorSchemeReadFromHtmlAttribute =
+            document.documentElement.getAttribute(data_fr_theme);
+
+        if (colorSchemeReadFromHtmlAttribute === null) {
+            return undefined;
+        }
+
+        return colorSchemeReadFromHtmlAttribute as ColorScheme;
+    })();
+
     function withDsfr<AppComponent extends NextComponentType<any, any, any>>(
         App: AppComponent
     ): AppComponent {
@@ -148,7 +163,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
             ...props
         }: AppProps & Record<typeof colorSchemeKey, ColorScheme | undefined>) {
             if (colorScheme === undefined) {
-                colorScheme = "light";
+                colorScheme = isBrowser ? isDarkFromHtmlAttribute ?? "light" : "light";
             }
 
             useEffect(() => {