add darkmode

layouts/_default/baseof.html

@@ -26,7 +26,12 @@
 
   <link type="text/css"
         rel="stylesheet"
-        href="{{ `css/hyde.css` | relURL }}">
+        href="{{ `css/hyde-light.css` | relURL }}">
+
+        <link type="text/css"
+        rel="stylesheet"
+        href="{{ `css/hyde-dark.css` | relURL }}"
+        media="(prefers-color-scheme: dark)">
 
   {{ partial "theme-color.html" . }}
 
@@ -59,5 +64,7 @@
   <script src="{{ . | relURL }}"></script>
   {{- end}}
 
+  <script src="{{ `js/colour-toggle.js` | relURL }}"></script>
+
 </body>
 </html>

layouts/partials/sidebar.html

@@ -40,10 +40,16 @@
     <section class="social-icons">
       {{ range $item := .Site.Params.socialIcons }}
       <a href="{{ $item.url }}" rel="me" title="{{ $item.title }}" target="_blank">
-        <!-- i class="{{ $item.icon }}" aria-hidden="true"></i -->
-	<img src='/fa/svgs/{{ $item.icon }}.svg' style='width:32px; height:32px; display:inline; filter:invert(100%)'>
+	      <img src='/fa/svgs/{{ $item.icon }}.svg' style='width:32px; height:32px; display:inline; filter:invert(100%)'>
       </a>
       {{ end }}
     </section>
+
+    <section></section>
+      <a class="colour-toggle" href="javascript:toggleColorScheme();">
+        <span id="toggle-light">light mode</span>
+        <span id="toggle-dark">dark mode</span>
+      </a>
+    </section>
   </div>
 </aside>