From 184057882403be5feff973e7de1ff575472a51af Mon Sep 17 00:00:00 2001
From: Brent Yi <yibrenth@gmail.com>
Date: Thu, 3 Aug 2023 16:01:35 -0700
Subject: [PATCH] Add dark mode option

---
 viser/_message_api.py                      |  2 +
 viser/_messages.py                         |  1 +
 viser/client/src/App.tsx                   | 92 +++++++++++-----------
 viser/client/src/ControlPanel/GuiState.tsx |  1 +
 viser/client/src/WebsocketMessages.tsx     |  9 +--
 5 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/viser/_message_api.py b/viser/_message_api.py
index 3e0349119..2c9eaa380 100644
--- a/viser/_message_api.py
+++ b/viser/_message_api.py
@@ -141,12 +141,14 @@ def configure_theme(
         *,
         titlebar_content: Optional[theme.TitlebarConfig] = None,
         fixed_sidebar: bool = False,
+        dark_mode: bool = False,
     ) -> None:
         """Configure the viser front-end's visual appearance."""
         self._queue(
             _messages.ThemeConfigurationMessage(
                 titlebar_content=titlebar_content,
                 fixed_sidebar=fixed_sidebar,
+                dark_mode=dark_mode,
             ),
         )
 
diff --git a/viser/_messages.py b/viser/_messages.py
index 2c4f093b7..9ecad6158 100644
--- a/viser/_messages.py
+++ b/viser/_messages.py
@@ -425,3 +425,4 @@ class ThemeConfigurationMessage(Message):
 
     titlebar_content: Optional[theme.TitlebarConfig]
     fixed_sidebar: bool
+    dark_mode: bool
diff --git a/viser/client/src/App.tsx b/viser/client/src/App.tsx
index 00b20e5fd..544a13975 100644
--- a/viser/client/src/App.tsx
+++ b/viser/client/src/App.tsx
@@ -92,34 +92,44 @@ function SingleViewer() {
 
   const fixed_sidebar = viewer.useGui((state) => state.theme.fixed_sidebar);
   return (
-    <ViewerContext.Provider value={viewer}>
-      <Titlebar />
-      <Box
-        sx={{
-          width: "100%",
-          height: "1px",
-          position: "relative",
-          flex: "1 0 auto",
-        }}
-      >
-        <MediaQuery smallerThan={"xs"} styles={{ right: 0, bottom: "3.5em" }}>
-          <Box
-            sx={(theme) => ({
-              top: 0,
-              bottom: 0,
-              left: 0,
-              right: fixed_sidebar ? "20em" : 0,
-              position: "absolute",
-              backgroundColor:
-                theme.colorScheme === "light" ? "#fff" : theme.colors.dark[9],
-            })}
-          >
-            <ViewerCanvas>{memoizedWebsocketInterface}</ViewerCanvas>
-          </Box>
-        </MediaQuery>
-        <ControlPanel fixed_sidebar={fixed_sidebar} />
-      </Box>
-    </ViewerContext.Provider>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        colorScheme: viewer.useGui((state) => state.theme.dark_mode)
+          ? "dark"
+          : "light",
+      }}
+    >
+      <ViewerContext.Provider value={viewer}>
+        <Titlebar />
+        <Box
+          sx={{
+            width: "100%",
+            height: "1px",
+            position: "relative",
+            flex: "1 0 auto",
+          }}
+        >
+          <MediaQuery smallerThan={"xs"} styles={{ right: 0, bottom: "3.5em" }}>
+            <Box
+              sx={(theme) => ({
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: fixed_sidebar ? "20em" : 0,
+                position: "absolute",
+                backgroundColor:
+                  theme.colorScheme === "light" ? "#fff" : theme.colors.dark[9],
+              })}
+            >
+              <ViewerCanvas>{memoizedWebsocketInterface}</ViewerCanvas>
+            </Box>
+          </MediaQuery>
+          <ControlPanel fixed_sidebar={fixed_sidebar} />
+        </Box>
+      </ViewerContext.Provider>
+    </MantineProvider>
   );
 }
 
@@ -174,24 +184,16 @@ function SceneContextSetter() {
 
 export function Root() {
   return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{
-        colorScheme: "light",
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
-      <Box
-        sx={{
-          width: "100%",
-          height: "100%",
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <SingleViewer />
-      </Box>
-    </MantineProvider>
+      <SingleViewer />
+    </Box>
   );
 }
diff --git a/viser/client/src/ControlPanel/GuiState.tsx b/viser/client/src/ControlPanel/GuiState.tsx
index ecdc731d0..50aa219d6 100644
--- a/viser/client/src/ControlPanel/GuiState.tsx
+++ b/viser/client/src/ControlPanel/GuiState.tsx
@@ -56,6 +56,7 @@ const cleanGuiState: GuiState = {
     type: "ThemeConfigurationMessage",
     titlebar_content: null,
     fixed_sidebar: false,
+    dark_mode: false,
   },
   label: "",
   server: "ws://localhost:8080", // Currently this will always be overridden.
diff --git a/viser/client/src/WebsocketMessages.tsx b/viser/client/src/WebsocketMessages.tsx
index b27135d56..2aa9455f9 100644
--- a/viser/client/src/WebsocketMessages.tsx
+++ b/viser/client/src/WebsocketMessages.tsx
@@ -303,12 +303,6 @@ export interface GuiSetValueMessage {
   id: string;
   value: any;
 }
-export interface MessageGroupStart {
-  type: "MessageGroupStart";
-}
-export interface MessageGroupEnd {
-  type: "MessageGroupEnd";
-}
 export interface ThemeConfigurationMessage {
   type: "ThemeConfigurationMessage";
   titlebar_content: {
@@ -327,6 +321,7 @@ export interface ThemeConfigurationMessage {
     } | null;
   } | null;
   fixed_sidebar: boolean;
+  dark_mode: boolean;
 }
 
 export type Message =
@@ -371,6 +366,4 @@ export type Message =
   | GuiSetVisibleMessage
   | GuiSetDisabledMessage
   | GuiSetValueMessage
-  | MessageGroupStart
-  | MessageGroupEnd
   | ThemeConfigurationMessage;