No Login Data Private Local Save

prefers‑color‑scheme Live Preview - Online Dark/Light

9
0
0
0
Preview Mode:
Your System: Light
preview.color-scheme.demo
CSS: @media query
/* Detect system color scheme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a2e;
    color: #e0e0e0;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #1a1d23;
  }
}
CSS: color-scheme property
/* Tell browser which scheme to use */
:root {
  color-scheme: light dark;
}
.dark-theme {
  color-scheme: dark;
  --bg: #1e1e2e;
  --text: #e0e0e0;
  --surface: #2d2d3f;
}
Frequently Asked Questions
What is prefers-color-scheme?

prefers-color-scheme is a CSS media feature that detects whether the user has requested a light or dark color theme at the operating system level. It allows websites to automatically adapt their appearance to match the user's system preference, providing a seamless and comfortable viewing experience. The possible values are light, dark, and no-preference.

Which browsers support prefers-color-scheme?

prefers-color-scheme is widely supported across all modern browsers: Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+, and Opera 62+. It also works on mobile browsers including iOS Safari 13+ and Chrome for Android. Global browser support exceeds 97% as of 2025, making it safe for production use.

What is the difference between color-scheme and prefers-color-scheme?

prefers-color-scheme is a media query that detects the user's OS-level preference (read-only). color-scheme is a CSS property that tells the browser which color scheme an element should render with. Setting color-scheme: dark on an element makes native UI controls (inputs, selects, scrollbars, buttons) render in their dark variant. They work best together: use prefers-color-scheme to detect preference, and color-scheme to inform the browser how to render form elements.

How can I detect color scheme in JavaScript?

Use window.matchMedia('(prefers-color-scheme: dark)') in JavaScript. This returns a MediaQueryList object with a matches boolean property. You can also listen for real-time changes using addEventListener('change', callback), which fires whenever the user toggles their system theme. This enables dynamic, instant theme switching without page reload.

Why are my form inputs not changing in dark mode?

This is often because the color-scheme CSS property hasn't been set. While prefers-color-scheme detects the system setting, native form controls won't automatically switch to dark styling unless you explicitly set color-scheme: dark on the :root or body element. Add :root { color-scheme: light dark; } to your global styles to enable automatic adaptation of native UI elements.

How do I implement a manual dark/light toggle for my website?

The best practice is a three-state toggle: Light, Dark, and Auto (follow system). Store the user's choice in localStorage and apply the appropriate class or attribute to the <html> element. Use CSS custom properties (variables) scoped to [data-theme="dark"] and [data-theme="light"] selectors for full control. In Auto mode, fall back to prefers-color-scheme media queries.

Can I emulate prefers-color-scheme in DevTools?

Yes! In Chrome DevTools, open the Command Menu (Cmd+Shift+P / Ctrl+Shift+P), type "Show Rendering," and in the Rendering tab you'll find an option to emulate prefers-color-scheme. In Firefox, open DevTools Settings and check "Enable prefers-color-scheme simulation." This tool above provides a live preview alternative without opening DevTools.

Does prefers-color-scheme affect SEO?

Indirectly, yes. Google considers Core Web Vitals and user experience as ranking factors. A well-implemented dark mode reduces eye strain, improves readability in low-light environments, and can increase time-on-page. Additionally, respecting user preferences signals good UX design. While prefers-color-scheme itself isn't a direct ranking signal, the improved engagement metrics can positively impact SEO.

Pro Tip: Toggle between Side-by-Side mode to compare Light and Dark themes simultaneously. Use Auto mode to see how your design responds to your actual system setting in real time.
🔧 Related Tools