fix body css and forced yotsuba theme for homepage

src/app.module.css

@@ -1,13 +1,5 @@
 .app {
-  background: var(--body-background-base-color) var(--body-background-pattern-image) top center repeat-x;
-  font-size: var(--body-font-size);
-  font-family: var(--body-font-family);
-  color: var(--body-font-color);
   z-index: 1;
-  min-height: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  min-height: 100vh;
 }
 
 @media (min-width: 640px) {

src/app.tsx

@@ -39,13 +39,13 @@ const BoardLayout = () => {
 const App = () => {
   const location = useLocation();
   const isInHomeView = isHomeView(location.pathname);
-
-  // add theme className to body so it can set the correct body background in index.css
   const [theme] = useTheme();
+
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
-    document.body.classList.add(theme);
-  }, [theme]);
+    const classToAdd = isInHomeView ? 'yotsuba' : theme;
+    document.body.classList.add(classToAdd);
+  }, [theme, isInHomeView]);
 
   const globalLayout = (
     <>
@@ -55,7 +55,7 @@ const App = () => {
   );
 
   return (
-    <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
+    <div className={styles.app}>
       <Routes>
         <Route element={globalLayout}>
           <Route path='/' element={<Home />} />

src/index.css

@@ -5,6 +5,10 @@ html, body {
 
 body {
   background-color: white;
+  background: var(--body-background-base-color) var(--body-background-pattern-image) top center repeat-x;
+  font-size: var(--body-font-size);
+  font-family: var(--body-font-family);
+  color: var(--body-font-color);
 }
 
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, th, td, iframe, blockquote {