Media-based dark mode strategy in Tailwind - Performance & Optimization

Performance: Media-based dark mode strategy

MEDIUM IMPACT

This affects initial page load speed and rendering by conditionally applying styles based on user system preferences.

Implementing dark mode that respects user system preference

Tailwind

@media (prefers-color-scheme: dark) { .dark\:bg-gray-900 { background-color: #111; } .dark\:text-gray-200 { color: #eee; } } /* Tailwind applies these automatically */

Pure CSS media query applies styles during initial render without JavaScript, preventing layout shifts.

📈 Performance GainSingle style calculation and paint, no reflows or CLS caused by script

Implementing dark mode that respects user system preference

Tailwind

@media (prefers-color-scheme: dark) { body { background-color: #111; color: #eee; } } /* plus JavaScript toggling classes on load */

Using JavaScript to toggle dark mode after page load causes layout shifts and delays style application.

📉 Performance CostTriggers multiple reflows and CLS due to style changes after initial paint

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
JavaScript toggling dark mode after load	Multiple class changes	Multiple reflows triggered	Multiple paints causing CLS	[X] Bad
CSS media query for dark mode	No DOM changes	Single reflow during initial layout	Single paint with no CLS	[OK] Good

Rendering Pipeline

The browser reads the CSS media query during style calculation and applies dark mode styles if the user prefers dark mode, avoiding extra layout or paint steps later.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint caused by late style changes from JavaScript toggling

Core Web Vital Affected

LCP

This affects initial page load speed and rendering by conditionally applying styles based on user system preferences.

Optimization Tips

1Use CSS media queries with prefers-color-scheme to apply dark mode styles.

2Avoid toggling dark mode with JavaScript after page load to prevent layout shifts.

3Test dark mode implementation with browser DevTools Performance panel for CLS.

Performance Quiz - 3 Questions

Which method best avoids layout shifts when implementing dark mode?

A Using CSS media queries with prefers-color-scheme

B Toggling dark mode classes with JavaScript after page load

C Loading a separate dark mode stylesheet with JavaScript

D Using inline styles to switch colors on user click

DevTools: Performance

How to check: Record page load and look for layout shifts or style recalculations after initial paint; check for JavaScript execution causing style changes.

What to look for: Look for layout shift events and long style recalculation tasks indicating late dark mode toggling