Merge pull request #9 from brechtcs/template

Execute darkmode script before first render
This commit is contained in:
Jacky Zhao 2021-08-13 17:45:32 -04:00 committed by GitHub
commit 27c33f8334
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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) => {
} }
} }
window.addEventListener('DOMContentLoaded', () => {
// Darkmode toggle
const toggleSwitch = document.querySelector('#darkmode-toggle')
// listen for toggle // listen for toggle
toggleSwitch.addEventListener('change', switchTheme, false) 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>
{{- with resources.Get "darkmode.js" | minify -}}
<script>
{{.Content | safeJS }}
</script>
{{- end -}}
{{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" . }}