feat: implement dark mode

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/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/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
+}