hugo-bearblog : avoid onclick inline script

assets/js/darkmode.js

@@ -1,7 +1,3 @@
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
-    localStorage.setItem('dark-mode', 'true');
-}
-
 function darkmode() {
     if (localStorage.getItem('dark-mode') === 'false') {
         darkmode_enable();
@@ -21,3 +17,7 @@ function darkmode_disable() {
     document.body.classList.remove("dark-mode");
     localStorage.setItem('dark-mode', 'false');
 }
+
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
+    localStorage.setItem('dark-mode', 'true');
+}

assets/js/darkmode_click.js

@@ -0,0 +1 @@
+document.getElementById("dark-mode-button").addEventListener("click", darkmode);

layouts/_default/baseof.html

@@ -63,6 +63,15 @@
   Simply place a custom_body.html into
   your local /layouts/partials-directory -->
   {{- partial "custom_body.html" . -}}
+
+  {{- /* Onclick Javascript */}}
+  {{- $darkmode_onclick := (resources.Get "js/darkmode_click.js") | resources.Minify }}
+  {{- if not site.Params.assets.disableFingerprinting }}
+    {{- $darkmode_onclick := $darkmode_onclick | fingerprint }}
+    <script crossorigin="anonymous" src="{{ $darkmode_onclick.RelPermalink }}" integrity="{{ $darkmode_onclick.Data.Integrity }}"></script>
+  {{ else }}
+    <script crossorigin="anonymous" src="{{ $darkmode_onclick.RelPermalink }}"></script>
+  {{ end }}
 </body>
 
 </html>

layouts/partials/nav.html

@@ -5,6 +5,6 @@
 {{ with .Site.GetPage "/blog" }}
 <a href="{{ "blog" | relURL }}">Blog</a>
 {{ end }}
-<a id="dark-mode-button" onclick="darkmode()" >
+<a id="dark-mode-button">
     <span>Toggle-Dark-Mode</span>
   </a>