[apisix-website] branch master updated: chore: fix dark-mode switch on mobile devices (#657)

[juzhiyuan]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 42610de  chore: fix dark-mode switch on mobile devices (#657)
42610de is described below

commit 42610dee35086f190f40713b7867042ce9a2b88d
Author: Shivam Singh <57267960+1502shivam-si...@users.noreply.github.com>
AuthorDate: Wed Oct 13 10:57:34 2021 +0530

    chore: fix dark-mode switch on mobile devices (#657)
---
 website/src/css/customTheme.css     |  8 +++++---
 website/src/pages/index.js          | 19 ++++++++++++++++++-
 website/src/theme/DocPage/index.tsx | 10 ++++++++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 79e8e94..c1a76d8 100644
--- 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
index e7ec360..1711ef9 100644
--- 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
index f5eacad..9c895af 100644
--- 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"
     }
   }, []);