diff --git a/src/app.module.css b/src/app.module.css index 20cd05b9..83b697a9 100644 --- a/src/app.module.css +++ b/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) { diff --git a/src/app.tsx b/src/app.tsx index 7d9ee195..9d4fbf33 100644 --- a/src/app.tsx +++ b/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 ( -