update

docs/overrides/javascript/extra.js

@@ -0,0 +1,69 @@
+// Function that applies light/dark theme based on the user's preference
+const applyAutoTheme = () => {
+  // Determine the user's preferred color scheme
+  const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  // Apply the appropriate attributes based on the user's preference
+  if (prefersLight) {
+    document.body.setAttribute("data-md-color-scheme", "default");
+    document.body.setAttribute("data-md-color-primary", "indigo");
+  } else if (prefersDark) {
+    document.body.setAttribute("data-md-color-scheme", "slate");
+    document.body.setAttribute("data-md-color-primary", "black");
+  }
+};
+
+// Function that checks and applies light/dark theme based on the user's preference (if auto theme is enabled)
+function checkAutoTheme() {
+  // Array of supported language codes -> each language has its own palette (stored in local storage)
+  const supportedLangCodes = ["en", "zh", "ko", "ja", "ru", "de", "fr", "es", "pt", "it", "tr", "vi", "nl"];
+  // Get the URL path
+  const path = window.location.pathname;
+  // Extract the language code from the URL (assuming it's in the format /xx/...)
+  const langCode = path.split("/")[1];
+  // Check if the extracted language code is in the supported languages
+  const isValidLangCode = supportedLangCodes.includes(langCode);
+  // Construct the local storage key based on the language code if valid, otherwise default to the root key
+  const localStorageKey = isValidLangCode ? `/${langCode}/.__palette` : "/.__palette";
+  // Retrieve the palette from local storage using the constructed key
+  const palette = localStorage.getItem(localStorageKey);
+  if (palette) {
+    // Check if the palette's index is 0 (auto theme)
+    const paletteObj = JSON.parse(palette);
+    if (paletteObj && paletteObj.index === 0) {
+      applyAutoTheme();
+    }
+  }
+}
+
+// Run function when the script loads
+checkAutoTheme();
+
+// Re-run the function when the user's preference changes (when the user changes their system theme)
+window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", checkAutoTheme);
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", checkAutoTheme);
+
+// Re-run the function when the palette changes (e.g. user switched from dark theme to auto theme)
+// ! We can't use window.addEventListener("storage", checkAutoTheme) because it will NOT be triggered on the current tab
+// ! So we have to use the following workaround:
+// Get the palette input for auto theme
+var autoThemeInput = document.getElementById("__palette_1");
+if (autoThemeInput) {
+  // Add a click event listener to the input
+  autoThemeInput.addEventListener("click", function () {
+    // Check if the auto theme is selected
+    if (autoThemeInput.checked) {
+      // Re-run the function after a short delay (to ensure that the palette has been updated)
+      setTimeout(applyAutoTheme);
+    }
+  });
+}
+
+// Add iframe navigation
+window.onhashchange = function() {
+    window.parent.postMessage({
+        type: 'navigation',
+        hash: window.location.pathname + window.location.search + window.location.hash
+    }, '*');
+};

docs/overrides/main.html

@@ -0,0 +1,12 @@
+<!--Ultralytics YOLO 🚀, AGPL-3.0 license-->
+
+{% extends "base.html" %}
+
+{% block announce %}
+   <div style="text-align: center;">
+       <a href="https://hub.ultralytics.com/signup?utm_source=docs&utm_medium=banner&utm_campaign=cloud_training_release"
+          target="_blank" style="color: #FFFFFF;">
+          Introducing Ultralytics HUB Cloud Training! ☁️ Scalable. Simple. Smart. &nbsp; ➜
+      </a>
+   </div>
+{% endblock %}

docs/overrides/partials/comments.html

