Add useColorScheme hook to twenty-sdk (#21595)

Ability to update front compoonent design according to the dark or white
theme of the UI

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21595?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -39,6 +39,7 @@ export const FrontComponentRenderer = ({
       frontComponentId,
       commandMenuItemId,
       selectedRecordIds,
+      colorScheme,
     });
 
   const handleError = useCallback(

packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx

@@ -93,11 +93,18 @@ jest.mock('~/hooks/useCopyToClipboard', () => ({
 }));
 
 const renderUseFrontComponentExecutionContext = (
-  params: Parameters<typeof useFrontComponentExecutionContext>[0],
+  params: Omit<
+    Parameters<typeof useFrontComponentExecutionContext>[0],
+    'colorScheme'
+  > & { colorScheme?: 'light' | 'dark' },
 ) =>
-  renderHook(() => useFrontComponentExecutionContext(params), {
-    wrapper: ({ children }) => I18nProvider({ i18n, children }),
-  });
+  renderHook(
+    () =>
+      useFrontComponentExecutionContext({ colorScheme: 'light', ...params }),
+    {
+      wrapper: ({ children }) => I18nProvider({ i18n, children }),
+    },
+  );
 
 const FRONT_COMPONENT_ID = 'fc-test-id';
 const COMMAND_MENU_ITEM_ID = 'cmd-item-1';
@@ -120,6 +127,7 @@ describe('useFrontComponentExecutionContext', () => {
         userId: 'user-123',
         recordId: 'record-456',
         selectedRecordIds: ['record-456'],
+        colorScheme: 'light',
       });
     });
 
@@ -134,6 +142,7 @@ describe('useFrontComponentExecutionContext', () => {
         userId: 'user-123',
         recordId: null,
         selectedRecordIds: ['record-1', 'record-2', 'record-3'],
+        colorScheme: 'light',
       });
     });
 
@@ -165,6 +174,15 @@ describe('useFrontComponentExecutionContext', () => {
       expect(result.current.executionContext.recordId).toBeNull();
       expect(result.current.executionContext.selectedRecordIds).toEqual([]);
     });
+
+    it('should expose the provided colorScheme', () => {
+      const { result } = renderUseFrontComponentExecutionContext({
+        frontComponentId: FRONT_COMPONENT_ID,
+        colorScheme: 'dark',
+      });
+
+      expect(result.current.executionContext.colorScheme).toBe('dark');
+    });
   });
 
   describe('navigate', () => {

packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts

@@ -32,10 +32,12 @@ export const useFrontComponentExecutionContext = ({
   frontComponentId,
   commandMenuItemId,
   selectedRecordIds,
+  colorScheme,
 }: {
   frontComponentId: string;
   commandMenuItemId?: string;
   selectedRecordIds?: string[];
+  colorScheme: 'light' | 'dark';
 }): {
   executionContext: FrontComponentExecutionContext;
   frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi;
@@ -141,6 +143,7 @@ export const useFrontComponentExecutionContext = ({
     userId: currentUser?.id ?? null,
     recordId: selectedRecordIds?.length === 1 ? selectedRecordIds[0] : null,
     selectedRecordIds: selectedRecordIds ?? [],
+    colorScheme,
   };
 
   const unmountFrontComponent: FrontComponentHostCommunicationApi['unmountFrontComponent'] =