From 5b51dba24be43e33406f7eb2dba47960f4ce70f0 Mon Sep 17 00:00:00 2001
From: CuteShaun <andrewtsapko@gmail.com>
Date: Sat, 7 Jun 2025 14:13:42 -0700
Subject: [PATCH 1/2] fix: improve contrast for all links, button and label
 text

---
 docs/_includes/header_custom.html | 18 +++++++++------
 docs/_sass/custom/custom.scss     | 38 +++++++++++++++++++++++++++++++
 docs/_sass/custom/setup.scss      |  9 ++++++++
 3 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 docs/_sass/custom/setup.scss

diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index d73f5da0..9ca7f8c5 100644
--- a/docs/_includes/header_custom.html
+++ b/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>
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 9032c01b..79816cf4 100644
--- a/docs/_sass/custom/custom.scss
+++ b/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;
+  }
+}
diff --git a/docs/_sass/custom/setup.scss b/docs/_sass/custom/setup.scss
new file mode 100644
index 00000000..98e97982
--- /dev/null
+++ b/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;

From af97bbbe6ed08ad048254e1eed84cd0614925c8d Mon Sep 17 00:00:00 2001
From: CuteShaun <andrewtsapko@gmail.com>
Date: Sat, 7 Jun 2025 14:31:56 -0700
Subject: [PATCH 2/2] fix: add same style for CSS comments

---
 docs/_sass/custom/custom.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 79816cf4..e4c36045 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -29,7 +29,7 @@ div.site-logo {
   color: $body-text-color;
 }
 
-/* Dark mode link styles */
+//Dark mode link styles
 html[data-theme="dark"] {
   .main-header a,
   .main-header button,
@@ -56,7 +56,7 @@ html[data-theme="dark"] {
   }
 }
 
-/* Label colors */
+//Label colors
 main {
   .label-green {
     background-color: $label-success-bg;