Docs darkmode hydra (#2179)

Credit goes to @boemekeld 

- I had to wrap DOM access to document inside of `useState` in order to
get rid of docusaurus build errors.
---

<!-- Consider each and tick it off one way or the other -->
* [x] CHANGELOG updated or not needed
* [x] Documentation updated or not needed
* [x] Haddocks updated or not needed
* [x] No new TODOs introduced or explained herafter

Author: v0d1ch

docs/docusaurus.config.js

@@ -155,7 +155,7 @@ const config = {
     ({
       colorMode: {
         defaultMode: "light",
-        disableSwitch: true,
+        disableSwitch: false,
         respectPrefersColorScheme: false,
       },
       navbar: {

docs/src/css/custom.css

@@ -87,9 +87,15 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
+html:not(.plugin-pages)[data-theme="dark"] {
   --ifm-color-primary: var(--ifm-color-primary-light);
 }
+html.plugin-pages[data-theme='dark'] {
+  --ifm-navbar-link-color: #1c1e21;
+}
+html.plugin-pages .navColorModeToggle{
+  display: none;
+}
 
 @media (min-width: 768px) {
   :root {
@@ -117,7 +123,7 @@ h4 {
   line-height: 30px !important;
 }
 
-html {
+html:not([data-theme='dark']), html.plugin-pages {
   @apply text-black;
 }
 
@@ -294,7 +300,7 @@ svg.architecture {
   }
 }
 
-.navbar__brand:hover {
+html.plugin-pages .navbar__brand:hover {
   color: #283032;
 }
 
@@ -319,11 +325,17 @@ svg.architecture {
   order: 3;
 }
 
+.DocSearch-Button {
+  margin: 0 10px 0 16px !important;
+}
 .DocSearch-Button .DocSearch-Search-Icon {
   color: black !important;
   height: 24px !important;
   width: 24px;
 }
+html:not(.plugin-pages)[data-theme='dark'] .DocSearch-Button .DocSearch-Search-Icon {
+  color: white !important;
+}
 
 .DocSearch-Button {
   padding: 0 !important;

docs/src/pages/index.tsx

@@ -19,7 +19,7 @@ export default function Home() {
       <div className="z-index:1000">
         <Layout>
           <HomepageHero />
-          <main>
+          <main className="bg-white">
             <Features />
             <div className="pageContainer">
               <AnimatedText />

docs/src/theme/Logo/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useState, useEffect } from 'react';
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -7,9 +8,16 @@ import ThemedImage from "@theme/ThemedImage";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import { forPhablet } from "../../../helpers/media-queries";
 function LogoThemedImage({ logo, alt, imageClassName }) {
+
+  const [isHome, setIsHome] = useState(false);
+
+  useEffect(() => {
+    setIsHome(document.documentElement.classList.contains("plugin-pages"));
+  }, []);
+
   const sources = {
     light: useBaseUrl(logo.src),
-    dark: useBaseUrl(logo.srcDark || logo.src),
+    dark: useBaseUrl(isHome ? logo.src : logo.srcDark || logo.src),
   };
   const themedImage = (
     <ThemedImage

docs/src/theme/Navbar/Content/index.js

@@ -63,7 +63,7 @@ export default function NavbarContent() {
       right={
         <>
           <NavbarItems items={rightItems} />
-          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          <div class="navColorModeToggle"><NavbarColorModeToggle className={styles.colorModeToggle} /></div>
           {!searchBarItem && (
             <NavbarSearch>
               <SearchBar />