Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+
+export const useColorScheme = () => {
+  const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
+    currentWorkspaceMemberState,
+  );
+
+  const { updateOneRecord: updateOneWorkspaceMember } = useUpdateOneRecord({
+    objectNameSingular: 'workspaceMember',
+  });
+
+  const colorScheme = currentWorkspaceMember?.colorScheme ?? 'System';
+
+  const setColorScheme = useCallback(
+    async (value: ColorScheme) => {
+      if (!currentWorkspaceMember) {
+        return;
+      }
+      setCurrentWorkspaceMember((current) => {
+        if (!current) {
+          return current;
+        }
+        return {
+          ...current,
+          colorScheme: value,
+        };
+      });
+      await updateOneWorkspaceMember?.({
+        idToUpdate: currentWorkspaceMember?.id,
+        input: {
+          colorScheme: value,
+        },
+      });
+    },
+    [
+      currentWorkspaceMember,
+      setCurrentWorkspaceMember,
+      updateOneWorkspaceMember,
+    ],
+  );
+
+  return {
+    colorScheme,
+    setColorScheme,
+  };
+};

packages/twenty-front/src/modules/ui/theme/hooks/useSystemColorScheme.ts

@@ -0,0 +1,32 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+
+export const useSystemColorScheme = (): ColorScheme => {
+  const mediaQuery = useMemo(
+    () => window.matchMedia('(prefers-color-scheme: dark)'),
+    [],
+  );
+
+  const [preferredColorScheme, setPreferredColorScheme] = useState<ColorScheme>(
+    !window.matchMedia || !mediaQuery.matches ? 'Light' : 'Dark',
+  );
+
+  useEffect(() => {
+    if (!window.matchMedia) {
+      return;
+    }
+
+    const handleChange = (event: MediaQueryListEvent): void => {
+      setPreferredColorScheme(event.matches ? 'Dark' : 'Light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [mediaQuery]);
+
+  return preferredColorScheme;
+};