docs: Fix dark mode toggle for new sphinx book theme (nextcord#52)

Author: DenverCoder1

docs/_static/css/custom.css

@@ -22,12 +22,12 @@ div#site-navigation div.navbar_extra_footer {
     font-size: 0.8em;
 }
 
-.topbar-main {
+.header-article__right {
     opacity: 0;
     transition: 0.1s ease-in;
 }
 
-.topbar .topbar-main a.dark-mode-button {
+.header-article__right a.dark-mode-button {
     height: auto;
     float: right;
 }

docs/_static/js/toggleDarkMode.js

@@ -32,14 +32,14 @@ function toggleDarkMode() {
 }
 
 window.addEventListener("load", function () {
-    const topbar = document.querySelector(".topbar-main");
-    topbar.innerHTML += `<a class="dark-mode-button" title="Toggle dark mode">
-            <button type="button" class="btn btn-secondary topbarbtn"
-                data-toggle="tooltip" data-placement="bottom" onclick="toggleDarkMode()"
-                aria-label="Toggle dark mode" title="" data-original-title="Toggle dark mode">
+    const topbar = document.querySelector(".header-article__right");
+    topbar.innerHTML += `<button type="button" class="headerbtn" data-toggle="tooltip"
+                data-placement="bottom" onclick="toggleDarkMode()" aria-label="Toggle dark mode"
+                title="" data-original-title="Toggle dark mode">
+                <span class="headerbtn__icon-container">
                     <i class="fas fa-moon"></i>
-            </button>
-        </a>`;
+                </span>
+            </button>`;
     topbar.style.opacity = "1";
     if (getCookie("darkmode") == "true") {
         DarkReader.enable();

setup.py

@@ -61,7 +61,7 @@ def requirements():
     "docs": [
         "sphinx",
         "sphinxcontrib_trio",
-        "sphinx-book-theme",
+        "sphinx-book-theme==0.3.3",
     ],
 }