Add ThemeProvider for page background style

pages/_app.tsx

@@ -1,16 +1,23 @@
 import type { AppProps } from "next/app";
 import React from "react";
+import { 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";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
+    <ThemeProvider theme={defaultTheme}>
       <React.Fragment>
         <GlobalStyle />
         <ErrorBoundary>
+          <PageBackground>
             <Component {...pageProps} />
+          </PageBackground>
         </ErrorBoundary>
       </React.Fragment>
+    </ThemeProvider>
   );
 }

pages/index.tsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 
 // Styles
-import styled from "styled-components";
+import styled, { Theme, ThemeProvider } from "styled-components";
 import color from "../styles/color";
 
 // Components
@@ -17,6 +17,13 @@ import { Logo } from "../components/logo";
 import { useEffect, useState } from "react";
 import { SELECTED_WALLET_KEY } from "../constants/wallet";
 
+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);
 
@@ -29,6 +36,8 @@ export default function Home() {
   }, []);
 
   return (
+    <ThemeProvider theme={theme}>
+      <PageBackground>
         <Container>
           <Logo />
 
@@ -61,8 +70,8 @@ export default function Home() {
                       alt="Check Icon"
                     />
                   </CheckIconContainer>
-              You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
+                  You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText>{" "}
-              if not, you can install here
+                  user. if not, you can install here
                 </CheckContainer>
                 <CheckContainer>
                   <CheckIconContainer>
@@ -89,6 +98,8 @@ export default function Home() {
             onCloseModal={() => setModalOpen(false)}
           />
         </Container>
+      </PageBackground>
+    </ThemeProvider>
   );
 }
 

styles/background.ts

@@ -0,0 +1,16 @@
+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,5 +1,4 @@
 import { createGlobalStyle } from "styled-components";
-import color from "./color";
 
 export const GlobalStyle = createGlobalStyle`
   html, body {
@@ -8,18 +7,6 @@ export const GlobalStyle = createGlobalStyle`
 
     font-family: 'Inter', sans-serif;
     font-size: 16px;
-    
-    background-color: ${color.black};
-
-    background-size: 5rem 5rem;
-    background-position: top left;
-    background-repeat: repeat;
-    background-image: linear-gradient(
-            rgba(51, 51, 51, 1) 0.1rem,
-            transparent 0.1rem
-    ),
-    linear-gradient(90deg, rgba(51, 51, 51, 1) 0.1rem, transparent 0.1rem);
- 
   }
 
   * {

styles/styled.d.ts

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

styles/theme.ts

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