Improve Text Visibility in DISC Logo Design #149 (#159)

* Designed the dark logo * Designed the light logo * Specified logo-switcher JS file * Specified the logo-switcher script to be added in the html head * Override webpack css (pydata_sphinx_theme) * Create updateLogo func and a MutationObserver to update the mainLogo src * Specified mainLogo css file
numfocus · Jan 26, 2025 · cfe80d7 · cfe80d7
1 parent 1921c79
commit cfe80d7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 1 deletion.
diff --git a/DISCOVER/_config.yml b/DISCOVER/_config.yml
@@ -3,7 +3,7 @@
 
 title: DISCOVER
 author: Community
-logo: logo.png
+logo: _static/logo-light.png
 
 # Force re-execution of notebooks on each build.
 # See https://jupyterbook.org/content/execute.html
@@ -21,6 +21,10 @@ repository:
 html:
   use_issues_button: true
   use_repository_button: true
+  html_in_header:
+    - '<script src="_static/logo-switcher.js"></script>'
+  extra_css:
+    - _static/mainLogo.css
 
 # config sphinx tags extension
 sphinx:

diff --git a/DISCOVER/_static/logo-dark.png b/DISCOVER/_static/logo-dark.png
diff --git a/DISCOVER/_static/logo-light.png b/DISCOVER/_static/logo-light.png
diff --git a/DISCOVER/_static/logo-switcher.js b/DISCOVER/_static/logo-switcher.js
@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const logos = document.querySelectorAll('.logo__image');
+
+    logos.forEach(logo => {
+      if (logo.classList.contains('only-light')) {
+        logo.src = '_static/logo-light.png'; // Replacing with the light logo
+      } else if (logo.classList.contains('only-dark')) {
+        logo.src = '_static/logo-dark.png'; // Replacing with the dark logo
+      }
+    });
+
+    function updateLogo() {
+      let mainLogo = document.querySelector(".bd-content img:not(.only-dark,.dark-light)"); // Select the image
+      let isDarkMode = document.documentElement.getAttribute("data-theme") === "dark"; // Check theme
+
+      if (mainLogo) {
+          mainLogo.src = isDarkMode ? "_static/logo-dark.png" : "_static/logo-light.png"; // Change image source
+      }
+    }
+
+    // Listen for attribute changes on <html> that is the root node of the document
+    const observer = new MutationObserver(updateLogo);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+    updateLogo();
+});
diff --git a/DISCOVER/_static/mainLogo.css b/DISCOVER/_static/mainLogo.css
@@ -0,0 +1,7 @@
+html[data-theme=dark] .bd-content img:not(.only-dark,.dark-light) {    
+    background: transparent !important;
+    border-radius: .25rem;
+}
+html .bd-content img:not(.only-dark,.dark-light){
+    padding: 1rem 0;
+}