added dark mode for reference

www/reference/src/components/side-bar/index.js

@@ -2,11 +2,13 @@ import { Box, Flex, Image } from "theme-ui"
 import React, { useEffect, useState } from "react"
 
 import Logo from "../../assets/logo.svg"
+import LogoDark from "../../assets/logo-dark.svg"
 import LogoMuted from "../../assets/logo-muted.svg"
 import SideBarItem from "./sidebar-item"
 import SideBarSelector from "./sidebar-selector"
 import { navigate } from "gatsby"
 import styled from "@emotion/styled"
+import { useColorMode } from 'theme-ui'
 
 const SideBarContainer = styled(Flex)`
   @media screen and (max-width: 848px) {
@@ -26,6 +28,7 @@ const SideBarFade = styled(Box)`
 
 const Sidebar = ({ data, api }) => {
   const [scrollPos, setScrollPos] = useState(0)
+  const [colorMode, setColorMode] = useColorMode()
 
   useEffect(() => {
     const nav = document.querySelector("#nav")
@@ -47,24 +50,25 @@ const Sidebar = ({ data, api }) => {
         top: "0",
         bottom: "0",
         height: "100vh",
-        backgroundColor: "light",
+        backgroundColor: "var(--theme-ui-colors-background)",
         boxShadow: "sidebarShadow",
         minWidth: "var(--side-bar-width)",
         flexDirection: "column",
       }}
+      className="sidebar-container"
     >
       <Flex
         sx={{
           px: "4",
           pt: "3",
-          background: "light",
+          background: "var(--theme-ui-colors-background)",
           width: "calc(var(--side-bar-width) - 1px)",
           flexDirection: "column",
         }}
       >
         <Flex>
           <Image
-            src={Logo}
+            src={colorMode == 'light' ? Logo : LogoDark}
             alt="Medusa logo"
             onClick={() => navigate("/")}
             sx={{
@@ -96,7 +100,7 @@ const Sidebar = ({ data, api }) => {
           return <SideBarItem item={s} key={i} />
         })}
       </Flex>
-      <Flex sx={{ py: 4, px: 4, borderTop: "1px solid #efefef" }}>
+      <Flex sx={{ py: 4, px: 4, borderTop: "1px solid var(--theme-ui-colors-separator)" }}>
         <Image src={LogoMuted} alt="Medusa Type" sx={{ height: "10px" }} />
       </Flex>
     </SideBarContainer>

www/reference/src/components/side-bar/sidebar-item.js

@@ -81,8 +81,12 @@ const SideBarItem = ({ item }) => {
               height: "25px",
               justifyContent: "space-between",
               "&:hover, &.active": {
-                backgroundColor: "faded",
+                backgroundColor: "primary",
+                color: "light"
               },
+              "&:hover svg, &.active svg": {
+                color: "light"
+              }
             }}
             className={
               currentSection === convertToKebabCase(section.section_name)
@@ -90,7 +94,7 @@ const SideBarItem = ({ item }) => {
                 : null
             }
           >
-            {section.section_name} <ChevronDown />
+            {section.section_name} <ChevronDown fill={"light"} />
           </Flex>
         }
         open={isOpen}
@@ -114,13 +118,15 @@ const SideBarItem = ({ item }) => {
                 cursor: "pointer",
                 mb: "8px",
                 textDecoration: "none",
-                color: "black",
+                color: "text",
                 height: "25px",
                 "&:hover": {
-                  backgroundColor: "faded",
+                  backgroundColor: "primary",
+                  color: "light"
                 },
                 "&.active": {
-                  backgroundColor: "faded",
+                  backgroundColor: "primary",
+                  color: "light"
                 },
               }}
             >

www/reference/src/components/side-bar/sidebar-selector.js

@@ -1,8 +1,9 @@
-import React, { useContext } from "react"
 import { Flex, Select } from "theme-ui"
-import { navigate } from "gatsby-link"
-import NavigationContext from "../../context/navigation-context"
+import React, { useContext } from "react"
+
 import ChevronDown from "../icons/chevron-down"
+import NavigationContext from "../../context/navigation-context"
+import { navigate } from "gatsby-link"
 
 const SideBarSelector = ({ api }) => {
   const { reset } = useContext(NavigationContext)