From a697dc4fcd8f3353b4c1d754a64bd77ff25777d8 Mon Sep 17 00:00:00 2001
From: Steven H <shne24@gmail.com>
Date: Tue, 12 Mar 2024 10:09:14 +0000
Subject: [PATCH] Fix an error where a Theme nonce value could cause
 inconsistencies between server- and client-side rendering. (#237)

---
 src/app/(space)/ClientContexts.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/(space)/ClientContexts.tsx b/src/app/(space)/ClientContexts.tsx
index 11870d518..a1a8f9720 100644
--- a/src/app/(space)/ClientContexts.tsx
+++ b/src/app/(space)/ClientContexts.tsx
@@ -14,7 +14,16 @@ export function ClientContexts(props: {
     forcedTheme: CustomizationThemeMode | undefined;
     children: React.ReactNode;
 }) {
-    const { nonce, children, forcedTheme, language } = props;
+    const { children, forcedTheme, language } = props;
+
+    /**
+     * A bug in ThemeProvider is causing the nonce to be included incorrectly
+     * on the client-side. Original issue: https://github.com/pacocoursey/next-themes/issues/218
+     * 
+     * This is a workaround for it, until next-themes fixes it in their library. There is already
+     * a PR: https://github.com/pacocoursey/next-themes/pull/223
+     */
+    const nonce = typeof window === 'undefined' ? props.nonce : '';
 
     return (
         <ThemeProvider nonce={nonce} attribute="class" enableSystem forcedTheme={forcedTheme}>