Update theme on global styles

pages/_app.tsx

@@ -1,15 +1,31 @@
 import type { AppProps } from "next/app";
-import React from "react";
+import { useRouter } from "next/router";
-import { ThemeProvider } from "styled-components";
+import React, { useMemo } from "react";
+import { DefaultTheme, ThemeProvider } from "styled-components";
 import ErrorBoundary from "../components/error-boundary";
 import { PageBackground } from "../styles/background";
 
 import { GlobalStyle } from "../styles/global";
-import { defaultTheme } from "../styles/theme";
+
+const homePageTheme: DefaultTheme = {
+  bgColor: "rgba(18, 18, 18, 1)",
+  bgGridColor: "rgba(51, 51, 51, 1)",
+};
+
+const defaultPageTheme: DefaultTheme = {
+  bgColor: "rgba(18, 18, 18, 0.8)",
+  bgGridColor: "rgba(51, 51, 51, 0.3)",
+};
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  const pageTheme = useMemo(() => {
+    return router.pathname === "/" ? homePageTheme : defaultPageTheme;
+  }, [router.pathname]);
+
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={pageTheme}>
       <React.Fragment>
         <GlobalStyle />
         <ErrorBoundary>

pages/index.tsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 
 // Styles
-import styled, { Theme, ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import color from "../styles/color";
 
 // Components
@@ -19,13 +19,6 @@ import { SELECTED_WALLET_KEY } from "../constants/wallet";
 import { replaceToInstallPage } from "../utils/url";
 import { REFERRAL_KEY } from "../constants/icns";
 
-import { PageBackground } from "../styles/background";
-
-const theme: Theme = {
-  bgColor: "rgba(18, 18, 18, 1)",
-  bgGridColor: "rgba(51, 51, 51, 1)",
-};
-
 export default function Home() {
   const [isModalOpen, setModalOpen] = useState(false);
 
@@ -49,8 +42,6 @@ export default function Home() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <PageBackground>
     <Container>
       <Logo />
 
@@ -83,8 +74,8 @@ export default function Home() {
                   alt="Check Icon"
                 />
               </CheckIconContainer>
-                  You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText>{" "}
+              You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
-                  user. if not, you can install&nbsp;
+              if not, you can install&nbsp;
               <InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
             </CheckContainer>
             <CheckContainer>
@@ -112,8 +103,6 @@ export default function Home() {
         onCloseModal={() => setModalOpen(false)}
       />
     </Container>
-      </PageBackground>
-    </ThemeProvider>
   );
 }
 

styles/background.ts

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const PageBackground = styled.div`
-    background-color: ${({ theme }) => theme.bgColor};
-
-    background-size: 5rem 5rem;
-    background-position: top left;
-    background-repeat: repeat;
-    background-image: linear-gradient(
-            ${({ theme }) => theme.bgGridColor} 0.1rem,
-            transparent 0.1rem
-    ),
-    linear-gradient(90deg, ${({ theme }) =>
-      theme.bgGridColor} 0.1rem, transparent 0.1rem);
-  }
-`;

styles/global.ts

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from "styled-components";
+import color from "./color";
 
 export const GlobalStyle = createGlobalStyle`
   html, body {
@@ -7,6 +8,19 @@ export const GlobalStyle = createGlobalStyle`
 
     font-family: 'Inter', sans-serif;
     font-size: 16px;
+
+    background-color: ${({ theme }) => theme.bgColor ?? color.black};
+
+    background-size: 5rem 5rem;
+    background-position: top left;
+    background-repeat: repeat;
+    background-image: linear-gradient(
+            ${({ theme }) => theme.bgGridColor ?? color.grey[600]} 0.1rem,
+            transparent 0.1rem
+    ),
+    linear-gradient(90deg, ${({ theme }) =>
+      theme.bgGridColor ?? color.grey[600]} 0.1rem, transparent 0.1rem);
+  }
   }
 
   * {

styles/styled.d.ts

@@ -1,7 +1,7 @@
 import "styled-components";
 
 declare module "styled-components" {
-  export interface Theme {
+  export interface DefaultTheme {
     bgColor: string;
     bgGridColor: string;
   }

styles/theme.ts

@@ -1,6 +0,0 @@
-import { Theme } from "styled-components";
-
-export const defaultTheme: Theme = {
-  bgColor: "rgba(18, 18, 18, 0.8)",
-  bgGridColor: "rgba(51, 51, 51, 0.3)",
-};