Merge pull request #83 from the-programmers-hangout/feat-implement-dark-mode

feat: implement dark mode

package-lock.json

@@ -6830,8 +6830,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6849,13 +6848,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6868,18 +6865,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6982,8 +6976,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6993,7 +6986,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7006,20 +6998,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7036,7 +7025,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7109,8 +7097,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7120,7 +7107,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7196,8 +7182,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7227,7 +7212,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7245,7 +7229,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7284,13 +7267,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -9634,14 +9615,12 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "optional": true
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "optional": true
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
         },
         "slice-ansi": {
           "version": "1.0.0",
@@ -9667,7 +9646,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "optional": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -12810,6 +12788,14 @@
         "ts-pnp": "^1.1.2"
       }
     },
+    "polished": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-3.4.1.tgz",
+      "integrity": "sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==",
+      "requires": {
+        "@babel/runtime": "^7.4.5"
+      }
+    },
     "portfinder": {
       "version": "1.0.21",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz",

package.json

@@ -44,6 +44,7 @@
     "gatsby-source-filesystem": "^2.1.8",
     "gatsby-transformer-remark": "^2.6.10",
     "gatsby-transformer-sharp": "^2.2.5",
+    "polished": "^3.4.1",
     "prismjs": "^1.17.1",
     "ramda": "^0.26.1",
     "react": "^16.8.6",

src/ThemeProvider.tsx

@@ -0,0 +1,35 @@
+import React, { createContext } from "react"
+import { ThemeProvider as BaseThemeProvider } from "styled-components"
+
+import { darkTheme, lightTheme } from "./design/themes"
+import { useLocalStorage } from "./hooks/useLocalStorage"
+
+interface IThemeProviderProps {
+  // TODO: type this properly, BaseThemeProvider doesn't like React.ReactNode
+  children: any
+}
+
+export interface IThemeContext {
+  theme: "dark" | "light"
+  setTheme: () => void
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<IThemeContext | null>(null)
+
+const ThemeProvider = ({ children }: IThemeProviderProps) => {
+  const [theme, setTheme] = useLocalStorage("theme", "light")
+  const themeObject = theme === "dark" ? darkTheme : lightTheme
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light")
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      <BaseThemeProvider theme={themeObject}>{children}</BaseThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+export { ThemeProvider }

src/components/DiscordButton/styles.tsx

@@ -9,7 +9,7 @@ export const DiscordButtonWrapper = styled.div`
   font-size: 30px;
   font-weight: 700;
   text-transform: uppercase;
-  background: #7289da;
+  background: ${props => props.theme.discord.base};
   color: #fff;
   padding: 22px 35px;
   border-radius: 5px;
@@ -18,7 +18,7 @@ export const DiscordButtonWrapper = styled.div`
   box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
 
   &:hover {
-    background: #5265ad;
+    background: ${props => props.theme.discord.darker};
   }
 `
 

src/components/Layout/index.tsx

@@ -8,6 +8,7 @@
 import React, { Fragment, PropsWithChildren } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
+import { ThemeProvider } from "../../ThemeProvider"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
@@ -21,19 +22,21 @@ export function Layout({
   const isHome = location.pathname === "/"
 
   return (
-    <SC.LayoutWrapper>
-      <GlobalStyles />
-      <Header isHome={isHome} />
-      {!isHome && (
-        <Fragment>
-          <SC.MainContent>
-            <Container>{children}</Container>
-          </SC.MainContent>
-          <Footer />
-          <WavesBottom />
-          <SC.WavesSpacer />
-        </Fragment>
-      )}
-    </SC.LayoutWrapper>
+    <ThemeProvider>
+      <SC.LayoutWrapper>
+        <GlobalStyles />
+        <Header isHome={isHome} />
+        {!isHome && (
+          <Fragment>
+            <SC.MainContent>
+              <Container>{children}</Container>
+            </SC.MainContent>
+            <Footer />
+            <WavesBottom />
+            <SC.WavesSpacer />
+          </Fragment>
+        )}
+      </SC.LayoutWrapper>
+    </ThemeProvider>
   )
 }

src/components/Markdown/styles.tsx

@@ -67,7 +67,31 @@ export const MarkdownWrapper = styled.div`
     ${modularScaleCSS(1)};
   }
 
+  :not(pre) > code[class*="language-"],
   pre[class*="language-"] {
-    overflow-x: scroll;
+    overflow-x: auto;
+    background: #192129;
+  }
+
+  pre[class*="language-"] {
+    .token.boolean,
+    .token.number,
+    .token.function {
+      color: #d48d5d;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url {
+      color: #00add9;
+    }
+
+    .token.selector,
+    .token.important,
+    .token.atrule,
+    .token.keyword,
+    .token.builtin {
+      color: #d1529d;
+    }
   }
 `

src/components/MobileHeader/styles.tsx

@@ -1,10 +1,11 @@
+import { transparentize } from "polished"
 import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
 import Logo from "../../images/tph-logo.svg"
 
 export const MobileHeaderWrapper = styled.div`
   z-index: 50;
-  background: rgba(255, 255, 255, 0.8);
+  background: ${props => transparentize(0.2, props.theme.main.background)};
   position: fixed;
   top: 0;
   left: 0;
@@ -50,7 +51,7 @@ export const Burger = styled.div`
     content: "";
     height: 2px;
     width: 16px;
-    background: #222;
+    background: ${props => props.theme.main.foreground};
     margin: 0 auto;
   }
 

src/components/ResourceBreadcrumb/styles.tsx

@@ -1,4 +1,5 @@
 import { Link } from "gatsby"
+import { darken, lighten } from "polished"
 import styled from "styled-components"
 
 export const ResourceBreadcrumbWrapper = styled.div`
@@ -23,16 +24,20 @@ export const LinkWrapper = styled.div`
   }
 
   svg path {
-    fill: #04b0a6;
+    fill: ${props => props.theme.main.link};
   }
 `
 
 export const StyledLink = styled(Link)`
-  color: #04b0a6;
+  color: ${props => props.theme.main.link};
   cursor: pointer;
 
   &:hover {
     color: #045551;
+    color: ${props =>
+      props.theme.name === "dark"
+        ? lighten(0.15, props.theme.main.link)
+        : darken(0.15, props.theme.main.link)};
   }
 `
 

src/components/ResourceHeader/styles.tsx

@@ -1,6 +1,7 @@
 import { Link } from "gatsby"
 import styled, { css } from "styled-components"
 import { fontFamily, modularScale } from "../../design/typography"
+import { darken, lighten } from "polished"
 
 export const ResourceHeaderWrapper = styled.div`
   border-bottom: 1px solid #dbdbdb;
@@ -57,13 +58,16 @@ export const ExternalResources = styled(ExtraLinks)``
 const extraLink = css`
   display: flex;
   align-items: center;
-  color: #04b0a6;
+  color: ${props => props.theme.main.link};
   margin-top: 4px;
   margin-left: 20px;
   cursor: pointer;
 
   &:hover {
-    color: #045551;
+    color: ${props =>
+      props.theme.name === "dark"
+        ? lighten(0.15, props.theme.main.link)
+        : darken(0.15, props.theme.main.link)};
   }
 
   svg {
@@ -74,7 +78,7 @@ const extraLink = css`
   }
 
   svg path {
-    fill: #04b0a6;
+    fill: ${props => props.theme.main.link};
   }
 `
 

src/components/ResourcesLayout/index.tsx

@@ -9,6 +9,7 @@ import React, { PropsWithChildren, useState } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
 import { SidebarProvider } from "../../SidebarProvider"
+import { ThemeProvider } from "../../ThemeProvider"
 import { MobileHeader } from "../MobileHeader"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
@@ -25,19 +26,23 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
   }
 
   return (
-    <SidebarProvider>
-      <GlobalStyles />
-      <SC.Main>
-        <MobileHeader openMenu={openMenu} />
-        <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
-        <SC.MainContent>
-          <SC.Container>{children}</SC.Container>
-        </SC.MainContent>
-      </SC.Main>
-      <SC.Overlay
-        className={activeMobileMenu ? "is-open" : ""}
-        onClick={closeMenu}
-      />
-    </SidebarProvider>
+    <ThemeProvider>
+      <SidebarProvider>
+        <GlobalStyles />
+        <SC.Main>
+          <MobileHeader openMenu={openMenu} />
+          <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
+          <SC.MainContent>
+            <SC.Container>
+              {children}
+            </SC.Container>
+          </SC.MainContent>
+        </SC.Main>
+        <SC.Overlay
+          className={activeMobileMenu ? "is-open" : ""}
+          onClick={closeMenu}
+        />
+      </SidebarProvider>
+    </ThemeProvider>
   )
 }

src/components/ResourcesLayout/styles.tsx

@@ -4,6 +4,8 @@ export const Main = styled.div`
   display: flex;
   width: 100%;
   min-height: 100vh;
+  background: ${props => props.theme.main.background};
+  color: ${props => props.theme.main.foreground};
 `
 
 export const Overlay = styled.div`

src/components/ResourcesSidebar/index.tsx

@@ -4,6 +4,7 @@ import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
 import TriangleDown from "../../icons/triangle-down.svg"
 import Banner from "../../images/tph-banner.svg"
+import { ThemeToggler } from "../ThemeToggler"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
 import useBuildTree from "./useBuildTree"
@@ -93,23 +94,25 @@ function Folder({ item }: { item: IFolder }) {
   )
 }
 
-const FirstLevelFolder = memo(({ item, index }: { item: IFolder; index: number }) => {
-  const { current, setCurrent } = useSidebar()
-  const collapsed = current !== index
+const FirstLevelFolder = memo(
+  ({ item, index }: { item: IFolder; index: number }) => {
+    const { current, setCurrent } = useSidebar()
+    const collapsed = current !== index
 
-  return (
-    <SC.TreeWrapper className="firstLevel" collapsed={collapsed}>
-      <SC.FirstLabel
-        className={!collapsed ? "active" : undefined}
-        onClick={() => setCurrent(index)}
-      >
-        {item.title}
-        <SC.CollapseToggler />
-      </SC.FirstLabel>
-      <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
-    </SC.TreeWrapper>
-  )
-})
+    return (
+      <SC.TreeWrapper className="firstLevel" collapsed={collapsed}>
+        <SC.FirstLabel
+          className={!collapsed ? "active" : undefined}
+          onClick={() => setCurrent(index)}
+        >
+          {item.title}
+          <SC.CollapseToggler />
+        </SC.FirstLabel>
+        <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
+      </SC.TreeWrapper>
+    )
+  }
+)
 
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   return (
@@ -140,6 +143,8 @@ export function ResourcesSidebar(props: React.HTMLAttributes<HTMLDivElement>) {
             <MenuItem to="/resources">resources</MenuItem>
             <MenuItem to="/">tech</MenuItem>
           </SC.Menu>
+
+          <ThemeToggler />
         </SC.Inner>
       </Scrollbar>
     </SC.ResourcesSidebarWrapper>

src/components/ResourcesSidebar/styles.tsx

@@ -1,11 +1,13 @@
 import { Link } from "gatsby"
+import { transparentize } from "polished"
 import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
-  background: #f9f9f9;
+  background: ${props => props.theme.sidebar.background};
+  color: ${props => props.theme.sidebar.foreground};
   position: fixed;
   top: 0;
   bottom: 0;
@@ -60,11 +62,11 @@ export const FirstLabel = styled.div`
   box-sizing: border-box;
   padding: 12px 15px 12px 0;
   font-weight: 700;
-  color: #a9a9a9;
+  color: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
   cursor: pointer;
 
   &.active {
-    color: #000;
+    color: ${props => props.theme.sidebar.foreground};
   }
 
   svg {
@@ -73,7 +75,7 @@ export const FirstLabel = styled.div`
     transition: transform 0.3s;
 
     path {
-      fill: #a9a9a9;
+      fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
     }
   }
 
@@ -81,7 +83,7 @@ export const FirstLabel = styled.div`
     transform: rotate(0);
 
     path {
-      fill: #000;
+      fill: ${props => props.theme.sidebar.foreground};
     }
   }
 `
@@ -105,20 +107,20 @@ export const TreeWrapper = styled.div<{ collapsed: boolean }>`
 
   & > ${Label} svg {
     transform: rotate(${props => (props.collapsed ? -90 : 0)}deg);
+    fill: ${props => props.theme.sidebar.foreground};
   }
 `
 
 export const CollapseToggler = styled(ChevronUp)``
 
 export const Inner = styled.div`
-  padding-top: 30px;
-  padding-left: 20px;
+  padding: 30px 0 30px 20px;
 `
 
 export const PageLink = styled(Link)`
   display: block;
   padding: 4px 0;
-  color: #000;
+  color: ${props => props.theme.sidebar.foreground};
   text-decoration: none;
 
   & + & {
@@ -127,6 +129,7 @@ export const PageLink = styled(Link)`
 
   &.active {
     font-weight: 700;
+    color: ${props => props.theme.sidebar.active};
   }
 `
 
@@ -134,14 +137,14 @@ export const Menu = styled.nav`
   display: flex;
   flex-direction: column;
   border-top: 1px dashed #a5a5a5;
-  margin-top: 20px;
+  margin: 20px 0 40px;
   padding-top: 20px;
 `
 
 export const MenuItem = styled(Link)`
   padding: 4px 0;
   font-size: 20px;
-  color: #000;
+  color: ${props => props.theme.sidebar.foreground};
   text-decoration: none;
 
   &:hover,

src/components/ThemeToggler/index.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import useTheme from "../../hooks/useTheme"
+import * as SC from "./styles"
+
+export function ThemeToggler() {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <SC.ThemeTogglerWrapper onClick={toggleTheme}>
+      <SC.Link>Switch to {theme === "dark" ? "light" : "dark"} mode</SC.Link>
+    </SC.ThemeTogglerWrapper>
+  )
+}

src/components/ThemeToggler/styles.tsx

@@ -0,0 +1,15 @@
+import { transparentize } from "polished"
+import styled from "styled-components"
+
+export const ThemeTogglerWrapper = styled.div``
+
+export const Link = styled.span`
+  display: inline-block;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-bottom: 2px solid
+      ${props => transparentize(0.6, props.theme.sidebar.foreground)};
+  }
+`

src/design/themes.ts

@@ -0,0 +1,51 @@
+interface ISet {
+  background: string
+  foreground: string
+}
+
+export interface ITheme {
+  name: "dark" | "light"
+  sidebar: ISet & { active: string }
+  main: ISet & { link: string }
+  discord: {
+    base: string
+    darker: string
+  }
+}
+
+const baseColors = {
+  discord: {
+    base: "#7289DA",
+    darker: "#5265AD",
+  },
+}
+
+export const darkTheme: ITheme = {
+  ...baseColors,
+  name: "dark",
+  sidebar: {
+    background: "#293845",
+    foreground: "#FFFFFF",
+    active: "#00FCFF",
+  },
+  main: {
+    background: "#1F2A34",
+    foreground: "#FFFFFF",
+    link: "#04B0A6",
+  },
+}
+
+export const lightTheme: ITheme = {
+  ...baseColors,
+  name: "light",
+  sidebar: {
+    background: "#F9F9F9",
+    foreground: "#000000",
+    active: "#499DEF",
+  },
+  main: {
+    background: "#FFFFFF",
+    foreground: "#000000",
+    link: "#04B0A6",
+  },
+}

src/globalStyles.tsx

@@ -19,23 +19,4 @@ export const GlobalStyles = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
-  /* TODO: probably extract this */
-  .gatsby-highlight pre[class*="language-"].line-numbers {
-    padding-left: 2.8em;
-  }
-
-  .gatsby-highlight {
-    background-color: #fdf6e3;
-    border-radius: 0.3em;
-    margin: 0.5em 0;
-    padding: 1em;
-    overflow: auto;
-  }
-
-  .gatsby-highlight pre[class*="language-"].line-numbers {
-    padding: 0;
-    padding-left: 2.8em;
-    overflow: initial;
-  }
 `

src/hooks/useLocalStorage.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+
+export const useLocalStorage = (name: string, initialValue: string) => {
+  const windowGlobal = typeof window !== "undefined" && window
+  const [value, setValue] = useState(() => {
+    if (windowGlobal) {
+      const currentValue = windowGlobal.localStorage.getItem(name)
+      return currentValue ? JSON.parse(currentValue) : initialValue
+    }
+    return initialValue
+  })
+
+  useEffect(() => {
+    if (windowGlobal) {
+      windowGlobal.localStorage.setItem(name, JSON.stringify(value))
+    }
+  }, [name, value, windowGlobal])
+
+  return [value, setValue]
+}

src/hooks/useTheme.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react"
+import { IThemeContext, ThemeContext } from "../ThemeProvider"
+
+export default function useTheme(): IThemeContext {
+  const themeContext = useContext(ThemeContext)
+
+  if (!themeContext) {
+    throw Error("Need context")
+  }
+
+  return themeContext
+}

typings.d.ts

@@ -1,6 +1,13 @@
+import { ITheme } from "./src/design/themes"
+import "styled-components"
+
 declare module "*.svg"
 declare module "*.png"
 
 type ComponentQuery<T> = {
   readonly data: T
 }
+
+declare module "styled-components" {
+  export interface DefaultTheme extends ITheme {}
+}