Fix issues with day & night modes in python docs (#2471)

Fixes similar issue found in: rapidsai/cudf#11400

Authors:
  - GALI PREM SAGAR (https://github.com/galipremsagar)

Approvers:
  - Brad Rees (https://github.com/BradReesWork)

URL: #2471

docs/cugraph/source/_static/custom.js

@@ -0,0 +1,22 @@
+// Copyright (c) 2022, NVIDIA CORPORATION.
+
+function update_switch_theme_button() {
+    current_theme = document.documentElement.dataset.mode;
+    if (current_theme == "light") {
+        document.getElementById("theme-switch").title = "Switch to auto theme";
+    } else if (current_theme == "auto") {
+        document.getElementById("theme-switch").title = "Switch to dark theme";
+    } else {
+        document.getElementById("theme-switch").title = "Switch to light theme";
+    }
+}
+
+$(document).ready(function() {
+    var observer = new MutationObserver(function(mutations) {
+        update_switch_theme_button();
+    })
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+    });
+});

docs/cugraph/source/_static/custom_styles.css

@@ -0,0 +1,89 @@
+/* Mirrors the change in:
+ *   https://github.com/sphinx-doc/sphinx/pull/5976
+ * which is not showing up in our theme.
+ */
+ .classifier:before {
+  font-style: normal;
+  margin: 0.5em;
+  content: ":";
+}
+
+/* Fix for text wrap in sphinx tables:
+* https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html 
+*/
+@media screen and (min-width: 767px) {
+
+  .wy-table-responsive table td {
+     /* !important prevents the common CSS stylesheets from overriding
+        this as on RTD they are loaded after this stylesheet */
+     white-space: normal !important;
+  }
+
+  .wy-table-responsive {
+     overflow: visible !important;
+  }
+}
+
+
+table.io-supported-types-table {
+  text-align: center
+}
+
+table.io-supported-types-table thead{
+  text-align: center !important;
+}
+
+:root {
+
+--pst-color-active-navigation: 114, 83, 237;
+--pst-color-navbar-link: 77, 77, 77;
+--pst-color-navbar-link-hover: var(--pst-color-active-navigation);
+--pst-color-navbar-link-active: var(--pst-color-active-navigation);
+--pst-color-sidebar-link: 77, 77, 77;
+--pst-color-sidebar-link-hover: var(--pst-color-active-navigation);
+--pst-color-sidebar-link-active: var(--pst-color-active-navigation);
+--pst-color-sidebar-expander-background-hover: 244, 244, 244;
+--pst-color-sidebar-caption: 77, 77, 77;
+--pst-color-toc-link: 119, 117, 122;
+--pst-color-toc-link-hover: var(--pst-color-active-navigation);
+--pst-color-toc-link-active: var(--pst-color-active-navigation);
+
+}
+
+/* Used to make special-table scrollable when it overflows */
+.special-table-wrapper {
+  width: 100%;
+  overflow: auto !important;
+}
+
+.special-table td, .special-table th {
+  border: 1px solid #dee2e6;
+}
+
+/* Needed to resolve https://github.com/executablebooks/jupyter-book/issues/1611 */
+.output.text_html {
+  overflow: auto;
+}
+
+html[data-theme="light"] {
+  --pst-color-primary: rgb(19, 6, 84);
+  --pst-color-text-base: rgb(51, 51, 51);
+
+  --pst-color-primary: rgb(19, 6, 84);
+
+  --pst-color-link: rgb(0, 91, 129);
+  --pst-color-secondary: rgb(227, 46, 0);
+  --pst-table-background-color: transparent;
+}
+
+
+html[data-theme="dark"] {
+  --pst-color-primary: rgb(221, 221, 221);
+  --pst-color-inline-code: rgb(248, 6, 204);
+  --pst-table-background-color: var(--pst-color-text-muted);
+
+}
+
+div.cell_output table{
+  background: var(--pst-table-background-color);
+}

docs/cugraph/source/conf.py

@@ -212,7 +212,8 @@
 
 
 def setup(app):
-    app.add_css_file('params.css')
+    app.add_css_file('custom_styles.css')
+    app.add_js_file('custom.js')
     app.add_css_file('references.css')