fix(website): remove js execution on load by assigning themes sig on click (#939)

Author: maiieul

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'

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,

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 */