This note is for a general SSG. I use this method on this site (11ty).
"Cloak trick" to prevent flash load for multiple sites (because the javascripts always come behind the html/css).
💡 Idea: wait for DOM loaded + apply dark them bedhind the scene and then show the site without flashing between light/dark mode.
This script placed right after
<body>
.Script placed before
</body>
If you use SCSS and wanna use custom CSS variables (
var(---var-name)
) and SCSS variable ($var-name
), please read next section.In section "For CSS", we have to write again and again the color for both dark and light mode. We can use custom variables in this case!
- CSS-Tricks -- A Complete Guide to Dark Mode on the Web.