Reasonably happy with the light/dark mode toggle

* button in the bottom of the sidebar
* respects the browser pref is avaiable
* saves setting to localStorage
* provides an unset button to clear localStorage

_includes/footer_custom.html

@@ -1,5 +1,4 @@
 <!-- This file comes from Just The Docs.
-
  This footer should be included on all EECS/DS sites.
 -->
 

_includes/head_custom.html

@@ -4,42 +4,3 @@
   <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/fontawesome.css" rel="stylesheet" />
   <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/solid.css" rel="stylesheet" />
   <!-- <link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/brands.css" rel="stylesheet" /> -->
-
-<!-- TODO: Contribute to JtD. Needs a better location. -->
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    if (!jtd) { return; }
-
-    // If the browser suggests a color scheme, and user hasn't saved/switch one yet..
-    if (window.matchMedia && !localStorage['jtd-theme']) {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        jtd.setTheme('dark');
-      } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-        jtd.setTheme('light');
-      }
-    } else if (localStorage['jtd-theme']) {
-      jtd.setTheme(localStorage['jtd-theme']);
-    }
-
-    const toggleSchemeBtn = document.querySelector('.js-toggle-dark-mode');
-    jtd.addEvent(toggleSchemeBtn, 'click', function() {
-      if (jtd.getTheme() === 'dark') {
-        localStorage['jtd-theme'] = 'light';
-        jtd.setTheme('light');
-        toggleSchemeBtn.textContent = '🌙 Dark Mode';
-        toggleSchemeBtn.ariaLabel = 'Switch to Dark Mode';
-      } else {
-        jtd.setTheme('dark');
-        localStorage['jtd-theme'] = 'dark';
-        toggleSchemeBtn.textContent = '🔆 Light Mode';
-        toggleSchemeBtn.ariaLabel = 'Switch to Light Mode';
-      }
-    });
-
-    const unsetColorScheme = document.querySelector('.js-unset-color-scheme');
-    jtd.addEvent(unsetColorScheme, 'click', function() {
-      delete localStorage['jtd-theme'];
-      jtd.setTheme('default');
-    });
-  });
-</script>

_includes/nav_footer_custom.html

@@ -1,9 +1,15 @@
 <!-- This file adds links at the bottom of the sidebar on the left. -->
 
 {% if site.class_archive_path %}
-<section class="site-footer" aria-label="Footer: site archive">
+<section class="site-footer py-1" aria-label="Footer: site archive">
   <a href="{{ site.class_archive_path }}"
     target="_blank" rel="noopener nofollow">View all course offerings
     <i class="fa-solid fa-external-link" aria-hidden="true"></i></a>
 </section>
 {% endif %}
+
+{% if site.hide_color_scheme_toggle != 'true' %}
+  <div class="site-footer m-1">
+    {% include toggle-color-scheme.html %}
+  </div>
+{% endif %}

_includes/toggle-color-scheme.html

@@ -0,0 +1,80 @@
+{% capture btn_aria_label %}
+  {%- if site.color_scheme == 'dark' -%}
+  Switch to Light Mode
+  {%- else -%}
+  Switch to Dark Mode
+  {%- endif -%}
+{% endcapture %}
+
+<span class="fs-3">
+  <button type="button"
+    class="btn js-toggle-dark-mode btn-outline"
+    style="margin-right: -2px; border-top-right-radius: 0; border-bottom-right-radius: 0;"
+    aria-label="{{ btn_aria_label }}">
+    {%- if site.color_scheme == 'dark' -%}
+    🔆 Light Mode
+    {%- else -%}
+    🌙 Dark Mode
+    {%- endif -%}
+  </button>
+  <button type="button"
+    class="btn js-unset-color-scheme btn-outline px-1"
+    style="margin-left: -2px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+    aria-label="Reset color scheme"
+    >⎌</button>
+</span>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    if (!jtd) { return; }
+
+    const toggleSchemeBtn = document.querySelector('.js-toggle-dark-mode');
+    const unsetColorScheme = document.querySelector('.js-unset-color-scheme');
+
+    // If the browser suggests a color scheme, and user hasn't saved/switch one yet..
+    if (window.matchMedia && !localStorage['jtd-theme']) {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        jtd.setTheme('dark');
+        toggleSchemeBtn.textContent = '🔆 Light Mode';
+        toggleSchemeBtn.ariaLabel = 'Switch to Light Mode';
+      } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+        jtd.setTheme('light');
+        toggleSchemeBtn.textContent = '🌙 Dark Mode';
+        toggleSchemeBtn.ariaLabel = 'Switch to Dark Mode';
+      }
+    } else if (localStorage['jtd-theme']) {
+      jtd.setTheme(localStorage['jtd-theme']);
+    }
+
+    jtd.addEvent(toggleSchemeBtn, 'click', function() {
+      if (jtd.getTheme() === 'dark') {
+        localStorage['jtd-theme'] = 'light';
+        jtd.setTheme('light');
+        toggleSchemeBtn.textContent = '🌙 Dark Mode';
+        toggleSchemeBtn.ariaLabel = 'Switch to Dark Mode';
+      } else {
+        jtd.setTheme('dark');
+        localStorage['jtd-theme'] = 'dark';
+        toggleSchemeBtn.textContent = '🔆 Light Mode';
+        toggleSchemeBtn.ariaLabel = 'Switch to Light Mode';
+      }
+    });
+
+    // Add a way to unset the saved theme.
+    // "default" respect's the site config setting, but not the user browser pref
+    // So, check the pref and set the theme to the preferred one, if possible.
+    jtd.addEvent(unsetColorScheme, 'click', function() {
+      delete localStorage['jtd-theme'];
+
+      if (window.matchMedia) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          jtd.setTheme('dark');
+        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+          jtd.setTheme('light');
+        }
+      } else {
+        jtd.setTheme('default');
+      }
+    });
+  });
+</script>

home.md

@@ -10,11 +10,6 @@ seo:
 
 # UC Berkeley Class Site Template
 
-<p>
-  <button class="btn js-toggle-dark-mode"></button>
-</p>
-
-
 Just the Class is a GitHub Pages template developed for the purpose of quickly deploying course websites. In addition to serving plain web pages and files, it provides a boilerplate for:
 
 - [announcements](announcements.md),