feat: add color mode

won23 · Sep 17, 2020 · af75e1a · af75e1a
1 parent 0b643bf
commit af75e1a
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 16 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,14 +1,16 @@
-import { Box, Flex, FlexProps } from '@chakra-ui/core';
+import { Box, Flex, FlexProps, useColorMode } from '@chakra-ui/core';
 import Head from 'next/head';
 import Navbar from './Navbar';
+import customTheme from 'src/styles/theme';
 
 export interface ILayoutProps {
   home?: boolean;
+  title?: string;
   children?: any;
 }
 
-export const siteTitle = "Tim Won's Website";
 export default function Layout(props: ILayoutProps) {
+  const siteTitle = `Tim Won | Tech, Management, and Life`;
   const navFlexSetting: FlexProps = {
     width: '100%',
     flexDirection: 'column',
@@ -19,11 +21,28 @@ export default function Layout(props: ILayoutProps) {
     margin: '2rem auto 6rem',
     px: '2rem',
   };
+
+  const { colorMode } = useColorMode();
+
   return (
-    <Box w="100%">
+    <Box
+      w="100%"
+      minH="100%"
+      bg={customTheme.mode[colorMode].background}
+      color={customTheme.mode[colorMode].color}
+    >
       <Head>
+        <title>{siteTitle}</title>
         <link rel="icon" href="/favicon.ico" />
-        <meta name="description" content="A personal site about me" />
+        <meta name="title" content={siteTitle} />
+        <meta
+          name="description"
+          content="A personal website of Tim Won about Technology, Management, and Life"
+        />
+        <meta
+          name="keywords"
+          content="Tim, Won, Tim Won, PwC, Development, Technology"
+        />
         <meta
           property="og:image"
           content={`https://og-image.now.sh/${encodeURI(

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -3,11 +3,11 @@ import {
   Flex,
   Heading,
   FlexProps,
-  Text,
-  Icon,
   PseudoBox,
-  Link,
   PseudoBoxProps,
+  useColorMode,
+  Button,
+  IconButton,
 } from '@chakra-ui/core';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
@@ -18,6 +18,7 @@ export interface INavItemProps {
   href: string;
   children?;
   handleNavItemClicked?: Function;
+  handleColormodeClicked?: Function;
 }
 export interface INavbarProps {}
 
@@ -56,15 +57,14 @@ export default function Navbar(props: INavbarProps) {
   const router = useRouter();
   const navFlexSetting: FlexProps = {
     as: 'nav',
-    // px: '6rem',
     py: 4,
     width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
     borderBottom: '1px',
     borderColor: 'gray.500',
   };
-
+  const { colorMode, toggleColorMode } = useColorMode();
   const navItems: { name: string; path: string }[] = [
     {
       name: 'Home',
@@ -126,6 +126,21 @@ export default function Navbar(props: INavbarProps) {
                 {navItem.name}
               </NavItem>
             ))}
+            {colorMode === 'light' ? (
+              <IconButton
+                aria-label="Night mode"
+                icon="moon"
+                onClick={toggleColorMode}
+                variant="ghost"
+              ></IconButton>
+            ) : (
+              <IconButton
+                variant="ghost"
+                aria-label="Light mode"
+                icon="sun"
+                onClick={toggleColorMode}
+              ></IconButton>
+            )}
           </Box>
         </Flex>
       </Flex>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,19 +1,28 @@
-import { ThemeProvider, CSSReset } from '@chakra-ui/core';
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core';
 import '../styles/global.css';
 import customTheme from '../styles/theme';
 import Router from 'next/router';
 import * as gtag from 'src/lib/gtag'; //https://hoangtrinhj.com/using-google-analytics-with-next-js
+import { useState, useEffect } from 'react';
 interface IProps {
   [key: string]: any;
 }
 // Notice how we track pageview when route is changed
 Router.events.on('routeChangeComplete', (url) => gtag.pageView(url));
 
-export default function App({ Component, pageProps }: IProps) {
+export default function App({ Component, pageProps, children }: IProps) {
+  const [mounted, setMounted] = useState(false); // a hack to fix color mode temporarily
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <ThemeProvider theme={customTheme}>
-      <CSSReset />
-      <Component {...pageProps} />
+      <ColorModeProvider>
+        <CSSReset />
+        {mounted && <Component {...pageProps} />}
+      </ColorModeProvider>
     </ThemeProvider>
   );
 }
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -1,4 +1,4 @@
-import Layout, { siteTitle } from '../components/Layout';
+import Layout from '../components/Layout';
 import { getSortedPostsData, IPost, ISortedPostData } from '../lib/posts';
 import NextLink from 'next/link';
 import {

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,9 +1,20 @@
 import * as React from 'react';
-import { Box, Heading, Flex, Image, Text, Divider } from '@chakra-ui/core';
+import {
+  Box,
+  Heading,
+  Flex,
+  Image,
+  Text,
+  Divider,
+  useColorMode,
+} from '@chakra-ui/core';
 import Layout from '../components/Layout';
 import Reference, { ILink } from '../components/Reference';
+import customTheme from 'src/styles/theme';
 export interface IHomeProps {}
 export default function Home(props: IHomeProps) {
+  const { colorMode } = useColorMode();
+
   const homeInfo: ILink = {
     href:
       'https://www.google.com/maps/place/North+Bethesda,+MD/@39.0430774,-77.1551229,13z/data=!3m1!4b1!4m5!3m4!1s0x89b7cc3bfabff901:0x50407ec368483348!8m2!3d39.0445535!4d-77.1188678',
@@ -55,7 +66,7 @@ export default function Home(props: IHomeProps) {
           flexDirection="column"
           alignItems="center"
           width="100%"
-          bg="gray.200"
+          bg={customTheme.mode[colorMode].panelBackground}
           padding="1.5rem"
           borderRadius="1rem"
         >

diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
@@ -7,6 +7,18 @@ export default {
     heading: "'Raleway', sans-serif",
     mono: 'Menlo, monospace',
   },
+  mode: {
+    light: {
+      background: 'white',
+      color: '#1A202C',
+      panelBackground: 'gray.200',
+    },
+    dark: {
+      background: 'gray.800',
+      panelBackground: 'gray.700',
+      color: 'white',
+    },
+  },
   // fontSizes: {
   //   xs: "12px",
   //   sm: "14px",