How to override css prefers-color-scheme setting

javascript

responsive-design

performance

best-practices

byAlex Kataev·Nov 18, 2024

@media (prefers-color-scheme: dark) {
  body {
    /* Generally, I like dark themes, but... Nah, let's make it white */
    background: #ffffff;
    color: #000000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    /* Who said, LET THERE BE DARK */}
    background: #000000;
    color: #ffffff;
  }
}

And voilà! We've got anarchy over prefers-color-scheme rules. This CSS snippet commands your site to display lighter themes for those who worship the darkness and vice versa. It seems your default color scheme can have a mind of its own, doesn't it?

Comprehensive Solution - Store User Preferences

For an advanced needs you might want to remember user's decision. With local storage on hand, you have got a perfect tool to tame themes according to user's will:

// Hey Javascript, remember my choices, I might change my mind later
localStorage.setItem('themePreference', 'dark');

// My future self will thank me for this
const themePreference = localStorage.getItem('themePreference');

User Control - Toggle Theme with JavaScript

Now, let's involve JavaScript for a smooth theme transition. Detect users' system preferences, toggle between different themes and apply cross-browser solutions:

const toggleThemeBtn = document.getElementById('theme-toggle');

// You know we can redefine the laws of Universe, right? 
toggleThemeBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
  const newTheme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
  localStorage.setItem('themePreference', newTheme);
  // See mom, I'm changing the reality. Told ya, I can!
  document.documentElement.setAttribute('data-theme', newTheme);
});

Plan B — Ensuring Compatibility

Some elements are a bit stubborn (looking at you, Microsoft Edge!). Luckily, we got a mise-en-place with additional JavaScript:

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  // Edge, you are the weakest link! Good bye
  document.documentElement.setAttribute('data-theme', 'default');
}

Custom Elements - User-empowered Theme Switching

Designing a Switch

Give your users a WAND (literally!). Introduce a toggle element in the mix and dress it up with icons:

<label class="switch">
  <input type="checkbox" id="theme-toggle" checked>
  <span class="slider round"></span>
</label>

A little bit of spice (a.k.a CSS) for our stew:

.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* The size is adjustable as per your taste */
  height: 34px; /* Ditto */
}

.switch .slider:after {
  content: '\263E'; /* Dark LORDS are pleased */
  /* Additional styling for our LORD OF LIGHT */
}

Syncing with Hogwarts (user's preferences)

All set. Now we just have to make sure our website adapts to the light or to the shadows accordingly:

const userSystemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const themeToggle = document.getElementById('theme-toggle');

// I solemnly swear that I am up to no good
document.documentElement.setAttribute('data-theme', userSystemPrefersDark ? 'dark' : 'light');

// Mischief Managed
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});