Fix light theme table of contents color scheme (#152)

docs/javascripts/table_of_contents_themes.js

@@ -0,0 +1,55 @@
+const LIGHT_MODE = 0;
+const DARK_MODE = 1;
+const LIGHT_MODE_TABLE_OF_CONTENTS_LINK_COLOR = "#000000"; // Black
+const DARK_MODE_TABLE_OF_CONTENTS_LINK_COLOR = "#ffffff";  // White
+const SAILBOT_BLUE = "#2f97ec";
+
+// Sets the theme given a mode
+function set_table_of_content_link_color(mode) {
+    let linkColor = "";
+    switch (mode) {
+        case LIGHT_MODE:
+            linkColor = LIGHT_MODE_TABLE_OF_CONTENTS_LINK_COLOR;
+            break;
+        case DARK_MODE:
+            linkColor = DARK_MODE_TABLE_OF_CONTENTS_LINK_COLOR;
+            break;
+        default:
+            console.log("Error determining website theme. Defaulting table of content link color to sailbot blue.");
+            linkColor = SAILBOT_BLUE;
+            break;
+    }
+    document.documentElement.style.setProperty("--md-table-of-contents-link-color", linkColor);
+}
+
+// Returns the new theme index given the current theme
+function toggle_table_of_contents_link_color(current_mode) {
+    switch (current_mode) {
+        case LIGHT_MODE:
+            return DARK_MODE;
+        case DARK_MODE:
+            return LIGHT_MODE;
+        default:
+            return -1;
+    }
+}
+
+// An enslosure that keeps track of the mode and toggles the theme accordingly
+const theme_enclosure = function(initial_mode) {
+    let current_mode = initial_mode;
+    return {
+        setLinkColor: () => {set_table_of_content_link_color(current_mode);},
+        toggleLinkColor: () => {current_mode = toggle_table_of_contents_link_color(current_mode); set_table_of_content_link_color(current_mode);}
+    };
+};
+
+// Set the theme upon the window loading
+var initial_mode = __md_get("__palette").index;
+table_of_contents_theme = theme_enclosure(initial_mode);
+table_of_contents_theme.setLinkColor();
+
+// Set the theme when the light/dark mode button is clicked
+const buttons = document.querySelectorAll("form.md-header__option > label.md-header__button");
+buttons.forEach((button) => {
+    button.addEventListener('click', table_of_contents_theme.toggleLinkColor);
+});

docs/stylesheets/extra.css

@@ -5,7 +5,7 @@
 }
 
 [data-md-color-scheme="slate"] {
-  --md-hue: 200; 
+  --md-hue: 200;
 }
 
 /* Styling for left navigation panel*/
@@ -18,9 +18,9 @@
 .md-content__inner a:hover {color: #2f97ec;}
 .md-content__inner a:focus {color: #2f97ec;}
 
-/*Styling for right navigation panel (Table of Contents)*/
-nav.md-nav.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link {color: #ffffff;}
+/* Styling for right navigation panel (Table of Contents) controlled by javascripts/table_of_contents_themes.js */
+nav.md-nav.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link {color: var(--md-table-of-contents-link-color);}
 nav.md-nav.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link:hover {color: #2f97ec;}
 nav.md-nav.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link.md-nav__link--passed.md-nav__link--active {color: #2f97ec;}
-.md-nav__link--passed {color: #ffffff;}
-.md-nav__link--passed:hover {color: #2f97ec;}
+.md-nav__link--passed {color: var(--md-table-of-contents-link-color);}
+.md-nav__link--passed:hover {color: #2f97ec;}

mkdocs.yml

@@ -71,6 +71,7 @@ extra_css:
 
 extra_javascript:
   - javascripts/mathjax.js
+  - javascripts/table_of_contents_themes.js
   - https://polyfill.io/v3/polyfill.min.js?features=es6
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js