github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 16:55:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Portal mount

Browse Source
This commit is contained in:
Wanjohi
2025-03-03 23:47:00 +03:00
parent 4fd339b55f
commit fb0cb0b6ca
3 changed files with 29 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/www/src/App.tsx
View File

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

5
packages/www/src/pages/play.tsx
View File

@@ -6,7 +6,6 @@ import { Keyboard, Mouse, WebRTCStream } from "@nestri/input";
import { Container, FullScreen } from "@nestri/www/ui/layout"; import { Container, FullScreen } from "@nestri/www/ui/layout";
import { styled } from "@macaron-css/solid"; import { styled } from "@macaron-css/solid";
import { lightClass, theme, darkClass } from "@nestri/www/ui/theme"; import { lightClass, theme, darkClass } from "@nestri/www/ui/theme";
import Root from "../ui/root";
const Canvas = styled("canvas", { const Canvas = styled("canvas", {
base: { base: {
@@ -252,9 +251,8 @@ function createModal() {
}, },
Modal() { Modal() {
return ( return (
<Portal> <Portal mount={document.getElementById("styled")!}>
<Show when={open()}> <Show when={open()}>
<Root>
<div <div
style={` style={`
position: absolute; position: absolute;
@@ -269,7 +267,6 @@ function createModal() {
<button onClick={() => setOpen(false)}>close modal</button> <button onClick={() => setOpen(false)}>close modal</button>
</ModalContainer> </ModalContainer>
</div> </div>
</Root>
</Show> </Show>
</Portal> </Portal>
); );

40
packages/www/src/ui/root.tsx
View File

@@ -1,40 +0,0 @@
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>
)
}