Execute darkmode script before first render

This commit is contained in:
Brecht Savelkoul 2021-08-13 22:46:00 +02:00
parent 8850976d8d
commit f9920f6d73
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 currentTheme = localStorage.getItem('theme') ?? userPref
if (currentTheme) {
document.documentElement.setAttribute('saved-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true
}
}
const switchTheme = (e) => {
@ -22,5 +16,14 @@ const switchTheme = (e) => {
}
}
window.addEventListener('DOMContentLoaded', () => {
// 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>
</div>
</div>
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
</body>
</html>

View file

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

View file

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

View file

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