Dark mode page passes a11y specs

_config.yml

@@ -172,6 +172,7 @@ timezone: America/Los_Angeles
 include:
   - LICENSE
   - .htaccess
+  - robots.txt
 
 exclude:
   - .sass-cache/

_includes/footer_custom.html

@@ -13,10 +13,10 @@
 </p>
 
 <!-- Use this to add additional content. -->
-<p class="text-small text-grey-dk-100 m-0">
+<p class="text-small text-lighter m-0">
   Copyright ©{{ "now" | date: "%Y" }}, Regents of the University of Californa and respective authors.
 </p>
 
-<p class="fs-1 text-grey-dk-100 my-1">
+<p class="fs-1 text-lighter my-1">
   This site is built following the <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Berkeley Class Site <i class="fa-solid fa-external-link" aria-hidden=true></i></a> template, which is generously based on the <a href="https://github.com/kevinl/just-the-class" target="_bank" rel="noopener">Just the Class <i class="fa-solid fa-external-link" aria-hidden=true></i></a>, and <a href="https://github.com/just-the-docs/just-the-docs" target="_bank" rel="noopener">Just the Docs <i class="fa-solid fa-external-link" aria-hidden=true></i></a> templates.
 </p>

_includes/nav_footer_custom.html

@@ -1,9 +1,9 @@
 <!-- This file adds links at the bottom of the sidebar on the left. -->
 
 {% if site.class_archive_path %}
-<footer class="site-footer">
+<section class="site-footer" 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>
-</footer>
+</section>
 {% endif %}

_sass/color_schemes/berkeley-dark.scss

@@ -1,8 +1,37 @@
 // Default JTD color scheme
 @import "./color_schemes/dark";
-
+// Then load general Berkeley data
 @import './berkeley/variables';
+
+// Override dark-mode variables here
+$grey-dk-400: #0C0A0E !default;
+$body-background-color: $grey-dk-400;
+$sidebar-color: $grey-dk-400;
+$search-background-color: $grey-dk-400;
+$body-text-color: $white;
+
+$link-color: #406FFE;
+$hover-focus-link-color: darken($link-color, 10%);
+
+// TODO(template): We need to figure out a much better solution!
+// This swaps the "dk" and "lt" variants from the original JTD files.
+$grey-lt-000: #959396 !default;
+$grey-lt-100: #5c5962 !default;
+$grey-lt-200: #44434d !default;
+$grey-lt-250: #302d36 !default;
+$grey-lt-300: #27262b !default;
+
+$grey-dk-000: #f5f6fa !default;
+$grey-dk-100: #eeebee !default;
+$grey-dk-200: #ecebed !default;
+$grey-dk-300: #e6e1e8 !default;
+
 @import './berkeley/berkeley';
 
 // Just the Class customizations are all loaded in one file.
 @import '../just-the-class/just-the-class';
+
+// This is intended to be used for the footer
+.text-lighter {
+  color: darken($body-text-color, 20%);
+}

_sass/color_schemes/berkeley/berkeley.scss

@@ -1,9 +1,8 @@
 // This config applies to all berkeley courses.
 // It is loaded before all Just-the-class customizations
 
-// h1 {
-//   font-family: serif;
-// }
+// UC Berkeley fonts 'Inter' (sans serif) 'Source Serif' (serif), and 'Source Code Pro' (monospace)
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
 
 // Override default JTD CSS for larger/more accessibile fonts.
 html {
@@ -33,3 +32,8 @@ a,
 a:not([class]):hover {
   text-decoration-color: lighten($link-color, 20%);
 }
+
+h1, h2, h3, h4, h5, h6,
+.serif {
+  font-family: $serif-font-family;
+}

_sass/color_schemes/berkeley/variables.scss

@@ -4,10 +4,15 @@
 $content-width: 1200px;
 
 // Typography
-// $body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$mono-font-family: "Source Code Pro", "SFMono-Regular", menlo, consolas, monospace !default;
+$body-font-family: 'Inter', system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
+roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
+$serif-font-family: 'Source Serif 4', 'Georiga', 'Baskerville', serif;
+
+$berkeley-blue: #002676;
 
 // Colors
-$link-color: $blue-100;
+$link-color: $berkeley-blue;
 $hover-focus-link-color: darken($link-color, 0.3);
 
 // Layout

_sass/just-the-class/staffer.scss

@@ -2,7 +2,7 @@
   display: flex;
   margin: $sp-4 0;
 
-  .staffer-image {
+  .staffer-iage {
     border-radius: 50%;
     height: 100px;
     margin-right: $sp-4;
@@ -15,7 +15,7 @@
   }
 
   .staffer-badge {
-    @extend .label, .text-grey-dk-100, .bg-grey-lt-200;
+    @extend .label, .bg-grey-lt-200;
 
     user-select: none;
   }