mirror of
https://github.com/falsycat/ar.falsy.cat.git
synced 2024-12-26 16:34:51 +00:00
Merge pull request #9 from brechtcs/template
Execute darkmode script before first render
This commit is contained in:
commit
27c33f8334
@ -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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
@ -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>
|
@ -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>
|
@ -13,10 +13,4 @@
|
|||||||
{{partial "footer.html" .}}
|
{{partial "footer.html" .}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{- with resources.Get "darkmode.js" | minify -}}
|
|
||||||
<script>
|
|
||||||
{{.Content | safeJS }}
|
|
||||||
</script>
|
|
||||||
{{- end -}}
|
|
||||||
{{end}}
|
{{end}}
|
@ -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" . }}
|
Loading…
Reference in New Issue
Block a user