fix(web): dark mode for portals

web/src/components/RelativeModal.jsx

@@ -1,6 +1,5 @@
 import { h, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
-import { DarkModeProvider } from '../context';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 
 const WINDOW_PADDING = 20;
@@ -76,7 +75,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
   }, [show, position.width, ref.current]);
 
   const menu = (
-    <DarkModeProvider>
+    <Fragment>
       <div className="absolute inset-0" onClick={handleDismiss} />
       <div
         className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
@@ -91,7 +90,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       >
         {children}
       </div>
-    </DarkModeProvider>
+    </Fragment>
   );
 
   return portalRoot ? createPortal(menu, portalRoot) : menu;

web/src/context/index.jsx

@@ -1,7 +1,7 @@
 import { h, createContext } from 'preact';
 import { get as getData, set as setData } from 'idb-keyval';
 import produce from 'immer';
-import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
+import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
 
 const DarkMode = createContext(null);
 
@@ -54,11 +54,15 @@ export function DarkModeProvider({ children }) {
     handleMediaMatch(query);
   }, [persistedMode]);
 
-  return (
-    <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>
-      <div className={`${currentMode === 'dark' ? 'dark' : ''}`}>{children}</div>
-    </DarkMode.Provider>
-  );
+  useLayoutEffect(() => {
+    if (currentMode === 'dark') {
+      document.body.classList.add('dark');
+    } else {
+      document.body.classList.remove('dark');
+    }
+  }, [currentMode]);
+
+  return <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>{children}</DarkMode.Provider>;
 }
 
 export function useDarkMode() {