fix: improve contrast for all links, button and label text (#545)

Co-authored-by: Sam Cunliffe <samcunliffe@users.noreply.github.com>

Author: cuteshaun

docs/_includes/header_custom.html

@@ -4,14 +4,21 @@
 
 <script>
   const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");
+
+  const setHtmlThemeAttr = (theme) => {
+    document.documentElement.setAttribute("data-theme", theme);
+  };
+
   jtd.addEvent(toggleDarkMode, "click", function () {
     if (jtd.getTheme() === "light") {
       jtd.setTheme("dark");
+      setHtmlThemeAttr("dark");
       toggleDarkMode.textContent = "☼";
       toggleDarkMode.ariaLabel = "Switch to light mode";
       localStorage.setItem("theme", "dark");
     } else {
       jtd.setTheme("light");
+      setHtmlThemeAttr("light");
       toggleDarkMode.textContent = "☾";
       toggleDarkMode.ariaLabel = "Switch to dark mode";
       localStorage.setItem("theme", "light");
@@ -22,12 +29,9 @@
    * Meanwhile, we check each time if there is a theme written to local storage and obey it.
    */
   window.addEventListener("DOMContentLoaded", function () {
-    if (localStorage.getItem("theme") === "dark") {
-      jtd.setTheme("dark");
-      toggleDarkMode.textContent = "☼";
-    } else {
-      jtd.setTheme("light");
-      toggleDarkMode.textContent = "☾";
-    }
+    const theme = localStorage.getItem("theme") === "dark" ? "dark" : "light";
+    jtd.setTheme(theme);
+    setHtmlThemeAttr(theme);
+    toggleDarkMode.textContent = theme === "dark" ? "☼" : "☾";
   });
 </script>

docs/_sass/custom/custom.scss

@@ -28,3 +28,41 @@ div.site-logo {
   width: 100%;
   color: $body-text-color;
 }
+
+//Dark mode link styles
+html[data-theme="dark"] {
+  .main-header a,
+  .main-header button,
+  .side-bar a {
+    color: $link-color-dark;
+  }
+
+  main a,
+  footer a {
+    color: $link-color-dark;
+    text-decoration: underline;
+    text-decoration-color: $link-color-dark;
+    text-decoration-thickness: 1px;
+    transition:
+      text-decoration-thickness 0.2s ease-in-out,
+      text-underline-offset 0.2s ease-in-out;
+  }
+
+  main a:hover,
+  footer a:hover {
+    text-decoration-color: $link-color-dark;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+  }
+}
+
+//Label colors
+main {
+  .label-green {
+    background-color: $label-success-bg;
+  }
+
+  .label-red {
+    background-color: $label-error-bg;
+  }
+}

docs/_sass/custom/setup.scss

@@ -0,0 +1,9 @@
+// Color palette
+$blue-400: #4da6ff;
+$green-700: #00755c;
+$red-600: #d13c3c;
+
+// Semantic mappings
+$link-color-dark: $blue-400;
+$label-success-bg: $green-700;
+$label-error-bg: $red-600;