Fixed#77: Added Dark theme

src/frontend/next/src/components/Posts/Post.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: 0,
       fontSize: '1.5rem',
       marginBottom: '4em',
+      backgroundColor: theme.palette.background.default,
     },
     header: {
       backgroundColor: theme.palette.primary.main,
@@ -70,6 +71,7 @@ const useStyles = makeStyles((theme: Theme) =>
       overflow: 'auto',
       padding: '2em',
       color: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.paper,
     },
     link: {
       textDecoration: 'none',

src/frontend/next/src/components/Posts/index.tsx

@@ -9,10 +9,13 @@ import useSiteMetaData from '../../hooks/use-site-metadata';
 import useFaviconBadge from '../../hooks/use-favicon-badge';
 import { Post } from '../../interfaces';
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
       padding: 0,
+      backgroundColor: theme.palette.background.default,
+    },
+    postsWrapper: {
       maxWidth: '785px',
     },
     error: {
@@ -90,9 +93,11 @@ const Posts = () => {
   }
 
   return (
-    <Container className={classes.root}>
-      <Timeline pages={data} nextPage={() => setSize(size + 1)} />
-    </Container>
+    <div className={classes.root}>
+      <Container className={classes.postsWrapper}>
+        <Timeline pages={data} nextPage={() => setSize(size + 1)} />
+      </Container>
+    </div>
   );
 };
 

src/frontend/next/src/components/ThemeToggleButton.tsx

@@ -0,0 +1,31 @@
+import { IconButton, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+
+const useStyles = makeStyles({
+  themeToggleButton: {
+    position: 'absolute',
+    top: 50,
+    right: 10,
+  },
+});
+type Props = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+const ThemeToggleButton = ({ theme, toggleTheme }: Props) => {
+  const classes = useStyles();
+  return (
+    <IconButton onClick={toggleTheme} className={classes.themeToggleButton}>
+      {theme.palette.type === 'light' ? (
+        <Brightness4Icon color="primary" fontSize="large" />
+      ) : (
+        <Brightness7Icon fontSize="large" />
+      )}
+    </IconButton>
+  );
+};
+
+export default ThemeToggleButton;

src/frontend/next/src/pages/_app.tsx

@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { AppProps } from 'next/app';
 import { ThemeProvider } from '@material-ui/core/styles';
 import UserProvider from '../components/UserProvider';
 
 import '../styles/globals.css';
-import lightTheme from '../theme/lightTheme';
+import { darkTheme, lightTheme } from '../theme';
 
 // Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
 const App = ({ Component, pageProps }: AppProps) => {
@@ -17,10 +17,20 @@ const App = ({ Component, pageProps }: AppProps) => {
     }
   }, []);
 
+  const [theme, setTheme] = useState(lightTheme);
+
+  const toggleTheme = () => {
+    if (theme.palette.type === 'light') {
+      setTheme(darkTheme);
+    } else {
+      setTheme(lightTheme);
+    }
+  };
+
   return (
-    <ThemeProvider theme={lightTheme}>
+    <ThemeProvider theme={theme}>
       <UserProvider>
-        <Component {...pageProps} />
+        <Component {...pageProps} theme={theme} toggleTheme={toggleTheme} />
       </UserProvider>
     </ThemeProvider>
   );

src/frontend/next/src/pages/_document.tsx

@@ -4,7 +4,7 @@ import { ServerStyleSheets } from '@material-ui/core/styles';
 
 import { logoUrl } from '../components/Logo';
 import config from '../config';
-import lightTheme from '../theme/lightTheme';
+import { lightTheme } from '../theme';
 
 // Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
 class MyDocument extends Document {

src/frontend/next/src/pages/index.tsx

@@ -1,16 +1,22 @@
 import Head from 'next/head';
+import { Theme } from '@material-ui/core';
 import Banner from '../components/Banner';
 import BackToTopButton from '../components/BackToTopButton';
 import Posts from '../components/Posts';
+import ThemeToggleButton from '../components/ThemeToggleButton';
 
-const Home = () => {
+type Props = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+const Home = ({ theme, toggleTheme }: Props) => {
   return (
     <>
       <Head>
         <title>Telescope</title>
         <meta property="og:title" content="Telescope" key="title" />
       </Head>
-
+      <ThemeToggleButton theme={theme} toggleTheme={toggleTheme} />
       <Banner />
       <BackToTopButton />
       <main className="main">

src/frontend/next/src/styles/globals.css

@@ -10,8 +10,9 @@
 * then they will trickle down to the other pages.
  */
 
-html {
-  padding: none;
-  margin: none;
+html,
+body {
+  padding: 0;
+  margin: 0;
   font-size: 10px;
 }

src/frontend/next/src/theme/index.ts

@@ -0,0 +1,52 @@
+import { red } from '@material-ui/core/colors';
+import createMuiTheme, { Theme } from '@material-ui/core/styles/createMuiTheme';
+
+export const lightTheme: Theme = createMuiTheme({
+  palette: {
+    type: 'light',
+    primary: {
+      main: '#333E64',
+      contrastText: '#E5E5E5',
+      light: '#FFFFFF',
+    },
+    secondary: {
+      main: '#0589D6',
+    },
+    error: {
+      main: red.A400,
+    },
+    background: {
+      default: '#E5E5E5',
+      paper: '#E5E5E5',
+    },
+    text: {
+      primary: '#181818',
+      secondary: '#8BC2EB',
+    },
+  },
+});
+
+export const darkTheme: Theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#242424',
+      contrastText: '#E5E5E5',
+      light: '#FFFFFF',
+    },
+    secondary: {
+      main: '#4f96d8',
+    },
+    error: {
+      main: red.A400,
+    },
+    background: {
+      paper: '#303030',
+      default: '#121212',
+    },
+    text: {
+      primary: '#E5E5E5',
+      secondary: '#4f96d8',
+    },
+  },
+});