No Login Data Private Local Save

Dark Mode Toggle Demo - Online Respect System Preference

8
0
0
0

Dark Mode Toggle Demo

Online tool demonstrating prefers-color-scheme respect — Light / Dark / Auto with system preference detection

Applied Mode
Light
System Preference
Detecting...
User Selection
Auto
Respecting System
YES
Simulate System Preference: (for testing Auto mode without changing OS settings)
💻 Real System
Live UI Preview — See how components look in the current mode
Sample Card
Dashboard Overview

This card demonstrates how content renders under the active color scheme. Backgrounds, text, and borders adapt automatically.

Primary Success Danger Warning
Footer element
Button Variants
Form Elements
Alerts
Success alert message
Warning alert message
Info alert message
Mini Table
#ItemStatus
1AlphaActive
2BetaPending
3GammaIdle
Implementation Code
JavaScript 
// Detect system preference
const mq = window.matchMedia('(prefers-color-scheme: dark)');

function getSystemPreference() {
  return mq.matches ? 'dark' : 'light';
}

// Apply theme
function applyTheme(mode) {
  const resolved = mode === 'auto' 
    ? getSystemPreference() 
    : mode;
  document.documentElement
    .setAttribute('data-bs-theme', resolved);
  localStorage.setItem('theme-preference', mode);
}

// Listen for system changes
mq.addEventListener('change', () => {
  const saved = localStorage.getItem('theme-preference');
  if (saved === 'auto' || !saved) {
    applyTheme('auto');
  }
});

// Init on page load
const saved = localStorage.getItem('theme-preference') || 'auto';
applyTheme(saved);
CSS / HTML 
/* CSS Media Query */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --text: #e0e0e0;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --text: #1a1a1a;
  }
}

/* HTML with Bootstrap 5.3 */
<html data-bs-theme="light">
  <!-- or data-bs-theme="dark" -->
</html>

/* Toggle buttons */
<button onclick="applyTheme('light')">Light</button>
<button onclick="applyTheme('dark')">Dark</button>
<button onclick="applyTheme('auto')">Auto</button>
Frequently Asked Questions
What is prefers-color-scheme?

It's a CSS media feature that detects whether the user's operating system is set to light or dark mode. It returns light or dark, allowing websites to automatically match the user's system preference.

How does "Auto Mode" respect system preference?

Auto mode reads the system's prefers-color-scheme value via JavaScript's matchMedia API. It applies the corresponding theme and listens for real-time changes — so if you toggle your OS setting, the website updates instantly.

How to persist user theme preference?

Use localStorage to save the user's choice (light, dark, or auto). On page load, check localStorage first — if a value exists, apply it; otherwise fall back to system preference detection.

Which browsers support prefers-color-scheme?

All modern browsers support it: Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+, Opera 62+, and Samsung Internet. Global support is over 96% as of 2024.

How does Bootstrap 5.3 handle dark mode?

Bootstrap 5.3 uses the data-bs-theme attribute. Set it to dark or light on the <html> element. Bootstrap's CSS variables automatically adjust colors, backgrounds, and component styles accordingly.

What is the best practice for dark mode toggle?

Offer three options: Light, Dark, and Auto (system). Default to Auto to respect user preference. Persist the choice in localStorage. Use CSS variables or Bootstrap's data-bs-theme for seamless transitions.

How to detect system color scheme changes in real time?

Use window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', callback). The callback fires whenever the user changes their OS-level appearance setting.

Why should websites respect system preferences?

Respecting system preferences improves accessibility, reduces eye strain for users who prefer dark mode, and provides a seamless experience. It shows users that you value their personal settings and comfort.

Can I use CSS-only dark mode without JavaScript?

Yes! Use @media (prefers-color-scheme: dark) { ... } in your CSS. However, this doesn't allow users to manually override the setting. For a toggle, you'll need minimal JavaScript.

What's the difference between data-bs-theme and CSS variables?

data-bs-theme is Bootstrap's built-in mechanism that toggles all Bootstrap CSS variables at once. Custom CSS variables require manual definition for each theme, offering more control but requiring more setup.

🔧 Related Tools