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>
+                        // <AuthProvider>
-                            {props.children}
+                            // {props.children}
-                        </AuthProvider>
+                            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>
+    // <ToastProvider>
-      <Toaster />
+    //   <Toaster />
       <StorageProvider>
         <App />
       </StorageProvider>
-    </ToastProvider>
+    // </ToastProvider>
   ),
   root!
 );

packages/www/src/pages/play.tsx

@@ -1,11 +1,11 @@
 import { Text } from "@nestri/www/ui/text";
-import { createSignal, createEffect, onCleanup, onMount, Show} from "solid-js";
+import { createSignal, createEffect, onCleanup, onMount, Show } from "solid-js";
 import { Portal } from "solid-js/web";
 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", {
+const ModalContainer = styled("div", {
   base: {
     width: "100%",
     maxWidth: 370,
     maxHeight: "75vh",
-      borderRadius: 12,
+    height: "auto",
-      borderWidth: 1,
+    // borderRadius: 12,
-      borderStyle: "solid",
+    // borderWidth: 1,
-      borderColor: theme.color.gray.d400,
+    // borderStyle: "solid",
-      backgroundColor: theme.color.pink.d400,
+    // borderColor: theme.color.gray.d400,
-      boxShadow: theme.color.boxShadow,
+    // backgroundColor: theme.color.pink.d400,
-      backdropFilter: "blur(20px)",
+    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;
@@ -48,7 +52,7 @@ export function PlayComponent() {
   const [canvas, setCanvas] = createSignal<HTMLCanvasElement | undefined>(undefined);
   let video: HTMLVideoElement;
   let webrtc: WebRTCStream;
-    let nestriMouse: Mouse , nestriKeyboard: Keyboard;
+  let nestriMouse: Mouse, nestriKeyboard: Keyboard;
 
   const initializeInputDevices = () => {
     const canvasElement = canvas();
@@ -171,7 +175,7 @@ export function PlayComponent() {
 
   onMount(() => {
     const canvasElement = canvas();
-      if(!canvasElement) return;
+    if (!canvasElement) return;
 
     setupPointerLockListener();
     video = document.createElement("video");
@@ -228,18 +232,33 @@ export function PlayComponent() {
       lockPlay={lockPlay} />
     </FullScreen>*/
   );
-  }
+}
 
-  interface ModalProps {
+interface ModalProps {
   show: () => boolean;
   setShow: (value: boolean) => void;
   closeOnBackdropClick?: boolean;
   handleVideoInput?: () => Promise<void>;
   lockPlay?: () => Promise<void>;
-  }
+}
 
-  function createModal() {
+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;
@@ -268,9 +288,9 @@ export function PlayComponent() {
       );
     },
   };
-  }
+}
 
-  function Modal(props: ModalProps) {
+function Modal(props: ModalProps) {
   return (
 
 
@@ -299,4 +319,4 @@ export function PlayComponent() {
       </div>
     </ModalContainer>
   );
-  }
+}

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 />
+    )
+}