fix styles

frontend/src/App/Navbar.tsx

@@ -20,6 +20,7 @@ import {
   Group,
   Stack,
   Text,
+  useComputedColorScheme,
   useMantineColorScheme,
 } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
@@ -98,8 +99,10 @@ function useIsActive(parent: string, route: RouteObject) {
 const AppNavbar: FunctionComponent = () => {
   const [selection, select] = useState<string | null>(null);
 
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const dark = colorScheme === "dark";
+  const { toggleColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+
+  const dark = computedColorScheme === "dark";
 
   const routes = useRouteItems();
 

frontend/src/App/ThemeProvider.tsx

@@ -1,4 +1,10 @@
-import { ActionIcon, Badge, Button, createTheme, MantineProvider } from "@mantine/core";
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  createTheme,
+  MantineProvider,
+} from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
 import "@mantine/core/styles.layer.css";