diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
index 03b0b41ab..699473ed0 100644
--- a/src/viser/client/src/App.tsx
+++ b/src/viser/client/src/App.tsx
@@ -18,12 +18,12 @@ import { SynchronizedCameraControls } from "./CameraControls";
import {
Anchor,
Box,
+ ColorSchemeScript,
Image,
MantineProvider,
Modal,
Tooltip,
createTheme,
- useMantineColorScheme,
useMantineTheme,
} from "@mantine/core";
import React, { useEffect } from "react";
@@ -162,65 +162,69 @@ function ViewerContents() {
const colors = viewer.useGui((state) => state.theme.colors);
const control_layout = viewer.useGui((state) => state.theme.control_layout);
return (
-
-
-
-
+
+
-
+
+
+
({
- backgroundColor: dark_mode ? theme.colors.dark[9] : "#fff",
+ style={{
+ // Put the canvas and control panel side-by-side.
+ width: "100%",
+ position: "relative",
flexGrow: 1,
overflow: "hidden",
- height: "100%",
- })}
+ display: "flex",
+ }}
>
-
-
-
-
- {viewer.useGui((state) => state.theme.show_logo) ? (
-
- ) : null}
+ ({
+ backgroundColor: dark_mode ? theme.colors.dark[9] : "#fff",
+ flexGrow: 1,
+ overflow: "hidden",
+ height: "100%",
+ })}
+ >
+
+
+
+
+ {viewer.useGui((state) => state.theme.show_logo) ? (
+
+ ) : null}
+
+
-
-
-
+
+ >
);
}
@@ -232,17 +236,6 @@ function ViewerCanvas({ children }: { children: React.ReactNode }) {
);
const theme = useMantineTheme();
- // Overwrite the Mantine color scheme, which is persisted in local storage.
- // This doesn't really belong to the canvas, it just needs to be run
- // somewhere within the Mantine + viewer contexts.
- const mantineColorScheme = useMantineColorScheme();
- const colorScheme = viewer.useGui((state) => state.theme.dark_mode)
- ? "dark"
- : "light";
- useEffect(() => {
- mantineColorScheme.setColorScheme(colorScheme);
- });
-
return (