Make Category tree theme-aware (#6523)

src/frontend/src/components/nav/PartCategoryTree.tsx

@@ -1,6 +1,13 @@
 import { t } from '@lingui/macro';
-import { Drawer, Group, LoadingOverlay, Stack, Text } from '@mantine/core';
+import {
-import { ReactTree } from '@naisutech/react-tree';
+  Drawer,
+  Group,
+  LoadingOverlay,
+  Stack,
+  Text,
+  useMantineTheme
+} from '@mantine/core';
+import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import { IconSitemap } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
@@ -37,7 +44,7 @@ export function PartCategoryTree({
           })
         )
         .catch((error) => {
-          console.error('Error fetching part categpry tree:', error);
+          console.error('Error fetching part category tree:', error);
           return error;
         }),
     refetchOnMount: true
@@ -59,6 +66,56 @@ export function PartCategoryTree({
     );
   }
 
+  const mantineTheme = useMantineTheme();
+  const currentTheme =
+    mantineTheme.colorScheme === 'dark'
+      ? mantineTheme.colorScheme
+      : mantineTheme.primaryColor;
+
+  const themes: ThemeSettings = {
+    dark: {
+      text: {
+        ...mantineTheme.fn.fontStyles()
+      },
+      nodes: {
+        height: '2.5rem',
+        folder: {
+          selectedBgColor: mantineTheme.colors[currentTheme][4],
+          hoverBgColor: mantineTheme.colors[currentTheme][6]
+        },
+        leaf: {
+          selectedBgColor: mantineTheme.colors[currentTheme][4],
+          hoverBgColor: mantineTheme.colors[currentTheme][6]
+        },
+        icons: {
+          folderColor: mantineTheme.colors[currentTheme][3],
+          leafColor: mantineTheme.colors[currentTheme][3]
+        }
+      }
+    },
+    light: {
+      text: {
+        ...mantineTheme.fn.fontStyles()
+      },
+      nodes: {
+        height: '2.5rem',
+        folder: {
+          selectedBgColor: mantineTheme.colors[currentTheme][4],
+          hoverBgColor: mantineTheme.colors[currentTheme][2]
+        },
+        leaf: {
+          bgColor: 'initial',
+          selectedBgColor: mantineTheme.colors[currentTheme][4],
+          hoverBgColor: mantineTheme.colors[currentTheme][2]
+        },
+        icons: {
+          folderColor: mantineTheme.colors[currentTheme][8],
+          leafColor: mantineTheme.colors[currentTheme][6]
+        }
+      }
+    }
+  };
+
   return (
     <Drawer
       opened={opened}
@@ -88,6 +145,8 @@ export function PartCategoryTree({
           RenderNode={renderNode}
           defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
           showEmptyItems={false}
+          theme={mantineTheme.colorScheme}
+          themes={themes}
         />
       </Stack>
     </Drawer>