[Bug]: Dark mode flickering

[xamgore]

Hi, have you tried refreshing a browser tab while being in the dark mode at system level? You could see right after the refresh happens, there is a 200ms white screen flickering, which gradually blends in the dark mode.

You should know that chakra has solved exactly the same issue with next-themes approach. Don't hesitate using it, the migration is simple.

[deebov]

Hey @xamgore, thanks for reporting this! We're already using next-themes and haven't had the best experience with it so far for the reasons you mentioned (i.e. dark mode flickering, having to mount components after js has loaded, etc).

[ParthGorde]

Hey @deebov, rather than relying on the user’s system theme, we could default to one variant first and then provide a button to switch themes. That way, it won’t feel glitchy. Happy to help with this!

[deebov]

Hey @ParthGorde, thanks for the suggestions.

This suggestion would indeed fix the bug for users who haven't changed the theme at all. But for users who have changed the theme from default to the opposite will still experience the glitch. For example, if the default theme is light and user changes it to dark, then there will still be a slight glitch when page is loaded as we first render the initial layout with default theme and once the persisted theme state is available we switch the theme.

I went ahead and added enableSystem={false} to ThemeProvider which should set the default theme to light.

[ParthGorde]

Hey @deebov, thanks for catching the idea! I think I wasn’t clear earlier, so let me refine it:

When the user changes the page theme, it should only affect the page, not the components.

Inside the component area, we’ll have a separate “Change Theme” button. When the user clicks it, the component’s theme will change independently.

The initial setup should be:

Page theme → based on the user’s device theme.

Component theme → white by default.

The component background (the window behind component) should have a neutral gray tone (gray-400 to gray-500). This way, when the component itself is white, it doesn’t blend with the page background (whether light or dark).

This keeps page and component themes independent while maintaining good contrast.