Light mode passes a11y specs

.rspec

@@ -1 +1 @@
--f progress -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html
+-f documentation -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html

_config.yml

@@ -22,7 +22,7 @@ description: A modern, highly customizable, responsive Jekyll template for cours
 # TODO(template): this should be built from the staff list...
 author: Various Bears
 # You should use either light or dark as the theme.
-color_scheme: dark
+color_scheme: light
 
 # TODO(setup): Set this to the semester, e.g. /sp24, (faXX / spXX / suXX / wiXX )
 baseurl: '/berkeley-class-site' # the subpath of your site, which should just be the semester.

_includes/head_custom.html

@@ -4,3 +4,22 @@
   <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" /> -->
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    if (jtd && localStorage['jtd-theme']) {
+      jtd.setTheme(localStorage['jtd-theme']);
+    }
+
+    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+    jtd.addEvent(toggleDarkMode, 'click', function() {
+      if (jtd.getTheme() === 'dark') {
+        localStorage['jtd-theme'] = 'light';
+        jtd.setTheme('light');
+      } else {
+        jtd.setTheme('dark');
+        localStorage['jtd-theme'] = 'dark';
+      }
+    });
+  });
+</script>

_sass/berkeley/berkeley.scss

@@ -6,7 +6,7 @@
 
 // Override default JTD CSS for larger/more accessibile fonts.
 html {
-  @include fs-3;
+  font-size: 16px;
 }
 
 body {
@@ -43,8 +43,11 @@ h1, h2, h3, h4, h5, h6,
   background-color: $green-300;
 }
 
+.label-red:not(g) {
+  background-color: $red-300;
+}
+
 code {
-  font-size: 16px;
   padding: 0.2em 0.4em;
   border: none;
 }

_sass/just-the-class/schedule.scss

@@ -22,7 +22,7 @@
 
   .schedule-time {
     @extend .fs-2;
-    color: $grey-dk-000;
+    color: $grey-dk-200;
     height: 40px;
     margin: 0;
     padding: $sp-2;
@@ -93,15 +93,16 @@
     }
 
     &.lecture {
-      background-color: $grey-dk-000;
+      background-color: $grey-lt-300;
+      color: $grey-dk-300;
     }
 
     &.section {
-      background-color: $purple-000;
+      background-color: darken($purple-000, 15%);
     }
 
     &.office-hours {
-      background-color: $blue-000;
+      background-color: darken($green-200, 10%);
     }
   }
 }

_sass/just-the-class/staffer.scss

@@ -12,6 +12,12 @@
   p,
   .staffer-name {
     margin: $sp-1 !important;
+
+  .anchor-heading {
+      width: 1.8rem;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
   }
 
   .staffer-badge {
@@ -22,6 +28,6 @@
   }
 
   .staffer-meta {
-    @extend .text-grey-dk-000;
+    @extend .text-grey-dk-300;
   }
 }

home.md

@@ -11,19 +11,9 @@ seo:
 # UC Berkeley Class Site Template
 
 <p>
-  <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
+  <button class="btn js-toggle-dark-mode">Swap color scheme</button>
 </p>
-<script>
-  const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); jtd.addEvent(toggleDarkMode, 'click', function() {
-    if (jtd.getTheme() === 'berkeley_dark') {
-      jtd.setTheme('berkeley_light');
-      toggleDarkMode.textContent = 'Preview dark color scheme';
-    } else {
-      jtd.setTheme('berkeley_dark');
-      toggleDarkMode.textContent = 'Return to the light side';
-    }
-  });
-</script>
+
 
 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: