As I was working on this website, I stumbled upon a curious little problem: saving a file (like the article I’m working on) caused my theme switcher to be out of sync. Rephrased more generically: DOM manipulations that are applied by client-side JavaScript get lost when Eleventy refreshes the page in watch mode. Of course, it’s a development-only problem, so not a big deal in the grand scheme of things, but still. Here is a quick article about my investigation, and how I fixed it. About the theme switcher The theme switcher is not overly complicated, but there is a bit of logic: it loops between 3 states (light, auto, dark), it stores the preferred theme in local storage, and it respects the OS/browser level preference. This is all neatly packaged in a ThemeManager class for convenience and testability (also very generic, so you could just use it). Now, on page load, I would resolve the current theme, and assign a data-theme attribute to the <html> element containing the right theme.…
No comments yet. Log in to reply on the Fediverse. Comments will appear here.