chore: fix dark-mode switch on mobile devices (#657)

apache · Oct 13, 2021 · 42610de · 42610de
1 parent 8cdabe2
commit 42610de
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
@@ -1077,7 +1077,7 @@ a:hover {
   }
 
   .add-margin {
-    margin: 30px 0;
+    margin: 30px 0 0 0;
   }
 
   .homeCanvas{
@@ -1244,8 +1244,10 @@ a:hover {
   }
 }
 
-.react-toggle {
-  display: none;
+@media only screen and (min-width: 768px) {
+  .react-toggle {
+    display: none;
+  }
 }
 
 .bottom-pos {

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -1,4 +1,5 @@
-import React, { useState, useLayoutEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect } from "react";
+import useThemeContext from '@theme/hooks/useThemeContext';
 import Layout from "@theme/Layout";
 
 import HeroSection from "./sections/heroSection";
@@ -24,6 +25,21 @@ const useWindowSize = () => {
   return size;
 }
 
+const ThemeResetComponent = () => {
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+
+  useEffect(() => {    
+    const children = document.querySelector(".navbar__items--right").childElementCount;
+    document.querySelector(".navbar__items--right").childNodes[children-2].style.display = "none";
+
+    if(isDarkTheme) {
+      setLightTheme(true);
+    }    
+  }, [])
+
+  return (null);
+};
+
 const Index = () => {
 
   const [screenWidth, screenHeight] = useWindowSize();
@@ -39,6 +55,7 @@ const Index = () => {
       <HomeEventsSection />
       <EndCTA />
       <EventPosterCard />
+      <ThemeResetComponent/>
     </Layout>
   );
 };

diff --git a/website/src/theme/DocPage/index.tsx b/website/src/theme/DocPage/index.tsx
@@ -48,7 +48,13 @@ function DocPageContent({
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
 
   useEffect(() => {
-    document.querySelector(".react-toggle").style.display = "block";
+    const children = document.querySelector(".navbar__items--right").childElementCount;
+    if(window.innerWidth > 745) {
+      document.querySelector(".navbar__items--right").childNodes[children-2].style.display = "block";
+    }
+    else {
+      document.querySelector(".navbar__items--right").childNodes[children-2].style.display = "none";
+    }
     const currentPage = currentDocRoute.path.split("/")[2] || "";
     switch (currentPage) {
       case "general":
@@ -77,7 +83,7 @@ function DocPageContent({
         break;
     }
     return () => {
-      document.querySelector(".react-toggle").style.display = "none";
+      document.querySelector(".navbar__items--right").childNodes[children-2].style.display = "none"
     }
   }, []);