# Respect Color Scheme Preference **MUST** · **ID:** `design-dark-preferences` · **Category:** design **Source:** [Tailwind](https://tailwindcss.com/docs) **Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-dark-preferences > MUST: Apply dark class in inline script before first paint to prevent theme flash Initialize theme from prefers-color-scheme before page renders If you wait for JavaScript to run before checking the color scheme, users see a flash of the wrong theme (FART). Inline a script in that runs synchronously before render. ## Bad — do not do this `design-dark-preferences-bad` ```tsx export function DarkPreferencesBad() { return (

Deferred Theme Check

{`// In React useEffect (too late!)
useEffect(() => {
  const prefersDark = matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;

  if (prefersDark) {
    document.documentElement
      .classList.add('dark');
  }
}, []);`}

Initial

Light theme

...

After JS

Dark theme

Theme applied after render causes jarring flash (FART)

); } ``` ## Good — do this `design-dark-preferences-good` ```tsx export function DarkPreferencesGood() { return (

Inline Theme Script

{`
  
`}

Page Load

Correct theme instantly

No Flash

Smooth experience

Script runs before first paint, preventing theme flash

); } ``` ## References - [Avoiding FART](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/) - [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)