Dark Mode Toggle with Ghost Pro

Themes
4

That’s the problem. You shouldn’t need to wait for DOM to finish loading for changing the theme.

Eg…

<style>
/* standard styles */
...

/* dark mode overrides */
html.dark .my-element { ... };
...
</style>

<script>
// render-blocking, ensures theme preference class is present for first paint
const theme = localStorage.getItem('theme') || 'light';
document.querySelector('html').classList.add(theme);

// non-render-blocking, needs DOM to be loaded
document.addEventListener('DOMContentLoaded', function () {
    // toggle button setup etc
});
</script>
1 Like