fix: Have a root component

packages/www/src/App.tsx

@@ -15,19 +15,20 @@ import { Navigate, Route, Router } from "@solidjs/router";
 import { globalStyle, macaron$ } from "@macaron-css/core";
 import { Component, createSignal, Match, onCleanup, Switch } from 'solid-js';
 import TestComponent from './pages/test';
+import Root from './ui/root';
 
-const Root = styled("div", {
-    base: {
-        inset: 0,
-        lineHeight: 1,
-        fontSynthesis: "none",
-        color: theme.color.d1000.gray,
-        fontFamily: theme.font.family.body,
-        textRendering: "optimizeLegibility",
-        WebkitFontSmoothing: "antialised",
-        backgroundColor: theme.color.background.d100,
-    },
-});
+// const Root = styled("div", {
+//     base: {
+//         inset: 0,
+//         lineHeight: 1,
+//         fontSynthesis: "none",
+//         color: theme.color.d1000.gray,
+//         fontFamily: theme.font.family.body,
+//         textRendering: "optimizeLegibility",
+//         WebkitFontSmoothing: "antialised",
+//         backgroundColor: theme.color.background.d100,
+//     },
+// });
 
 globalStyle("html", {
     fontSize: 16,
@@ -65,25 +66,11 @@ globalStyle("*", {
 });
 
 export const App: Component = () => {
-    const [theme, setTheme] = createSignal<string>(
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light",
-    );
-
-    const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
-    const setColorScheme = (e: MediaQueryListEvent) => {
-        setTheme(e.matches ? "dark" : "light");
-    };
-    darkMode.addEventListener("change", setColorScheme);
-    onCleanup(() => {
-        darkMode.removeEventListener("change", setColorScheme);
-    });
-
+   
     const storage = useStorage();
 
     return (
-        <Root class={theme() === "light" ? lightClass : darkClass} id="styled">
+        <Root>
             <Router>
                 <Route
                     path="*"

packages/www/src/pages/play.tsx

@@ -6,6 +6,7 @@ import { Keyboard, Mouse, WebRTCStream } from "@nestri/input";
 import { Container, FullScreen } from "@nestri/www/ui/layout";
 import { styled } from "@macaron-css/solid";
 import { lightClass, theme, darkClass } from "@nestri/www/ui/theme";
+import Root from "../ui/root";
 
 const Canvas = styled("canvas", {
   base: {
@@ -244,21 +245,6 @@ interface ModalProps {
 
 function createModal() {
   const [open, setOpen] = createSignal(false);
-  const [theme, setTheme] = createSignal<string>(
-    window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light",
-  );
-
-  const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
-  const setColorScheme = (e: MediaQueryListEvent) => {
-    setTheme(e.matches ? "dark" : "light");
-  };
-  darkMode.addEventListener("change", setColorScheme);
-  onCleanup(() => {
-    darkMode.removeEventListener("change", setColorScheme);
-  });
-
 
   return {
     openModal() {
@@ -268,21 +254,22 @@ function createModal() {
       return (
         <Portal>
           <Show when={open()}>
-            <div
-              class={theme() === "light" ? lightClass : darkClass} id="styled"
-              style={`
+            <Root>
+              <div
+                style={`
                   position: absolute;
                   inset: 0;
                   display: flex;
                   justify-content: center;
                   align-items: center;
                 `}
-            >
-              <ModalContainer>
-                Hello from modal <br />
-                <button onClick={() => setOpen(false)}>close modal</button>
-              </ModalContainer>
-            </div>
+              >
+                <ModalContainer>
+                  Hello from modal <br />
+                  <button onClick={() => setOpen(false)}>close modal</button>
+                </ModalContainer>
+              </div>
+            </Root>
           </Show>
         </Portal>
       );

packages/www/src/ui/root.tsx

@@ -0,0 +1,40 @@
+import { createSignal, JSX, onCleanup } from "solid-js";
+import { useStorage } from "@nestri/www/providers/account";
+import { darkClass, lightClass, theme } from "./theme";
+import { styled } from "@macaron-css/solid";
+
+const BaseComponent = styled("div", {
+    base: {
+        inset: 0,
+        lineHeight: 1,
+        fontSynthesis: "none",
+        color: theme.color.d1000.gray,
+        fontFamily: theme.font.family.body,
+        textRendering: "optimizeLegibility",
+        WebkitFontSmoothing: "antialised",
+        backgroundColor: theme.color.background.d100,
+    },
+});
+
+export default function Root(props: { children: number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefined; }) {
+    const [theme, setTheme] = createSignal<string>(
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light",
+    );
+
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
+    const setColorScheme = (e: MediaQueryListEvent) => {
+        setTheme(e.matches ? "dark" : "light");
+    };
+    darkMode.addEventListener("change", setColorScheme);
+    onCleanup(() => {
+        darkMode.removeEventListener("change", setColorScheme);
+    });
+
+    return (
+        <BaseComponent class={theme() === "light" ? lightClass : darkClass} id="styled">
+            {props.children}
+        </BaseComponent>
+    )
+}