Execute darkmode script before first render

This commit is contained in:
Brecht Savelkoul 2021-08-13 22:46:00 +02:00
parent b5ed5aa14b
commit 9d47dc942e
5 changed files with 21 additions and 31 deletions

View File

@ -1,14 +1,8 @@
// Darkmode toggle
const toggleSwitch = document.querySelector('#darkmode-toggle')
const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
const currentTheme = localStorage.getItem('theme') ?? userPref const currentTheme = localStorage.getItem('theme') ?? userPref
if (currentTheme) { if (currentTheme) {
document.documentElement.setAttribute('saved-theme', currentTheme); document.documentElement.setAttribute('saved-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true
}
} }
const switchTheme = (e) => { const switchTheme = (e) => {
@ -22,5 +16,14 @@ const switchTheme = (e) => {
} }
} }
// listen for toggle window.addEventListener('DOMContentLoaded', () => {
toggleSwitch.addEventListener('change', switchTheme, false) // Darkmode toggle
const toggleSwitch = document.querySelector('#darkmode-toggle')
// listen for toggle
toggleSwitch.addEventListener('change', switchTheme, false)
if (currentTheme === 'dark') {
toggleSwitch.checked = true
}
})

View File

@ -11,12 +11,6 @@
<a href="/">↳ Let's get you home.</a> <a href="/">↳ Let's get you home.</a>
</div> </div>
</div> </div>
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
</body> </body>
</html> </html>

View File

@ -18,13 +18,6 @@
</article> </article>
{{partial "footer.html" .}} {{partial "footer.html" .}}
</div> </div>
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
</body> </body>
</html> </html>

View File

@ -13,10 +13,4 @@
{{partial "footer.html" .}} {{partial "footer.html" .}}
</div> </div>
</div> </div>
{{end}}
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
{{end}}

View File

@ -17,5 +17,11 @@
</style> </style>
{{end}} {{end}}
{{end}} {{end}}
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
</head> </head>
{{ template "_internal/google_analytics.html" . }} {{ template "_internal/google_analytics.html" . }}