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-component-renderer/src/__stories__/FrontComponentRenderer.stories.tsx

@@ -20,6 +20,7 @@ const meta: Meta<typeof FrontComponentRenderer> = {
       userId: null,
       recordId: null,
       selectedRecordIds: [],
+      colorScheme: 'light',
     },
   },
   beforeEach: () => {
@@ -123,6 +124,7 @@ export const SdkContext: Story = {
       userId: 'test-user-abc-123',
       recordId: null,
       selectedRecordIds: [],
+      colorScheme: 'light',
     },
   },
   play: async ({ canvasElement }) => {

packages/twenty-front-component-renderer/src/__stories__/UILibraries.stories.tsx

@@ -20,6 +20,7 @@ const meta: Meta<typeof FrontComponentRenderer> = {
       userId: null,
       recordId: null,
       selectedRecordIds: [],
+      colorScheme: 'light',
     },
   },
   beforeEach: () => {

packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/createFrontComponentStoryMeta.ts

@@ -27,6 +27,7 @@ export const FRONT_COMPONENT_STORY_DEFAULT_ARGS: NonNullable<
     userId: null,
     recordId: null,
     selectedRecordIds: [],
+    colorScheme: 'light',
   },
   colorScheme: 'light',
   frontComponentHostCommunicationApi: hostApiMocks,

packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/runFrontComponentStory.ts

@@ -23,6 +23,7 @@ export const runFrontComponentStory = ({
       userId: null,
       recordId: null,
       selectedRecordIds: [],
+      colorScheme: 'light',
     },
   },
   play,

packages/twenty-front-component-renderer/src/types/FrontComponentExecutionContext.ts

@@ -7,4 +7,6 @@ export type FrontComponentExecutionContext = {
   recordId: string | null;
   /** All selected record IDs */
   selectedRecordIds: string[];
+  /** Resolved color scheme of the host UI ('System' is already resolved) */
+  colorScheme: 'light' | 'dark';
 };