diff --git a/docs/cugraph/source/_static/custom.js b/docs/cugraph/source/_static/custom.js
new file mode 100644
index 00000000000..567a07a7cd6
--- /dev/null
+++ b/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']
+    });
+});
diff --git a/docs/cugraph/source/_static/custom_styles.css b/docs/cugraph/source/_static/custom_styles.css
new file mode 100644
index 00000000000..31db0633f7f
--- /dev/null
+++ b/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);
+}
diff --git a/docs/cugraph/source/_static/params.css b/docs/cugraph/source/_static/params.css
deleted file mode 100644
index b57bcdb7c7c..00000000000
--- a/docs/cugraph/source/_static/params.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* 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: ":";
-}
-
-: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);
-
-}
-
-.special-table td, .special-table th {
-    border: 1px solid #dee2e6;
-}
\ No newline at end of file
diff --git a/docs/cugraph/source/conf.py b/docs/cugraph/source/conf.py
index 9833c1bd8b4..1f6dc19a35b 100644
--- a/docs/cugraph/source/conf.py
+++ b/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')