diff --git a/src/frontend/next/src/components/Posts/Post.tsx b/src/frontend/next/src/components/Posts/Post.tsx
index 9b2747dfa7..e87faff1c5 100644
--- a/src/frontend/next/src/components/Posts/Post.tsx
+++ b/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',
diff --git a/src/frontend/next/src/components/Posts/index.tsx b/src/frontend/next/src/components/Posts/index.tsx
index a2da3221cc..b0b7be1c3e 100644
--- a/src/frontend/next/src/components/Posts/index.tsx
+++ b/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 (
-
- setSize(size + 1)} />
-
+
+
+ setSize(size + 1)} />
+
+
);
};
diff --git a/src/frontend/next/src/components/ThemeToggleButton.tsx b/src/frontend/next/src/components/ThemeToggleButton.tsx
new file mode 100644
index 0000000000..b3faca3c39
--- /dev/null
+++ b/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 (
+
+ {theme.palette.type === 'light' ? (
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default ThemeToggleButton;
diff --git a/src/frontend/next/src/pages/_app.tsx b/src/frontend/next/src/pages/_app.tsx
index 4588e08860..9819dee8e4 100644
--- a/src/frontend/next/src/pages/_app.tsx
+++ b/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 (
-
+
-
+
);
diff --git a/src/frontend/next/src/pages/_document.tsx b/src/frontend/next/src/pages/_document.tsx
index 8cb61bc760..234f0bb1c2 100644
--- a/src/frontend/next/src/pages/_document.tsx
+++ b/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 {
diff --git a/src/frontend/next/src/pages/index.tsx b/src/frontend/next/src/pages/index.tsx
index d2362ae2ab..0327c264fc 100644
--- a/src/frontend/next/src/pages/index.tsx
+++ b/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 (
<>
Telescope
-
+
diff --git a/src/frontend/next/src/styles/globals.css b/src/frontend/next/src/styles/globals.css
index 6da6232907..5c86f0f5ae 100644
--- a/src/frontend/next/src/styles/globals.css
+++ b/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;
}
diff --git a/src/frontend/next/src/theme/index.ts b/src/frontend/next/src/theme/index.ts
new file mode 100644
index 0000000000..e1df7bcef8
--- /dev/null
+++ b/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',
+ },
+ },
+});
diff --git a/src/frontend/next/src/theme/lightTheme.ts b/src/frontend/next/src/theme/lightTheme.ts
deleted file mode 100644
index 8993d553c1..0000000000
--- a/src/frontend/next/src/theme/lightTheme.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { red } from '@material-ui/core/colors';
-import createMuiTheme, { Theme } from '@material-ui/core/styles/createMuiTheme';
-
-const lightTheme: Theme = createMuiTheme({
- palette: {
- type: 'light',
- primary: {
- main: '#333E64',
- contrastText: '#E5E5E5',
- light: '#FFFFFF',
- },
- secondary: {
- main: '#0589D6',
- },
- error: {
- main: red.A400,
- },
- background: {
- default: '#E5E5E5',
- },
- text: {
- primary: '#181818',
- secondary: '#8BC2EB',
- },
- },
-});
-
-export default lightTheme;