d6171c66df
# 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
19 lines
822 B
TypeScript
19 lines
822 B
TypeScript
// 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();
|