fix: Colors

packages/www/src/App.tsx

@@ -14,6 +14,7 @@ import { AuthProvider, useAuth } from './providers/auth';
 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';
 
 const Root = styled("div", {
     base: {
@@ -87,12 +88,14 @@ export const App: Component = () => {
                 <Route
                     path="*"
                     component={(props) => (
-                        <AuthProvider>
-                            {props.children}
-                        </AuthProvider>
+                        // <AuthProvider>
+                            // {props.children}
+                            props.children
+                        // </AuthProvider>
                     )}
                 >
                     <Route path="play/:id" component={PlayComponent} />
+                    <Route path="test" component={TestComponent} />
                     <Route
                         path="/"
                         component={() => {

packages/www/src/index.tsx

@@ -8,7 +8,7 @@ import { render } from "solid-js/web";
 import "modern-normalize/modern-normalize.css";
 import { App } from "./App";
 import { StorageProvider } from "./providers/account";
-import { ToastProvider, Toaster } from "solid-notifications";
+// import { ToastProvider, Toaster } from "solid-notifications";
 
 const root = document.getElementById("root");
 
@@ -20,12 +20,12 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 
 render(
   () => (
-    <ToastProvider>
-      <Toaster />
+    // <ToastProvider>
+    //   <Toaster />
       <StorageProvider>
         <App />
       </StorageProvider>
-    </ToastProvider>
+    // </ToastProvider>
   ),
   root!
 );

packages/www/src/pages/play.tsx

@@ -5,7 +5,7 @@ import { useParams } from "@solidjs/router";
 import { Keyboard, Mouse, WebRTCStream } from "@nestri/input";
 import { Container, FullScreen } from "@nestri/www/ui/layout";
 import { styled } from "@macaron-css/solid";
-import { theme } from "../ui/theme";
+import { lightClass, theme, darkClass } from "@nestri/www/ui/theme";
 
 const Canvas = styled("canvas", {
   base: {
@@ -14,23 +14,27 @@ const Canvas = styled("canvas", {
     height: "100%",
     objectFit: "contain",
     maxHeight: "100vh",
-  }});
+  }
+});
 
 const ModalContainer = styled("div", {
   base: {
     width: "100%",
     maxWidth: 370,
     maxHeight: "75vh",
-      borderRadius: 12,
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderColor: theme.color.gray.d400,
-      backgroundColor: theme.color.pink.d400,
-      boxShadow: theme.color.boxShadow,
-      backdropFilter: "blur(20px)",
+    height: "auto",
+    // borderRadius: 12,
+    // borderWidth: 1,
+    // borderStyle: "solid",
+    // borderColor: theme.color.gray.d400,
+    // backgroundColor: theme.color.pink.d400,
+    backgroundColor: theme.color.red.d300,
+    // boxShadow: theme.color.boxShadow,
+    // backdropFilter: "blur(20px)",
     padding: "20px 25px"
   }
 })
+
 export function PlayComponent() {
   const params = useParams();
   const id = params.id;
@@ -240,6 +244,21 @@ export function PlayComponent() {
 
 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() {
@@ -250,6 +269,7 @@ export function PlayComponent() {
         <Portal>
           <Show when={open()}>
             <div
+              class={theme() === "light" ? lightClass : darkClass} id="styled"
               style={`
                   position: absolute;
                   inset: 0;

packages/www/src/pages/test.tsx

@@ -0,0 +1,18 @@
+import { styled } from "@macaron-css/solid";
+import { theme } from "../ui/theme";
+
+
+const Testing = styled("div", {
+    base: {
+        height: "100%",
+        width: "100%",
+        position: "fixed",
+        backgroundColor: theme.color.blue.d600
+    }
+})
+
+export default function TestComponent() {
+    return (
+        <Testing />
+    )
+}