@@ -0,0 +1,51 @@
+{% if page.meta.comments %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+
+<!-- Insert Giscus code snippet from https://giscus.app/ here -->
+<script async
+        crossorigin="anonymous"
+        data-category="Docs"
+        data-category-id="DIC_kwDOH-jzvc4CWLkL"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-lang="en"
+        data-loading="lazy"
+        data-mapping="pathname"
+        data-reactions-enabled="1"
+        data-repo="ultralytics/ultralytics"
+        data-repo-id="R_kgDOH-jzvQ"
+        data-strict="1"
+        data-theme="preferred_color_scheme"
+        src="https://giscus.app/client.js">
+</script>
+
+<!-- Synchronize Giscus theme with palette -->
+<script>
+    var giscus = document.querySelector("script[src*=giscus]")
+
+    /* Set palette on initial load */
+    var palette = __md_get("__palette")
+    if (palette && typeof palette.color === "object") {
+      var theme = palette.color.scheme === "slate" ? "dark" : "light"
+      giscus.setAttribute("data-theme", theme)
+    }
+
+    /* Register event handlers after documented loaded */
+    document.addEventListener("DOMContentLoaded", function() {
+      var ref = document.querySelector("[data-md-component=palette]")
+      ref.addEventListener("change", function() {
+        var palette = __md_get("__palette")
+        if (palette && typeof palette.color === "object") {
+          var theme = palette.color.scheme === "slate" ? "dark" : "light"
+
+          /* Instruct Giscus to change theme */
+          var frame = document.querySelector(".giscus-frame")
+          frame.contentWindow.postMessage(
+            { giscus: { setConfig: { theme } } },
+            "https://giscus.app"
+          )
+        }
+      })
+    })
+</script>
+{% endif %}

docs/overrides/partials/source-file.html

@@ -0,0 +1,26 @@
+{% import "partials/language.html" as lang with context %}
+
+<!-- taken from
+https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/source-file.html -->
+
+<br>
+<div class="md-source-file">
+    <small>
+
+        <!-- mkdocs-git-revision-date-localized-plugin -->
+        {% if page.meta.git_revision_date_localized %}
+        📅 {{ lang.t("source.file.date.updated") }}:
+        {{ page.meta.git_revision_date_localized }}
+        {% if page.meta.git_creation_date_localized %}
+        <br/>
+        🎂 {{ lang.t("source.file.date.created") }}:
+        {{ page.meta.git_creation_date_localized }}
+        {% endif %}
+
+        <!-- mkdocs-git-revision-date-plugin -->
+        {% elif page.meta.revision_date %}
+        📅 {{ lang.t("source.file.date.updated") }}:
+        {{ page.meta.revision_date }}
+        {% endif %}
+    </small>
+</div>

docs/overrides/stylesheets/style.css

@@ -0,0 +1,57 @@
+/* Table format like GitHub ----------------------------------------------------------------------------------------- */
+th,
+td {
+  border: 1px solid var(--md-typeset-table-color);
+  border-spacing: 0;
+  border-bottom: none;
+  border-left: none;
+  border-top: none;
+}
+
+.md-typeset__table {
+  line-height: 1;
+}
+
+.md-typeset__table table:not([class]) {
+  font-size: 0.74rem;
+  border-right: none;
+}
+
+.md-typeset__table table:not([class]) td,
+.md-typeset__table table:not([class]) th {
+  padding: 9px;
+}
+
+/* light mode alternating table bg colors */
+.md-typeset__table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+/* dark mode alternating table bg colors */
+[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
+  background-color: #161b22;
+}
+/* Table format like GitHub ----------------------------------------------------------------------------------------- */
+
+/* Code block vertical scroll */
+div.highlight {
+  max-height: 20rem;
+  overflow-y: auto; /* for adding a scrollbar when needed */
+}
+
+/* Set content width */
+.md-grid {
+  max-width: 1440px;
+}
+
+/* Set language dropdown maximum height to screen height */
+.md-header .md-select:hover .md-select__inner {
+  max-height: 75vh;
+}
+
+/* Update the background of the banner (same as the one on the Ultralytics website) */
+.md-banner {
+  background-image: url(https://uploads-ssl.webflow.com/646dd1f1a3703e451ba81ecc/65e60cd6a4080bba757850a3_banner_ct.webp);
+  background-size: cover;
+  background-position: center;
+}