How to save and manage dark mode preferences in Mediumish

-

Why store theme preferences

Without storing user preferences, your site will always revert to the default theme on each visit. This means a dark mode user will need to switch every time, which is inconvenient and lowers the overall user experience.

By saving preferences, you ensure users get the same theme they chose last time, creating a sense of personalization and consistency across sessions.

Understanding localStorage basics

localStorage is a built-in web API that allows you to store small amounts of data directly in the user's browser. It persists even after the browser is closed, making it perfect for saving theme preferences.

Key characteristics of localStorage:

// Example: saving a value
localStorage.setItem('theme', 'dark');

// Example: retrieving a value
var theme = localStorage.getItem('theme');

Detecting system color scheme preference

Modern browsers allow detection of a user's OS-level theme setting via the prefers-color-scheme media query. This can be used as a fallback when no saved preference exists.

var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
  document.documentElement.setAttribute('data-theme', 'dark');
} else {
  document.documentElement.setAttribute('data-theme', 'light');
}

Using this ensures first-time visitors see the mode they are most comfortable with by default.

Saving user theme choice

When a user clicks a dark mode toggle button, you can store their choice in localStorage. This example uses an HTML button with an event listener:

// Example toggle function
var toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', function() {
  var currentTheme = document.documentElement.getAttribute('data-theme');
  var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

Every click updates both the visual theme and the saved preference, ensuring it persists across visits.

Applying saved preference on page load

Place this script at the very top of your <head> so the theme loads instantly without flashing the wrong one:

<script>
(function() {
  var savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
  }
})();
</script>

This approach ensures your site respects the user's choice if saved, or defaults to system preference otherwise.

Syncing with system preference changes

Some users change their OS theme while browsing. You can listen for these changes and update your site automatically:

var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', function(e) {
  var newTheme = e.matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

This ensures the theme remains consistent with the system setting unless the user explicitly chooses otherwise.

FAQ

Q: Is localStorage supported on all browsers?

A: Yes, it is supported on all modern browsers, including mobile ones.

Q: Can I use cookies instead of localStorage?

A: Yes, but localStorage is simpler for front-end only themes like Mediumish.

Q: Will system preference override user choice?

A: Not if you always check for saved preferences first, then fallback to system preference.

Comments

Post a Comment