Add dark mode (#90)

* add targeted style for inline code

* add dark-mode

gatsby-browser.js

@@ -1,8 +1,12 @@
 // custom typefaces
+import ThemeProvider from "./src/context/themeProvider"
+
 import "typeface-montserrat"
 import "typeface-merriweather"
 
 import "./src/styles/main.scss"
 
 require("prismjs/themes/prism-tomorrow.css")
 require("prismjs/plugins/line-numbers/prism-line-numbers.css")
+
+export const wrapRootElement = ThemeProvider

src/components/layout.tsx

@@ -1,8 +1,11 @@
+import Footer from "../components/footer"
+import Navigation from "../components/navigation"
 import { PageRendererProps } from "gatsby"
 import React, { ReactNode } from "react"
+import Helmet from "react-helmet"
 import styled from "styled-components"
-import Footer from "../components/footer"
-import Navigation from "../components/navigation"
+
+import { ThemeContext } from "../context/themeProvider"
 import { rhythm } from "../utils/typography"
 
 interface Props extends PageRendererProps {
@@ -22,15 +25,34 @@ export const Layout = (props: Props) => {
   const { children, title, titleEmoji } = props
 
   return (
-    <Content>
-      <Navigation />
-      <main id="main-content">
-        <h1 className="page-title">
-          {title} {titleEmoji}
-        </h1>
-        {children}
-      </main>
-      <Footer />
-    </Content>
+    <ThemeContext.Consumer>
+      {context => {
+        const themeClass = context.isDark
+          ? "content darkTheme"
+          : "content lightTheme"
+        return (
+          <>
+            <Helmet
+              bodyAttributes={{
+                class: `theme ${themeClass}`,
+              }}
+            />
+            <Content>
+              <Navigation
+                changeTheme={() => context.changeTheme()}
+                isDark={context.isDark}
+              />
+              <main id="main-content">
+                <h1 className="page-title">
+                  {title} {titleEmoji}
+                </h1>
+                {children}
+              </main>
+              <Footer />
+            </Content>
+          </>
+        )
+      }}
+    </ThemeContext.Consumer>
   )
 }

src/components/navigation.tsx

@@ -1,5 +1,7 @@
 import { useScrollPosition } from "@n8tb1t/use-scroll-position"
 import { graphql, useStaticQuery } from "gatsby"
+import Moon from "../assets/svg/moon.svg"
+import Sun from "../assets/svg/sun.svg"
 import { FadeLink } from "./link"
 
 import React, { useState } from "react"
@@ -9,7 +11,7 @@ interface Link {
   link: string
 }
 
-const Navigation = () => {
+const Navigation = ({ changeTheme, isDark }) => {
   const [isScrolledDown, setIsScrolledDown] = useState(false)
 
   useScrollPosition(({ prevPos, currPos }) => {
@@ -43,13 +45,24 @@ const Navigation = () => {
     </div>
   )
 
+  const themeIcon = isDark ? (
+    <img src={Sun} className="theme-icon" alt="Dark mode" />
+  ) : (
+    <img src={Moon} className="theme-icon" alt="Light mode" />
+  )
+
   return (
     <nav className={isScrolledDown ? "nav scroll" : "nav"}>
       <div className="nav-container">
-        <div className="links">
+        <div className="home">
           <FadeLink to="/">&#x1f3e0; Home</FadeLink>
         </div>
         {links}
+        <div className="theme-toggle">
+          <button onClick={changeTheme} className="theme-switcher">
+            {themeIcon}
+          </button>
+        </div>
       </div>
       <div />
     </nav>

src/components/recaptcha.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { ThemeContext } from "../context/themeProvider"
 
 import ReCAPTCHA from "react-google-recaptcha"
 
@@ -15,14 +16,21 @@ const recaptcha = (props: any) => {
   }
 
   return (
-    <div className="recaptcha-wrapper">
-      <ReCAPTCHA
-        sitekey={recaptchaKey}
-        style={{ display: "inline-block" }}
-        onChange={submitTrue}
-        onExpired={submitFalse}
-      />
-    </div>
+    <ThemeContext.Consumer>
+      {context => {
+        return (
+          <div className="recaptcha-wrapper">
+            <ReCAPTCHA
+              sitekey={recaptchaKey}
+              theme={context.isDark ? "dark" : "light"}
+              style={{ display: "inline-block" }}
+              onChange={submitTrue}
+              onExpired={submitFalse}
+            />
+          </div>
+        )
+      }}
+    </ThemeContext.Consumer>
   )
 }
 

src/context/themeProvider.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+
+export const ThemeContext = React.createContext({
+  changeTheme: () => {},
+  isDark: false,
+})
+
+const ThemeProvider = props => {
+  const [isDark, setTheme] = useState(false)
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDark,
+        changeTheme: () => setTheme(!isDark),
+      }}
+    >
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+export default ({ element }) => <ThemeProvider>{element}</ThemeProvider>

src/index.d.ts

@@ -2,3 +2,4 @@ declare module "typography-theme-wordpress-2016"
 declare module "gatsby-plugin-transition-link/AniLink"
 
 declare module "*.jpg"
+declare module "*.svg"

src/styles/base/variables.scss

@@ -12,34 +12,69 @@ $tablet: $small;
 $desktop: $medium;
 $width: 850px;
 
-/* Backgrounds */
+/* Colors */
 
-$background: #ffffff;
-$container-background: #f4f4f4;
-$hover-01: #e5e5e5;
-$hover-02: #f2f2f2;
+/* light */
+
+$background: #fafafa;
+$on-background: rgba(0, 0, 0, 0.87);
+$on-background-secondary: rgba(0, 0, 0, 0.54);
+$surface: #fafafa;
+
+$primary: #ffffff;
+$primary-variant: #3700b3;
+$on-primary: #2d2d2d;
+
+$secondary: #03dac6;
+$secondary-variant: #018786;
+$on-secondary: #000000;
+
+$error: #b00020;
+$on-error: #ffffff;
+
+$code-block-color: #2d2d2d;
+$inline-code-color: #f5f2f0;
+$blockquote-color: #999;
+
+$tag-color: #f2f2f2;
+$inline-tag-color: lighten(#5183f5, 32%);
+$on-inline-tag: lighten($on-background, 10%);
+$selected-tag: #8f9bff;
+
+$navbar-color: #fafafa;
+$navbar-text: white;
+$navbar-hover: #6200ee;
 
 $text-area-background: #f8f8f8;
 
-$primary-color: #5183f5;
-$font-color: #454545;
+$hover: #f2f2f2;
 
-$light-primary-color: lighten($primary-color, 32%);
-$light: #f2f2f2;
+/* dark */
 
-/* Text */
+$black: #121212;
 
-$text-main: #161616;
-$text-inverse: #ffffff;
-$text-secondary: rgba(0, 0, 0, 0.4);
+$dark-background: #202020;
+$dark-on-background: #ffffff;
+$dark-surface: #121212;
+
+$dark-grey: #b3b9c5;
+
+$dark-hover: $black;
+
+$dark-primary: #bb86fc;
+$dark-on-primary: #000000;
+
+$dark-secondary: #03dac6;
+$dark-on-secondary: #000000;
+
+$dark-surface: #121212;
 
 /* Borders */
+
 $subtle-border: #e0e0e0;
 $form-border: #ccc;
 
 /* Misc */
 
-$success: #24a148;
-
 $regular-border-radius: 4px;
 $button-border-radius: 8px;

src/styles/components/blog.scss

@@ -20,7 +20,7 @@
 
 blockquote p {
   font-style: italic;
-  color: #999;
+  color: $blockquote-color;
 }
 
 .gatsby-highlight pre[class*="language-"].line-numbers {
@@ -30,15 +30,15 @@ blockquote p {
 }
 
 .gatsby-highlight {
-  background-color: #2d2d2d;
+  background-color: $code-block-color;
   border-radius: 0.3em;
   margin: 0.5em 0;
   padding: 1em;
   overflow: auto;
 }
 
 :not(pre) > code[class*="language-"] {
-  background: #f5f2f0 !important;
+  background: $inline-code-color !important;
   color: black;
   font-weight: bold;
 }