Color scheme follows OS setting.

src/frontend/app.tsx

@@ -1,51 +1,43 @@
 import * as React from "react";
-import {Stack, Group, Text, Title, Tabs, Space, createStyles} from "@mantine/core";
+import {Stack, Group, Text, Title, Tabs, Space, MantineProvider} from "@mantine/core";
+import { useColorScheme } from '@mantine/hooks';
 
 import {getDemoPD} from "./demo_pd";
 import {getDemoCorr} from "./demo_corr";
 import {getDemoBM} from "./demo_bm";
 
-// const useStyles = createStyles(theme => ({
-//   root: {
-//     display: "flex",
-//     // flex: "1",
-//   },
-//   panel: {
-//     display: "flex",
-//     flex: "1",
-//   }
-// }));
-
-
 export function getApp() {
   const DemoPD = getDemoPD();
   const DemoCorr = getDemoCorr();
   const DemoBM = getDemoBM();
 
   return function App(props) {
-    // const {classes} = useStyles();
+    // detect if user has light or dark color scheme going on :)
+    const preferredColorScheme = useColorScheme();
 
     return <>
-      <Tabs orientation="vertical">
-        <Stack>
-          <Text order={5}>Pick a demo:</Text>
-          <Tabs.List>
-            <Tabs.Tab value="pd">Primitive Delta</Tabs.Tab>
-            <Tabs.Tab value="corr">Correspondence</Tabs.Tab>
-            <Tabs.Tab value="bm">Blended Modeling</Tabs.Tab>
-          </Tabs.List>
-        </Stack>
-        <Space w="md"/>
-        <Tabs.Panel value="pd">
-          <DemoPD/>
-        </Tabs.Panel>
-        <Tabs.Panel value="corr">
-          <DemoCorr/>
-        </Tabs.Panel>
-        <Tabs.Panel value="bm">
-          <DemoBM/>
-        </Tabs.Panel>
-      </Tabs>
+      <MantineProvider theme={{ colorScheme: preferredColorScheme }} withGlobalStyles withNormalizeCSS>
+        <Tabs orientation="vertical">
+          <Stack>
+            <Text order={5}>Pick a demo:</Text>
+            <Tabs.List>
+              <Tabs.Tab value="pd">Primitive Delta</Tabs.Tab>
+              <Tabs.Tab value="corr">Correspondence</Tabs.Tab>
+              <Tabs.Tab value="bm">Blended Modeling</Tabs.Tab>
+            </Tabs.List>
+          </Stack>
+          <Space w="md"/>
+          <Tabs.Panel value="pd">
+            <DemoPD/>
+          </Tabs.Panel>
+          <Tabs.Panel value="corr">
+            <DemoCorr/>
+          </Tabs.Panel>
+          <Tabs.Panel value="bm">
+            <DemoBM/>
+          </Tabs.Panel>
+        </Tabs>
+      </MantineProvider>
     </>;
   }
 }