Add dark mode support to docs

docs/_config.yml

@@ -7,10 +7,6 @@ remote_theme: just-the-docs/just-the-docs
 include:
   - "_*"
 
-# Header links
-aux_links:
-  GitHub: https://github.com/modelcontextprotocol/ruby-sdk
-
 # Search
 search_enabled: true
 

docs/_includes/head_custom.html

@@ -0,0 +1,117 @@
+<script>
+(function() {
+  const storageKey = "mcp-ruby-sdk-docs-theme";
+  const validPreferences = ["system", "light", "dark"];
+  const preferenceLabels = {
+    system: "System",
+    light: "Light",
+    dark: "Dark"
+  };
+  const mediaQuery = window.matchMedia ?
+    window.matchMedia("(prefers-color-scheme: dark)") :
+    { matches: false };
+
+  function isValidPreference(preference) {
+    return validPreferences.indexOf(preference) !== -1;
+  }
+
+  function getStoredPreference() {
+    try {
+      const preference = window.localStorage.getItem(storageKey);
+      return isValidPreference(preference) ? preference : "system";
+    } catch (error) {
+      return "system";
+    }
+  }
+
+  function savePreference(preference) {
+    try {
+      window.localStorage.setItem(storageKey, preference);
+    } catch (error) {
+      /* Ignore storage errors so private browsing modes still get theme switching. */
+    }
+  }
+
+  function resolvedTheme(preference) {
+    if (preference === "dark" || preference === "light") {
+      return preference;
+    }
+
+    return mediaQuery.matches ? "dark" : "light";
+  }
+
+  function nextPreference(preference) {
+    const index = validPreferences.indexOf(preference);
+    if (index === -1 || index === validPreferences.length - 1) {
+      return validPreferences[0];
+    }
+
+    return validPreferences[index + 1];
+  }
+
+  function setThemeToggleLabel(preference) {
+    const buttons = document.querySelectorAll("[data-theme-toggle]");
+    const label = "Theme: " + preferenceLabels[preference];
+    for (let index = 0; index < buttons.length; index += 1) {
+      buttons[index].setAttribute("aria-label", label);
+      buttons[index].setAttribute("title", label);
+    }
+  }
+
+  function applyPreference(preference) {
+    const safePreference = isValidPreference(preference) ? preference : "system";
+    const theme = resolvedTheme(safePreference);
+
+    if (window.jtd && typeof window.jtd.setTheme === "function") {
+      window.jtd.setTheme(theme);
+    }
+    document.documentElement.setAttribute("data-theme-preference", safePreference);
+    document.documentElement.setAttribute("data-theme", theme);
+    setThemeToggleLabel(safePreference);
+  }
+
+  window.mcpDocsTheme = {
+    apply: applyPreference,
+    getPreference: getStoredPreference,
+    save: function(preference) {
+      const safePreference = isValidPreference(preference) ? preference : "system";
+      savePreference(safePreference);
+      applyPreference(safePreference);
+    }
+  };
+
+  applyPreference(getStoredPreference());
+
+  function initThemeToggle() {
+    const buttons = document.querySelectorAll("[data-theme-toggle]");
+    if (buttons.length === 0) {
+      return;
+    }
+
+    setThemeToggleLabel(getStoredPreference());
+    for (let index = 0; index < buttons.length; index += 1) {
+      buttons[index].addEventListener("click", function() {
+        window.mcpDocsTheme.save(nextPreference(getStoredPreference()));
+      });
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initThemeToggle);
+  } else {
+    initThemeToggle();
+  }
+
+  function applySystemPreference() {
+    if (getStoredPreference() === "system") {
+      applyPreference("system");
+    }
+  }
+
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener("change", applySystemPreference);
+  } else if (mediaQuery.addListener) {
+    mediaQuery.addListener(applySystemPreference);
+  }
+})();
+</script>

docs/_includes/header_custom.html

@@ -0,0 +1,8 @@
+<div class="docs-header-controls" aria-label="Site controls">
+  <button class="site-button docs-icon-button theme-toggle" type="button" data-theme-toggle aria-label="Theme: System" title="Theme: System">
+    <span class="docs-icon docs-icon--theme" aria-hidden="true"></span>
+  </button>
+  <a class="site-button docs-icon-button" href="{{ site.gh_edit_repository | default: 'https://github.com/modelcontextprotocol/ruby-sdk' }}" aria-label="GitHub" title="GitHub">
+    <span class="docs-icon docs-icon--github" aria-hidden="true"></span>
+  </a>
+</div>

docs/_sass/custom/custom.scss

@@ -0,0 +1,67 @@
+.docs-header-controls {
+  display: flex;
+  height: 3.75rem;
+  align-items: stretch;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+@media (min-width: 50rem) {
+  .docs-header-controls {
+    height: 100%;
+    padding-right: 1rem;
+  }
+}
+
+.docs-icon-button.site-button {
+  width: 3.75rem;
+  justify-content: center;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.docs-icon {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: currentColor;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.docs-icon--github {
+  -webkit-mask-image: url("/assets/images/icons/github.svg");
+  mask-image: url("/assets/images/icons/github.svg");
+}
+
+.docs-icon--theme {
+  -webkit-mask-image: url("/assets/images/icons/theme-system.svg");
+  mask-image: url("/assets/images/icons/theme-system.svg");
+}
+
+:root[data-theme-preference="light"] .docs-icon--theme {
+  -webkit-mask-image: url("/assets/images/icons/theme-light.svg");
+  mask-image: url("/assets/images/icons/theme-light.svg");
+}
+
+:root[data-theme-preference="dark"] .docs-icon--theme {
+  -webkit-mask-image: url("/assets/images/icons/theme-dark.svg");
+  mask-image: url("/assets/images/icons/theme-dark.svg");
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}

docs/assets/css/just-the-docs-dark.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="dark" %}

docs/assets/css/just-the-docs-light.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="light" %}