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,6 +9,7 @@ interface Props {
 
 const Page = ({ children }: Props) => {
   return (
+    <LightMode>
       <HStack
         w="100%"
         minH="100vh"
@@ -18,8 +19,9 @@ const Page = ({ children }: Props) => {
         alignItems="stretch"
       >
         <AccountNav/>
-      <Box borderRadius="10px" w="100%" overflow="hidden">{ children }</Box>
+        <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>