feat: implement dark mode

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,