Hi, Was modifying the source theme to include a dark/light mode Toggle and I did, but I still have some questions and need your valuable feedback.
The site running the theme is https://www.techweirdo.net/
And my questions are:
Should I go with default to dark and toggle to light or the opposite?
Is the button placement intuitive? I mean will my visitors notice and understand easily the function and placement of the button?
I am currently storing the user preference in session storage to use for a single visit, can I tie the preference for members for their whole account ?
And also can please give me some feedback regarding my implementation of right sidebars in desktop mode.
Also I followed Ghost’s guide in implementing avif and webp images automatically, but Pagespeed is screaming at me for using as deprecated API. Does it hurt in any ways?
Very cool. Stuff like this saves me tons of time doing it myself. Have a fully functioning (and actually nice) dark mode in less than 20 minutes after I already styled my light theme over a couple of weeks.
Still a little to do, but perfect base to get things done much faster. Appreciate your post here and your article!
I decided to go with user device preferences, personally. Since I have Ghost connected to Discourse, I wanted it to be a little more seamless between both software — and I think automatically choosing based on device preference makes sense (upon the first visit only).
This is how I did it; I supplemented the code from your blog, and then just wrote this short script to be placed after it:
<script>
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Check: if user has visited before, only set the dark or light preference the first time
// — otherwise the theme switch toggle will be overridden on every page load.
document.addEventListener('DOMContentLoaded', () => {
const hasVisited = localStorage.getItem('hasVisited');
if (!hasVisited && prefersDarkScheme.matches) {
console.log("Device theme detected on first visit: Dark Mode");
toggleDarkMode("isDarkMode");
} else {
console.log("Device theme detected on first visit: Light Mode");
}
// Set: the flag in localStorage for future visits
localStorage.setItem('hasVisited', 'true');
});
// Listen: for an event to happen from user changing their device preferences
// This just flicks the theme switch toggle, pretty much
prefersDarkScheme.addEventListener("change", (event) => {
if (event.matches) {
console.log("User selected new system preference: Dark Mode");
} else {
console.log("User selected new system preference: Light Mode");
toggleDarkMode("isDarkMode");
}
});
</script>
This will only check the visitor once to see if they’ve visited before or not, then sets their initial dark or light theme preference. e.g. in Windows, it would be “default app mode”:
The reason it only sets the theme once is so that the theme toggle works persistently across pages, instead of reloading the device preference every time. We store the visited value in hasVisited local storage.
The second part allows the user to change their device preference and it will automatically reflect on the website when you switch your app’s preference setting — it’s basically the same thing as using the theme switch toggle directly on the site.
.
