User preference media queries

User settings का सम्मान करें

Media queries operating-system preferences पढ़ सकते हैं। prefers-color-scheme light या dark mode पहचानता है, prefers-reduced-motion कम animation चाहने वाले users को पहचानता है, और prefers-contrast अधिक contrast के अनुरोध को पहचानता है।

Dark mode और reduced motion

Colours को CSS variables के रूप में define करें, dark mode के लिए उन्हें override करें और गैर-जरूरी motion बंद करें।

:root { --bg: #fff; --text: #111; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* dvh avoids the mobile browser toolbar cutting off 100vh */
.hero { min-height: 100dvh; }

दोनों modes test करें

DevTools में Rendering खोलें और prefers-color-scheme व prefers-reduced-motion emulate करें। दोनों themes में contrast जाँचें।

त्वरित जाँच

त्वरित जाँच: कम animation चाहने वाले user को कौन-सा media feature पहचानता है?

• prefers-reduced-motion
• prefers-color-scheme
• orientation
• hover