diff --git a/packages/twenty-front/index.html b/packages/twenty-front/index.html
index 33bf69175..99ae9850d 100644
--- a/packages/twenty-front/index.html
+++ b/packages/twenty-front/index.html
@@ -3,7 +3,12 @@
-
+
@@ -42,9 +47,12 @@
const viewportMetadata = document.querySelector('meta[name=viewport]');
if (viewportMetadata !== null) {
- viewportMetadata.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
+ viewportMetadata.setAttribute(
+ 'content',
+ 'width=device-width, initial-scale=1.0, maximum-scale=1.0',
+ );
}
- }
+ };
const isIOS = /iPad|iPhone/.test(navigator.userAgent);
if (isIOS) {
@@ -52,9 +60,13 @@
}
-
+
+
diff --git a/packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts b/packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts
new file mode 100644
index 000000000..573ca517d
--- /dev/null
+++ b/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();