Execute darkmode script before first render

Brecht Savelkoul

2021-08-13 f9920f6d736754372075c8f1014ab9440e333317

Execute darkmode script before first render

 assets/darkmode.js

@@ -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 @@
  }
}

// listen for toggle
toggleSwitch.addEventListener('change', switchTheme, false)
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
  }
})

 layouts/404.html

@@ -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>
</html>

 layouts/_default/single.html

@@ -18,13 +18,6 @@
    </article>
    {{partial "footer.html" .}}
</div>

{{- with resources.Get "darkmode.js" | minify -}}
<script>
  {{.Content | safeJS }}
</script>
{{- end -}}

</body>

</html>
</html>

 layouts/index.html

@@ -13,10 +13,4 @@
        {{partial "footer.html" .}}
    </div>
</div>

{{- with resources.Get "darkmode.js" | minify -}}
<script>
  {{.Content | safeJS }}
</script>
{{- end -}}
{{end}}
{{end}}

 layouts/partials/head.html

@@ -17,5 +17,11 @@
    </style>
    {{end}}
    {{end}}

    {{- with resources.Get "darkmode.js" | minify -}}
    <script>
      {{.Content | safeJS }}
    </script>
    {{- end -}}
</head>
{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics.html" . }}