Add dark mode with toggler switch in nav.

Default mode is either system preference if supported, or light mode if
not.

Highlight.js removed from config.toml as it did not seem to be in use.
The "monokai" theme for codeblocks has been changed to "pygments" theme
to support dark/light mode switching. It's not amazing on dark mode but
it's better than eye strain.

Author: meldra

config.toml

@@ -51,12 +51,6 @@ publishDir = "../website"
     date_format = "Mon, Jan 2, 2006"
     description = "A Rosetta Stone for Software Metadata"
 
-    # options for highlight.js (version, additional languages, and theme)
-    highlightjsVersion = "9.10.0"
-    highlightCDN = "//cdn.bootcss.com"
-    highlightjsLang = ["r", "yaml", "json"]
-    highlightjsTheme = "github"
-
     [params.logo]
     url = "logo.png"
     width = 50
@@ -67,3 +61,5 @@ publishDir = "../website"
   [markup.goldmark]
     [markup.goldmark.renderer]
       unsafe = true
+  [markup.highlight]
+    style = 'pygments'

themes/CodeMeta-Pyramids/layouts/partials/head.html

@@ -15,10 +15,11 @@
   <link rel="stylesheet" type="text/css"
         href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
   <!-- CSS Files -->
   <link href="/css/core/bootstrap.css" rel="stylesheet" />
-  <link href="/css/codemeta.css" rel="stylesheet" />
   <link href="/css/material-kit.css?v=2.0.4" rel="stylesheet" />
+  <link href="/css/codemeta.css" rel="stylesheet" />
 
   <!-- Additional icons: fa-docker, academicons, R-logo -->
   <link rel="stylesheet" href="https://cdn.rawgit.com/gaborcsardi/r-font/master/rlogo.css">

themes/CodeMeta-Pyramids/layouts/partials/nav.html

@@ -20,6 +20,15 @@
                title = "{{ .Name }}">{{ .Pre }} {{ .Name }}</a>
           </li>
           {{ end }}
+          <li>
+			<div class="form-check dark-light-toggler">
+				<input class="form-check-input" type="checkbox" id="darkModeSwitch">
+				<label class="form-check-label" for="darkModeSwitch">
+					<i role="presentation" class='bi bi-sun-fill d-none' id='light-mode-bi' title="Light mode"></i>
+					<i role="presentation" class='bi bi-moon-stars-fill' id='dark-mode-bi' title="Dark mode"></i>
+				</label>
+			</div>
+          </li>
         </ul>
       </div>
     </div>

themes/CodeMeta-Pyramids/static/css/codemeta.css

@@ -6,9 +6,18 @@
 
  */
 
+/*! 
+ * dark mode support for unstyled elements
+ */
+ 
+:root {
+  color-scheme: light dark;
+}
+
 /*!
  *  Make the header colour change on-scroll smoother
  */
+ 
 #sectionsNav {
   transition: all 0.25s;
 }
@@ -20,3 +29,66 @@
 .navbar {
   --bs-navbar-toggler-focus-width: none;
 }
+
+/*!
+ * Dark mode toggler button
+ */
+
+li.dark-light-toggler {
+  height: 50px;
+}
+
+.dark-light-toggler .form-check-label {
+  padding: 0px;
+  margin-top: 10px;
+  margin-left: 25px;
+  font-size: 1.25em;
+}
+
+/*!
+ * These are the base colours which are using the Bootstrap
+ * variables which will work with dark/light mode switching
+ * 
+ * The definitions here are overriding material-kit.css
+ */
+
+body {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+}
+
+.main{
+  background-color: var(--bs-secondary-bg);
+}
+
+[data-bs-theme=light] div.highlight {
+  border: 1px solid var(--bs-dark-border-subtle);
+  padding: 10px 10px 0px 10px;
+}
+
+[data-bs-theme=dark] div.highlight {
+  border: 1px solid var(--bs-body-bg);
+  padding: 10px 10px 0px 10px;
+}
+
+.navbar {
+  background-color: var(--bs-body-bg) !important;
+}
+
+[data-bs-theme=dark] .highlight {
+  background-color: var(--bs-border-color) !important;
+}
+
+[data-bs-theme=dark] .navbar {
+  color: var(--bs-body-color) !important;
+}
+
+@media only screen and (max-width: 992px) {
+  .navbar-collapse, .navbar-collapse::after {
+    background-color: var(--bs-body-bg) !important;
+  }
+  .nav-open .nav-item a{
+    color: var(--bs-body-color) !important;
+  }
+}
+

themes/CodeMeta-Pyramids/static/js/codemeta.js

@@ -6,6 +6,8 @@
 
  */
 
+// Navbar transparency at top of scroll
+
 const headerEl = document.querySelector('#sectionsNav');
 
 function manageNav() {
@@ -23,3 +25,34 @@ if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
 window.addEventListener('scroll', () => {
   manageNav();
 });
+
+// Darkmode toggler
+document.addEventListener('DOMContentLoaded', (event) => {
+    const htmlEl = document.documentElement;
+    const switchEl = document.getElementById('darkModeSwitch');
+    const darkEl = document.getElementById('dark-mode-bi');
+    const lightEl = document.getElementById('light-mode-bi');
+
+    // Set the default theme to light if no setting is found in local storage
+    const currentTheme = localStorage.getItem('bsTheme') || 'light';
+    htmlEl.setAttribute('data-bs-theme', currentTheme);
+    switchEl.checked = currentTheme === 'light';
+
+    switchEl.addEventListener('change', function () {
+        if (this.checked) {
+            htmlEl.setAttribute('data-bs-theme', 'light');
+            localStorage.setItem('bsTheme', 'light');
+            if (darkEl.classList.contains('d-none')) {
+				lightEl.classList.add('d-none');
+				darkEl.classList.remove('d-none');
+			}
+        } else {
+            htmlEl.setAttribute('data-bs-theme', 'dark');
+            localStorage.setItem('bsTheme', 'dark');
+            if (lightEl.classList.contains('d-none')) {
+				darkEl.classList.add('d-none');
+				lightEl.classList.remove('d-none');
+			}
+        }
+    });
+});