[BUGFIX] Dynamic default body background depending on device preferences (#10626)

# Introduction
close #9965 

When landing on twenty you should be able to see a white screen
flickering if you had setup dark mode.
This is because before the SPA has been loaded we're not displaying
anything, which in a white screen from the browser.
During this period we should display a background color following the
user's device theme.

## Reproduction
In order to reproduce this behavior define a fast 4G connection from
your network console.

## Cons
Device mode might not the one chosen afterwards when the user has been
authenticated
=> We should store appearance settings in the local storage in order to
optimistically render the default "loading" background ( wouldn't be
100% bullet proof for instance if the user is now unauth for some reason
)

Body background will be override by theme after app bootstrap

packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts

@@ -0,0 +1,18 @@
+// TODO consume theme from twenty-ui after its migration as a package, at the moment the bunlde is too big
+// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
+const THEME_LIGHT_BACKGROUND_TERTIARY = '#f1f1f1';
+// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
+const THEME_DARK_BACKGROUND_TERTIARY = '#1d1d1d';
+
+// TODO should search in local storage for user last session appearance preferences
+const renderBodyOptimisticBackgroundBeforeAppBootstrap = () => {
+  const isDarkTheme =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (isDarkTheme) {
+    document.body.style.background = THEME_DARK_BACKGROUND_TERTIARY;
+  } else {
+    document.body.style.background = THEME_LIGHT_BACKGROUND_TERTIARY;
+  }
+};
+renderBodyOptimisticBackgroundBeforeAppBootstrap();