How to stop theme flash in dark mode toggle

-

Understanding theme flash problem

The theme flash problem occurs when your site loads with the wrong color scheme for a split second before applying the user's saved preference. In dark mode-enabled sites like Mediumish, this is noticeable: a white background flashes before switching to dark, or vice versa.

While the flash might seem minor, it can disrupt the reading experience, especially for users in dark environments. Reducing or eliminating it helps create a polished, professional feel.

Why it happens in Mediumish

Mediumish loads CSS and JavaScript in sequence. If your theme preference is stored in localStorage or cookies, JavaScript must read it and then apply a class or data attribute. This happens after the HTML is rendered, meaning users briefly see the default theme before the change is applied.

This is more visible on slower devices or network connections. In dark mode setups, the flash is more distracting because of the high contrast between modes.

Preventing theme flash using CSS

One approach is to set the background color early, before the main styles are applied. You can use an inline <style> block at the top of your document to match the saved theme.

<style>
  html[data-theme='dark'] {
    background-color: #0b0f12;
  }
  html[data-theme='light'] {
    background-color: #ffffff;
  }
</style>

This way, even before your full stylesheet loads, the background is already close to the intended theme, reducing the perceived flash.

Preventing theme flash using JavaScript

The most reliable fix is to run a small inline script at the top of the <head> to set the theme class or attribute before the browser paints the page.

<script>
(function() {
  var savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
  }
})();
</script>

By placing this snippet before your CSS files load, the correct theme is set instantly, preventing the wrong one from flashing.

Best practices for smooth theme loading

  • Place theme detection code at the top: Always run theme-setting JavaScript before CSS loads.
  • Use matching inline background color: This hides the flash while CSS finishes loading.
  • Preload key styles: Consider using rel="preload" for your theme CSS.
  • Test on slow devices: Simulate poor network or CPU conditions to ensure the fix works.

Following these steps makes dark mode switching in Mediumish seamless and professional, which improves user trust and comfort.

FAQ

Q: Can I fix the flash problem without JavaScript?

A: You can reduce it using CSS tricks, but completely eliminating it usually requires JavaScript for theme detection.

Q: Should I use cookies or localStorage for saving theme preference?

A: Both work, but localStorage is simpler for front-end only themes like Mediumish.

Q: What about system preference changes?

A: Use matchMedia to detect prefers-color-scheme and adjust dynamically.

Comments

Post a Comment