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:
- Stores key-value pairs as strings.
- Persistent until explicitly cleared.
- Accessible via JavaScript on the same domain.
// 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.
