[Doc] Theme revamp: styling changes

doc/source/_static/css/custom.css

@@ -25,6 +25,7 @@ html[data-theme='dark'] {
   --pst-color-text-muted: #b3b9c4;
   --heading-color: #ffffff;
   --base-pygments-code-color: #cccccc;
+  --pst-color-link-hover: #cce0ff;
 }
 
 html[data-theme='light'] {
@@ -33,6 +34,7 @@ html[data-theme='light'] {
   --pst-color-text-muted: #454f59;
   --heading-color: #161a1d;
   --base-pygments-code-color: #cccccc;
+  --pst-color-link-hover: #09326c;
 }
 
 nav.bd-links li > a:hover {

doc/source/_static/css/splash.css → doc/source/_static/css/index.css

@@ -62,7 +62,7 @@
 
 .tab-pane pre {
   margin: 0;
-  padding: 0;
+  padding: 0.5em 1em;
   max-height: 252px;
   overflow-y: auto;
   animation: fadeEffect 1s; /* Fading effect takes 1 second */

doc/source/_static/js/index.js

@@ -0,0 +1,52 @@
+function animateTabs() {
+  const tabs = Array.from(document.getElementById('v-pills-tab').children);
+  const contentTabs = Array.from(
+    document.getElementById('v-pills-tabContent').children,
+  );
+
+  tabs.forEach((item, index) => {
+    item.onclick = () => {
+      tabs.forEach((tab, i) => {
+        if (i === index) {
+          item.classList.add('active');
+        } else {
+          tab.classList.remove('active');
+        }
+      });
+      contentTabs.forEach((tab, i) => {
+        if (i === index) {
+          tab.classList.add('active', 'show');
+        } else {
+          tab.classList.remove('active', 'show');
+        }
+      });
+    };
+  });
+}
+
+function updateHighlight() {
+  const {theme} = document.documentElement.dataset;
+  ['dark', 'light'].forEach((title) => {
+    const stylesheet = document.querySelector(`link[title="${title}"]`);
+    if (title === theme) {
+      stylesheet.removeAttribute('disabled');
+    } else {
+      stylesheet.setAttribute('disabled', 'disabled');
+    }
+  });
+}
+
+function setHighlightListener() {
+  const observer = new MutationObserver((mutations) => updateHighlight());
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  });
+}
+
+document.addEventListener('DOMContentLoaded', animateTabs);
+document.addEventListener('DOMContentLoaded', () => {
+  hljs.highlightAll();
+  updateHighlight();
+});
+document.addEventListener('DOMContentLoaded', setHighlightListener);