From 619014450c490542d0b697f9fbb6bf4a606240a3 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@gmail.com>
Date: Mon, 19 Aug 2024 02:09:18 +0200
Subject: [PATCH] fix(website): remove js execution on load by assigning themes
 sig on click

---
 .../src/components/copy-css-config/copy-css-config.tsx      | 3 ++-
 packages/themes/src/lib/provider.tsx                        | 6 ++----
 packages/themes/src/lib/types.ts                            | 4 ++++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
index 85424cd5f..f4ef794e6 100644
--- a/apps/website/src/components/copy-css-config/copy-css-config.tsx
+++ b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -12,12 +12,13 @@ export default component$(() => {
 
   const cssThemeOutput = useSignal<string>('');
 
-  const { themeSig } = useTheme();
+  const { themeSig, defaultTheme, storageKey } = useTheme();
 
   return (
     <Modal.Root bind:show={showSig}>
       <Button
         onClick$={() => {
+          themeSig.value = localStorage.getItem(storageKey) ?? defaultTheme;
           cssThemeOutput.value = extractThemeCSS(
             themeSig.value === 'dark' || themeSig.value === 'light'
               ? 'border-radius-0 simple primary-cyan-600 light base-slate'
diff --git a/packages/themes/src/lib/provider.tsx b/packages/themes/src/lib/provider.tsx
index 9698a7464..53acfda78 100644
--- a/packages/themes/src/lib/provider.tsx
+++ b/packages/themes/src/lib/provider.tsx
@@ -71,13 +71,9 @@ export const ThemeProvider = component$<ThemeProviderProps>(
       }
     });
 
-    // DO NOT UNCOMMENT. THIS CAUSES BUNDLE ISSUE ACROSS SITE -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
     // eslint-disable-next-line qwik/no-use-visible-task -- not possible atm to useOnWindow for a MediaQueryList event
     useVisibleTask$(
       ({ cleanup }) => {
-        setTimeout(() => {
-          themeSig.value = localStorage.getItem(storageKey) || defaultTheme;
-        }, 2000);
         const media = window.matchMedia('(prefers-color-scheme: dark)');
 
         const handleMediaQuery = $(async (e: MediaQueryListEvent | MediaQueryList) => {
@@ -133,9 +129,11 @@ export const ThemeProvider = component$<ThemeProviderProps>(
     });
 
     useContextProvider(ThemeContext, {
+      defaultTheme,
       themeSig,
       resolvedThemeSig,
       forcedTheme,
+      storageKey,
       systemTheme: (enableSystem ? resolvedThemeSig.value : undefined) as
         | SystemTheme
         | undefined,
diff --git a/packages/themes/src/lib/types.ts b/packages/themes/src/lib/types.ts
index 6385f4893..b1d754824 100644
--- a/packages/themes/src/lib/types.ts
+++ b/packages/themes/src/lib/types.ts
@@ -9,12 +9,16 @@ export type SystemTheme = 'dark' | 'light';
 export type Theme = 'dark' | 'light' | string | string[] | undefined;
 
 export interface UseThemeProps {
+  // system or light
+  defaultTheme: string;
   /** theme signal */
   themeSig: Signal<Theme>;
   /** Forced theme name for the current page */
   resolvedThemeSig: Signal<Theme>;
   /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
   forcedTheme: string | undefined;
+  // localStorage key
+  storageKey: string;
   /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
   systemTheme: SystemTheme | undefined;
   /** List of all available theme names */