diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index eb1f4b8..146a74c 100644 --- 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 ( - + + {siteTitle} - + + + ))} + {colorMode === 'light' ? ( + + ) : ( + + )} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2e4ff2b..e495e3f 100644 --- 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 ( - - + + + {mounted && } + ); } diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx index 0a97bbb..6038bb6 100644 --- 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 index edeff6e..e01d0b2 100644 --- 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 index a74d4b9..4b30e80 100644 --- 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",