add logo image in doc homepage

docs/index.md

@@ -1,4 +1,5 @@
-# NPLinker
+# 
+<img src="images/NPLinker_standard_black.svg" class="theme-toggle-image">
 
 NPLinker is a python framework for data mining microbial natural products by integrating genomics and metabolomics data.
 

docs/scripts/extra.js

@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const img = document.querySelector(".theme-toggle-image");
+
+    if (!img) return; // Exit if no image is found
+
+    // Function to update the image based on the current theme
+    function updateImage() {
+        const theme = document.body.getAttribute("data-md-color-scheme");
+        img.src = theme === "slate" ? "images/NPLinker_standard_white.svg" : "images/NPLinker_standard_black.svg";
+    }
+
+    // Initial update
+    updateImage();
+
+    // Observe changes to the `data-md-color-scheme` attribute
+    const observer = new MutationObserver(updateImage);
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["data-md-color-scheme"], // Monitor changes to the theme attribute
+    });
+});

mkdocs.yml

@@ -48,6 +48,9 @@ extra:
 extra_css:
   - css/extra.css
 
+extra_javascript:
+  - scripts/extra.js
+
 # https://www.mkdocs.org/user-guide/configuration/#validation
 validation:
   omitted_files: warn