diff --git a/viser/_message_api.py b/viser/_message_api.py
index d83b2f946..788469341 100644
--- a/viser/_message_api.py
+++ b/viser/_message_api.py
@@ -143,12 +143,14 @@ def configure_theme(
         control_type: Union[
             Literal["floating"], Literal["collapsible"], Literal["fixed"]
         ] = "floating",
+        dark_mode: bool = False,
     ) -> None:
         """Configure the viser front-end's visual appearance."""
         self._queue(
             _messages.ThemeConfigurationMessage(
                 titlebar_content=titlebar_content,
                 control_type=control_type,
+                dark_mode=dark_mode,
             ),
         )
 
diff --git a/viser/_messages.py b/viser/_messages.py
index 3eb961b5f..589663b04 100644
--- a/viser/_messages.py
+++ b/viser/_messages.py
@@ -425,3 +425,4 @@ class ThemeConfigurationMessage(Message):
 
     titlebar_content: Optional[theme.TitlebarConfig]
     control_type: Union[Literal["floating"], Literal["collapsible"], Literal["fixed"]]
+    dark_mode: bool
diff --git a/viser/client/src/App.tsx b/viser/client/src/App.tsx
index b05274bfe..94dfc9e56 100644
--- a/viser/client/src/App.tsx
+++ b/viser/client/src/App.tsx
@@ -92,32 +92,44 @@ function SingleViewer() {
 
   const control_type = viewer.useGui((state) => state.theme.control_type);
   return (
-    <ViewerContext.Provider value={viewer}>
-      <Titlebar />
-      <Box
-        sx={{
-          width: "100%",
-          height: "1px",
-          position: "relative",
-          flex: "1 0 auto",
-          display: "flex"
-        }}
-      >
-        <MediaQuery smallerThan={"xs"} styles={{ right: 0, bottom: "3.5em" }}>
-          <Box
-            sx={(theme) => ({
-              width: '1px',
-              flex: "1 0 auto",
-              backgroundColor:
-                theme.colorScheme === "light" ? "#fff" : theme.colors.dark[9],
-            })}
-          >
-            <ViewerCanvas>{memoizedWebsocketInterface}</ViewerCanvas>
-          </Box>
-        </MediaQuery>
-        <ControlPanel control_type={control_type} />
-      </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 control_type={control_type} />
+        </Box>
+      </ViewerContext.Provider>
+    </MantineProvider>
   );
 }
 
@@ -172,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 9d1088b0a..05afc48ee 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,
     control_type: 'floating'
+    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 f3681c5e7..5248ac2a4 100644
--- a/viser/client/src/WebsocketMessages.tsx
+++ b/viser/client/src/WebsocketMessages.tsx
@@ -321,6 +321,7 @@ export interface ThemeConfigurationMessage {
     } | null;
   } | null;
   control_type: "floating" | "collapsible" | "fixed";
+  dark_mode: boolean;
 }
 
 export type Message =