force light mode (for a while)

components/Page/Page.tsx

 import React from 'react';
-import { Box, HStack } from '@chakra-ui/react';
+import { Box, HStack, LightMode } from '@chakra-ui/react';
 
 import AccountNav from '../AccountNav/AccountNav';
 
@@ -9,17 +9,19 @@ interface Props {
 
 const Page = ({ children }: Props) => {
   return (
-    <HStack
-      w="100%"
-      minH="100vh"
-      padding="140px 48px 48px 48px"
-      bgColor="gray.200"
-      spacing="12"
-      alignItems="stretch"
-    >
-      <AccountNav/>
-      <Box borderRadius="10px" w="100%" overflow="hidden">{ children }</Box>
-    </HStack>
+    <LightMode>
+      <HStack
+        w="100%"
+        minH="100vh"
+        padding="140px 48px 48px 48px"
+        bgColor="gray.200"
+        spacing="12"
+        alignItems="stretch"
+      >
+        <AccountNav/>
+        <Box borderRadius="10px" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
+      </HStack>
+    </LightMode>
   );
 };
 

pages/index.tsx

@@ -6,7 +6,7 @@ import Page from '../components/Page/Page';
 const Home: NextPage = () => {
   return (
     <Page>
-      <Center h="100%" bgColor="white" color="black">
+      <Center h="100%">
         Home Page
       </Center>
     </Page>

pages/watchlist.tsx

@@ -6,7 +6,7 @@ import Page from '../components/Page/Page';
 const WatchList: NextPage = () => {
   return (
     <Page>
-      <Center h="100%" bgColor="white" color="black">
+      <Center h="100%">
       Watch List Page
       </Center>
     </Page>