fix usage of ColorScheme

src/frontend/src/components/details/DetailsImage.tsx

@@ -7,10 +7,11 @@ import {
   Overlay,
   Paper,
   Text,
-  rem
+  rem,
+  useMantineColorScheme
 } from '@mantine/core';
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import { useColorScheme, useHover } from '@mantine/hooks';
+import { useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';
 
@@ -158,11 +159,11 @@ function UploadModal({
     }
   };
 
-  const preferredColorScheme = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const primaryColor =
-    vars.colors.primaryColors[preferredColorScheme === 'dark' ? 4 : 6];
+    vars.colors.primaryColors[colorScheme === 'dark' ? 4 : 6];
-  const redColor = vars.colors.red[preferredColorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[colorScheme === 'dark' ? 4 : 6];
 
   return (
     <Paper style={{ height: '220px' }}>

src/frontend/src/components/forms/fields/RelatedModelField.tsx

@@ -1,6 +1,11 @@
 import { t } from '@lingui/macro';
-import { Input, darken, useMantineTheme } from '@mantine/core';
+import {
-import { useColorScheme, useDebouncedValue, useId } from '@mantine/hooks';
+  Input,
+  darken,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core';
+import { useDebouncedValue, useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -219,11 +224,11 @@ export function RelatedModelField({
   const theme = useMantineTheme();
 
   const colorschema = vars.colors.primaryColors;
-  const [preferredColorScheme] = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const colors = useMemo(() => {
     let colors: any;
-    if (preferredColorScheme === 'dark') {
+    if (colorScheme === 'dark') {
       colors = {
         neutral0: colorschema[6],
         neutral5: colorschema[4],

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -8,9 +8,9 @@ import {
   HoverCard,
   Skeleton,
   Text,
-  UnstyledButton
+  UnstyledButton,
+  useMantineColorScheme
 } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import { IconLayoutSidebar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
@@ -35,7 +35,7 @@ export function NavHoverMenu({
   ]);
   const [servername] = useServerApiState((state) => [state.server.instance]);
   const [instanceName, setInstanceName] = useState<string>();
-  const [preferredColorScheme] = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   useEffect(() => {
     if (hostKey && hostList[hostKey]) {
@@ -89,9 +89,7 @@ export function NavHoverMenu({
           my="sm"
           mx="-md"
           color={
-            preferredColorScheme === 'dark'
+            colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
-              ? vars.colors.dark[5]
-              : vars.colors.gray[1]
           }
         />
         <MenuLinks links={onlyItems} highlighted={true} />

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

@@ -1,6 +1,12 @@
 import { t } from '@lingui/macro';
-import { Drawer, Group, LoadingOverlay, Stack, Text } from '@mantine/core';
+import {
-import { useColorScheme } from '@mantine/hooks';
+  Drawer,
+  Group,
+  LoadingOverlay,
+  Stack,
+  Text,
+  useMantineColorScheme
+} from '@mantine/core';
 import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import {
   IconChevronDown,
@@ -75,11 +81,11 @@ export function PartCategoryTree({
     return open ? <IconChevronDown /> : <IconChevronRight />;
   }
 
-  const [prefferedColorScheme] = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const themes: ThemeSettings = useMemo(() => {
     const currentTheme =
-      prefferedColorScheme === 'dark'
+      colorScheme === 'dark'
         ? vars.colors.defaultColor
         : vars.colors.primaryColors;
 
@@ -161,7 +167,7 @@ export function PartCategoryTree({
           RenderIcon={renderIcon}
           defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
           showEmptyItems={false}
-          theme={prefferedColorScheme}
+          theme={colorScheme}
           themes={themes}
         />
       </Stack>

src/frontend/src/components/settings/SettingItem.tsx

@@ -6,9 +6,9 @@ import {
   Space,
   Stack,
   Switch,
-  Text
+  Text,
+  useMantineColorScheme
 } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit } from '@tabler/icons-react';
 import { useMemo } from 'react';
@@ -166,14 +166,12 @@ export function SettingItem({
   shaded: boolean;
   onChange?: () => void;
 }) {
-  const [prefferedColorScheme] = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const style: Record<string, string> = { paddingLeft: '8px' };
   if (shaded) {
     style['backgroundColor'] =
-      prefferedColorScheme === 'light'
+      colorScheme === 'light' ? vars.colors.gray[1] : vars.colors.gray[9];
-        ? vars.colors.gray[1]
-        : vars.colors.gray[9];
   }
 
   return (

src/frontend/src/components/widgets/FeedbackWidget.tsx

@@ -1,19 +1,16 @@
 import { Trans } from '@lingui/macro';
-import { Button, Stack, Title } from '@mantine/core';
+import { Button, Stack, Title, useMantineColorScheme } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import { IconExternalLink } from '@tabler/icons-react';
 
 import { vars } from '../../theme';
 
 export default function FeedbackWidget() {
-  const [preferredColorScheme] = useColorScheme();
+  const { colorScheme } = useMantineColorScheme();
   return (
     <Stack
       style={{
         backgroundColor:
-          preferredColorScheme === 'dark'
+          colorScheme === 'dark' ? vars.colors.gray[9] : vars.colors.gray[1],
-            ? vars.colors.gray[9]
-            : vars.colors.gray[1],
         borderRadius: vars.radius.md
       }}
       p={15}