In Darkmode fix white flash on page refresh

[LumosViridi]

Bug Description

Fix blank white page that flashes on refresh when user has dark mode selected.

Technical inputs

Confirmed on

• Firefox for MacOS 125.0.3
• Chrome for MacOS 124.0.6367.119

[greptile-apps]

To address the white flash on page refresh when dark mode is selected, consider implementing a script in the main entry point of your application that checks the user's theme preference and sets the background color of the body element accordingly before the rest of the page loads. This can be done by modifying the index.css files in both the front-end and the Chrome extension to include a default background color for dark mode. Additionally, ensure that this script runs as early as possible in the page load process, ideally before any external stylesheets are loaded.

For the front-end (/packages/twenty-front/src/index.css), you can add a default dark background color:

body[data-theme='dark'] {
  background-color: #121212; /* Or any dark color matching the dark theme */
}

And for the Chrome extension (/packages/twenty-chrome-extension/src/index.css), apply a similar approach:

body[data-theme='dark'] {
  background-color: #121212;
}

To dynamically set the theme before the page is fully loaded, you can add a script in the HTML entry file (index.html or equivalent) that checks the user's theme preference (from localStorage or a similar persistence layer) and sets the data-theme attribute on the body tag accordingly. This ensures the background color is applied instantly, reducing or eliminating the white flash.

<script>
  if (window.localStorage.getItem('theme') === 'dark') {
    document.body.setAttribute('data-theme', 'dark');
  }
</script>

This solution assumes the theme preference is stored and accessible. Adjust the script as necessary to match how your application stores and retrieves the user's theme preference.

References

twentyhq/twenty/packages/twenty-front/src/index.css
twentyhq/twenty/packages/twenty-chrome-extension/src/index.css
twentyhq/twenty/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/HoverBackground.ts
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx

Ask Greptile