Fix

Fixed dark mode flicker on page load

Users with dark mode enabled were seeing a brief white flash (FOUC) when loading any page in the dashboard.

Why it happened

The theme preference was stored in localStorage, but the theme class was applied after the initial React hydration. This meant the page rendered in light mode for a split second before switching.

How we fixed it

We now inject a blocking script in the <head> that sets the theme class on <html> before the page paints:

<script>
  const theme = localStorage.getItem('theme') || 'system';
  const isDark = theme === 'dark' || 
    (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
  document.documentElement.classList.toggle('dark', isDark);
</script>

This runs synchronously before any rendering, eliminating the flicker completely.