From d6171c66df5b87f94c545ab7f0667e1726ab2068 Mon Sep 17 00:00:00 2001
From: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
Date: Tue, 4 Mar 2025 15:54:16 +0100
Subject: [PATCH] [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/index.html | 20 +++++++++++++++----
...yOptimisticBackgroundBeforeAppBootstrap.ts | 18 +++++++++++++++++
2 files changed, 34 insertions(+), 4 deletions(-)
create mode 100644 packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts
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();