Add Dark Mode Functionality with Caching

gatsby-node.js

@@ -45,7 +45,6 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
 		if (result.errors) {
 			return Promise.reject(result.errors);
 		}
-		console.log(result);
 		var ret = { data: { allMarkdownRemark: { edges: [] } } };
 		result.data.allMarkdownRemark.edges.forEach(({ node }) => {
 			if (

src/components/header.js

@@ -7,16 +7,15 @@ import {
 	Toolbar,
 	IconButton,
 	Typography,
-	Button,
 	makeStyles,
 	useScrollTrigger,
 	Slide,
 	List,
 	ListItem,
 	SwipeableDrawer,
-	Divider,
 	ListItemText,
 	Collapse,
+	Switch,
 } from "@material-ui/core";
 import { ExpandLess, ExpandMore } from "@material-ui/icons";
 import MenuIcon from "@material-ui/icons/Menu";
@@ -34,10 +33,14 @@ const useStyles = makeStyles((theme) => ({
 	nested2: {
 		paddingLeft: theme.spacing(6),
 	},
+	bg: {
+		backgroundColor: theme.palette.background.paper,
+		overflowX: "hidden",
+	},
 }));
 
 function SlideHeader(props) {
-	const { window, children } = props;
+	const { children } = props;
 	const trigger = useScrollTrigger();
 	return (
 		<Slide appear={false} direction="down" in={!trigger}>
@@ -96,10 +99,11 @@ const NotesList = () => {
 				width: 250,
 				minHeight: "100vh",
 				height: "100%",
-				backgroundColor: "#F3F3F7",
+				// backgroundColor: "#F3F3F7",0
 			}}
+			className={classes.bg}
 		>
-			<List style={{ backgroundColor: "#F3F3F7" }}>
+			<List className={classes.bg}>
 				{Object.keys(assortedPosts).map((key) => (
 					<>
 						<ListItem button key={key} onClick={(e) => handleClick(key)}>
@@ -199,6 +203,10 @@ function Header(props) {
 							{props.siteTitle}
 						</Link>
 					</Typography>
+					<Switch
+						checked={props.themeDirection}
+						onChange={() => props.themeChange()}
+					/>
 				</Toolbar>
 				<SwipeableDrawer
 					anchor="left"

src/components/layout.css

@@ -176,6 +176,11 @@ textarea {
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+::-webkit-scrollbar {
+  /* width: 5px; */
+  /* background: grey; */
+  /* scrollbar-color: red; */
+}
 ::-webkit-input-placeholder {
   color: inherit;
   opacity: 0.54;
@@ -199,7 +204,7 @@ html {
   box-sizing: inherit;
 }
 body {
-  color: hsla(0, 0%, 0%, 0.8);
+  /* color: hsla(0, 0%, 0%, 0.8); */
   font-family: georgia, serif;
   font-weight: normal;
   word-wrap: break-word;

src/components/layout.js

@@ -5,48 +5,102 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"
+import React from "react";
+import PropTypes from "prop-types";
+import { useStaticQuery, graphql } from "gatsby";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Header from "./header";
+import "./layout.css";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { useMediaQuery } from "@material-ui/core";
 
-import Header from "./header"
-import "./layout.css"
+console.warn = console.error = () => {};
 
 const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
-  return (
-    <div style={{ overflow: "auto" }}>
-      <Header siteTitle={`Shrey's ${data.site.siteMetadata.title}`} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-          paddingTop: 65,
-        }}
-      >
-        <main>{children}</main>
-        {/* <footer>
+	const data = useStaticQuery(graphql`
+		query SiteTitleQuery {
+			site {
+				siteMetadata {
+					title
+				}
+			}
+		}
+	`);
+
+	const systemDark = useMediaQuery("(prefers-color-scheme: dark)");
+	React.useEffect(() => {
+		var theme = window.localStorage.getItem("theme");
+		if (theme === null) {
+			setDarkState(systemDark);
+		} else {
+			theme = theme === "true";
+			setDarkState(theme);
+		}
+	}, []);
+
+	const [darkState, setDarkState] = React.useState(false);
+	// const palletType = darkState ? "dark" : "light";
+	// const mainPrimaryColor = darkState ? orange[500] : lightBlue[500]
+	// const mainSecondaryColor = darkState ? deepOrange[900] : deepPurple[500]
+	const getTheme = (state) => {
+		return createMuiTheme({
+			palette: {
+				type: state ? "dark" : "light",
+				// background: { paper: "#F3F3F7" },
+			},
+		});
+	};
+	const darkTheme = getTheme(darkState);
+	// createMuiTheme({
+	// 	palette: {
+
+	// 		type: darkState ? "dark" : "light",
+
+	// 	},
+	// });
+
+	const handleThemeChange = async () => {
+		window.localStorage.setItem("theme", !darkState);
+		setDarkState(!darkState);
+	};
+	return (
+		<ThemeProvider theme={darkTheme}>
+			<CssBaseline>
+				<div
+					style={{
+						overflow: "auto",
+						backgroundColor: darkTheme.palette.background.default,
+					}}
+				>
+					<Header
+						siteTitle={`Shrey's ${data.site.siteMetadata.title}`}
+						themeChange={handleThemeChange}
+						themeDirection={darkState}
+					/>
+
+					<div
+						style={{
+							margin: `0 auto`,
+							maxWidth: 960,
+							padding: `0 1.0875rem 1.45rem`,
+							paddingTop: 65,
+						}}
+					>
+						<main>{children}</main>
+						{/* <footer>
           © {new Date().getFullYear()}, Built with
           {` `}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
         </footer> */}
-      </div>
-    </div>
-  )
-}
+					</div>
+				</div>
+			</CssBaseline>
+		</ThemeProvider>
+	);
+};
 
 Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
+	children: PropTypes.node.isRequired,
+};
 
-export default Layout
+export default Layout;

src/templates/blog-post.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Helmet from "react-helmet";
 import Layout from "../components/layout";
+import { graphql } from "gatsby";
 require(`katex/dist/katex.min.css`);
 
 export default function Template({ data }) {