From 43f2779f2555faf85639fcda48dc4d7b176d7890 Mon Sep 17 00:00:00 2001
From: Brent Yi <yibrenth@gmail.com>
Date: Fri, 29 Mar 2024 20:19:42 -0700
Subject: [PATCH] Fix dark mode edge cases

---
 src/viser/client/src/App.tsx                | 109 +++++++++-----------
 src/viser/client/src/WebsocketInterface.tsx |   9 +-
 2 files changed, 52 insertions(+), 66 deletions(-)

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 (
-    <MantineProvider
-      theme={createTheme({
-        ...theme,
-        ...(colors === null
-          ? {}
-          : { colors: { custom: colors }, primaryColor: "custom" }),
-      })}
-    >
-      <Notifications
-        position="top-left"
-        containerWidth="20em"
-        styles={{
-          root: {
-            boxShadow: "0.1em 0 1em 0 rgba(0,0,0,0.1) !important",
-          },
-        }}
-      />
-      <ViserModal />
-      <Box
-        style={{
-          width: "100%",
-          height: "100%",
-          // We use flex display for the titlebar layout.
-          display: "flex",
-          position: "relative",
-          flexDirection: "column",
-        }}
+    <>
+      <ColorSchemeScript forceColorScheme={dark_mode ? "dark" : "light"} />
+      <MantineProvider
+        theme={createTheme({
+          ...theme,
+          ...(colors === null
+            ? {}
+            : { colors: { custom: colors }, primaryColor: "custom" }),
+        })}
+        forceColorScheme={dark_mode ? "dark" : "light"}
       >
-        <Titlebar />
+        <Notifications
+          position="top-left"
+          containerWidth="20em"
+          styles={{
+            root: {
+              boxShadow: "0.1em 0 1em 0 rgba(0,0,0,0.1) !important",
+            },
+          }}
+        />
+        <ViserModal />
         <Box
           style={{
-            // Put the canvas and control panel side-by-side.
             width: "100%",
-            position: "relative",
-            flexGrow: 1,
-            overflow: "hidden",
+            height: "100%",
+            // We use flex display for the titlebar layout.
             display: "flex",
+            position: "relative",
+            flexDirection: "column",
           }}
         >
+          <Titlebar />
           <Box
-            style={(theme) => ({
-              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",
+            }}
           >
-            <Viewer2DCanvas />
-            <ViewerCanvas>
-              <FrameSynchronizedMessageHandler />
-            </ViewerCanvas>
-            {viewer.useGui((state) => state.theme.show_logo) ? (
-              <ViserLogo />
-            ) : null}
+            <Box
+              style={(theme) => ({
+                backgroundColor: dark_mode ? theme.colors.dark[9] : "#fff",
+                flexGrow: 1,
+                overflow: "hidden",
+                height: "100%",
+              })}
+            >
+              <Viewer2DCanvas />
+              <ViewerCanvas>
+                <FrameSynchronizedMessageHandler />
+              </ViewerCanvas>
+              {viewer.useGui((state) => state.theme.show_logo) ? (
+                <ViserLogo />
+              ) : null}
+            </Box>
+            <ControlPanel control_layout={control_layout} />
           </Box>
-          <ControlPanel control_layout={control_layout} />
         </Box>
-      </Box>
-    </MantineProvider>
+      </MantineProvider>
+    </>
   );
 }
 
@@ -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 (
     <Canvas
       camera={{ position: [-3.0, 3.0, -3.0], near: 0.05 }}
diff --git a/src/viser/client/src/WebsocketInterface.tsx b/src/viser/client/src/WebsocketInterface.tsx
index 00f634fee..c6840e2aa 100644
--- a/src/viser/client/src/WebsocketInterface.tsx
+++ b/src/viser/client/src/WebsocketInterface.tsx
@@ -32,12 +32,7 @@ import {
 import { isGuiConfig } from "./ControlPanel/GuiState";
 import { useFrame } from "@react-three/fiber";
 import GeneratedGuiContainer from "./ControlPanel/Generated";
-import {
-  MantineProvider,
-  Paper,
-  Progress,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { MantineProvider, Paper, Progress } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import { computeT_threeworld_world } from "./WorldTransformUtils";
 import { theme } from "./AppTheme";
@@ -75,7 +70,6 @@ function useMessageHandler() {
   const updateGuiProps = viewer.useGui((state) => state.updateGuiProps);
   const setClickable = viewer.useSceneTree((state) => state.setClickable);
   const updateUploadState = viewer.useGui((state) => state.updateUploadState);
-  const colorScheme = useMantineColorScheme();
 
   // Same as addSceneNode, but make a parent in the form of a dummy coordinate
   // frame if it doesn't exist yet.
@@ -131,7 +125,6 @@ function useMessageHandler() {
       // Configure the theme.
       case "ThemeConfigurationMessage": {
         setTheme(message);
-        colorScheme.setColorScheme(message.dark_mode ? "dark" : "light");
         return;
       }
       // Enable/disable whether scene pointer events are sent.