ruby-sdk/docs/_includes/head_custom.html

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<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";
  }

  const colorSchemePattern = /just-the-docs-(default|light|dark)\.css(\?.*)?$/;
  let pendingColorLink = null;

  function findColorStylesheet() {
    const links = document.querySelectorAll('link[rel="stylesheet"]');
    for (let index = 0; index < links.length; index += 1) {
      if (colorSchemePattern.test(links[index].getAttribute("href") || "")) {
        return links[index];
      }
    }

    return null;
  }

  function stylesheetTheme(link) {
    const match = colorSchemePattern.exec(link.getAttribute("href") || "");
    const scheme = match ? match[1] : "default";
    return scheme === "default" ? "light" : scheme;
  }

  /*
   * Swap the color stylesheet without going through jtd.setTheme, which
   * rewrites the href of the render-blocking link and lets the page paint
   * unstyled until the replacement CSS arrives. The site's color_scheme is
   * the light variant, so the default stylesheet equals the light one
   * and needs no swap at all;
   * for dark, keep the old sheet applied until the new one has loaded.
   */
  function setColorStylesheet(theme) {
    const currentLink = findColorStylesheet();
    if (!currentLink) {
      return;
    }

    if (pendingColorLink) {
      if (pendingColorLink.parentNode) {
        pendingColorLink.parentNode.removeChild(pendingColorLink);
      }
      pendingColorLink = null;
    }

    if (stylesheetTheme(currentLink) === theme) {
      return;
    }

    const newLink = document.createElement("link");
    newLink.setAttribute("rel", "stylesheet");
    newLink.setAttribute("blocking", "render");
    newLink.setAttribute(
      "href",
      currentLink.getAttribute("href").replace(colorSchemePattern, "just-the-docs-" + theme + ".css")
    );

    newLink.addEventListener("load", function() {
      if (pendingColorLink !== newLink) {
        return;
      }
      pendingColorLink = null;
      if (currentLink.parentNode) {
        currentLink.parentNode.removeChild(currentLink);
      }
    });

    newLink.addEventListener("error", function() {
      if (pendingColorLink === newLink) {
        pendingColorLink = null;
      }
      if (newLink.parentNode) {
        newLink.parentNode.removeChild(newLink);
      }
    });

    currentLink.parentNode.insertBefore(newLink, currentLink.nextSibling);
    pendingColorLink = newLink;
  }

  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);

    setColorStylesheet(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>

<script>
  /*
   * Open external links (GitHub, the MCP specification, rubydoc, and so on)
   * in a new tab, keeping the docs page the reader came from. Line comments
   * would swallow the script here: the theme compresses the HTML to one line.
   */
  document.addEventListener("DOMContentLoaded", function () {
    for (const anchor of document.querySelectorAll("a[href^='http']")) {
      if (anchor.hostname !== window.location.hostname) {
        anchor.target = "_blank";
        anchor.rel = "noopener";
      }
    }
  });
</script>