fix home selectedStyle

src/App.js

@@ -58,6 +58,7 @@ export default function App() {
   } = useAppStore(state => state);
 
   const location = useLocation();
+  const isHomeRoute = location.pathname === "/";
   
 
   // preload images
@@ -70,10 +71,13 @@ export default function App() {
 
   // automatic dark mode without interefering with user's selected style
   useEffect(() => {
+
+    if (isHomeRoute) return;
+  
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const isDarkMode = darkModeMediaQuery.matches;
   
-    if (isDarkMode) {
+    if (isDarkMode && !isHomeRoute) {
       setSelectedStyle('Tomorrow');
       setBodyStyle({
         background: '#1d1f21 none',
@@ -84,7 +88,7 @@ export default function App() {
     }
   
     const darkModeListener = (e) => {
-      if (e.matches) {
+      if (e.matches && !isHomeRoute) {
         setSelectedStyle('Tomorrow');
         setBodyStyle({
           background: '#1d1f21 none',
@@ -100,8 +104,8 @@ export default function App() {
     return () => {
       darkModeMediaQuery.removeEventListener('change', darkModeListener);
     };
-  }, []);
+  }, [isHomeRoute]);
-
+  
   // fetch default subplebbits
   useEffect(() => {
     let didCancel = false;

src/components/CaptchaModal.jsx

@@ -303,4 +303,4 @@ const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
 
 Modal.setAppElement('#root');
 
-export default CaptchaModal;
+export default CaptchaModal;

src/components/CatalogLoader.jsx

@@ -48,4 +48,4 @@ const CatalogLoader = () => {
   );
 };
 
-export default CatalogLoader;
+export default CatalogLoader;

src/components/ImageBanner.jsx

@@ -37,4 +37,4 @@ function importAll(r) {
   return r.keys().map(r);
 }
 
-export default ImageBanner;
+export default ImageBanner;

src/components/PostLoader.jsx

@@ -41,4 +41,4 @@ const PostLoader = () => {
   );
 };
 
-export default PostLoader;
+export default PostLoader;

src/components/ReplyModal.jsx

@@ -291,4 +291,4 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
 Modal.setAppElement('#root');
 
-export default ReplyModal;
+export default ReplyModal;

src/components/views/Home.jsx

@@ -1,13 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import useAppStore from '../../useAppStore';
 import { Link } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
 
 
-const Home = ({ setBodyStyle }) => {
+const Home = () => {
-  const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
+  const { 
-  const { setSelectedTitle, setSelectedAddress, setSelectedStyle } = useAppStore(state => state);
+    setBodyStyle,
+    defaultSubplebbits,
+    setSelectedAddress, 
+    setSelectedStyle,
+    setSelectedTitle
+  } = useAppStore(state => state);
 
+
+  const handleClick = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+  }
+
+  // prevent dark mode
   useEffect(() => {
     setBodyStyle({
       background: "#ffe url(/assets/fade.png) top repeat-x",
@@ -17,28 +29,7 @@ const Home = ({ setBodyStyle }) => {
     setSelectedStyle("Yotsuba");
   }, [setBodyStyle, setSelectedStyle]);
 
-  const handleClick = (title, address) => {
-    setSelectedTitle(title);
-    setSelectedAddress(address);
-  }
 
-  useEffect(() => {
-    let didCancel = false;
-    fetch(
-      "https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
-      { cache: "no-cache" }
-    )
-      .then((res) => res.json())
-      .then(res => {
-        if (!didCancel) {
-          setDefaultSubplebbits(res);
-        }
-      });
-    return () => {
-      didCancel = true;
-    };
-  }, []);
-  
   return (
     <Container>
       <Header>

src/hooks/useClickForm.js

@@ -29,4 +29,4 @@ const useClickForm = () => {
   return handleClickForm;
 };
 
-export default useClickForm;
+export default useClickForm;