admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
# 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
This commit is contained in:
Paul Rastoin
2025-03-04 15:54:16 +01:00
committed by GitHub
parent f6bc567aaf
commit d6171c66df
2 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/index.html
View File

@ -3,7 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/icons/android/android-launchericon-48-48.png" data-rh="true"/> <link
rel="icon"
type="image/x-icon"
href="/icons/android/android-launchericon-48-48.png"
data-rh="true"
/>
<link rel="apple-touch-icon" href="/icons/ios/192.png" /> <link rel="apple-touch-icon" href="/icons/ios/192.png" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
@ -42,9 +47,12 @@
const viewportMetadata = document.querySelector('meta[name=viewport]'); const viewportMetadata = document.querySelector('meta[name=viewport]');
if (viewportMetadata !== null) { 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); const isIOS = /iPad|iPhone/.test(navigator.userAgent);
if (isIOS) { if (isIOS) {
@ -52,9 +60,13 @@
} }
</script> </script>
</head> </head>
<body> <body style="width: 100%; height: 100vh">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script
type="module"
src="/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts"
></script>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

18
packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts Normal file
View File

@ -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();