🌑 persist darkness (#349)

Co-authored-by: Brad Garropy <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "6.0.0",
+    "version": "6.1.0",
     "description": "🏠 my home on the web",
     "keywords": [
         "javascript",

public/theme.js

@@ -0,0 +1,9 @@
+const localTheme = window.localStorage.getItem("theme")
+
+if (localTheme === "light") {
+    document.documentElement.classList.remove("dark")
+}
+
+if (localTheme === "dark") {
+    document.documentElement.classList.add("dark")
+}

src/components/ColorTheme/ColorTheme.tsx

@@ -21,7 +21,8 @@ const ColorTheme: FC = () => {
             onClick={onClick}
             aria-label={label}
         >
-            {theme === "light" ? <Moon /> : <Sun />}
+            {theme === "light" ? <Moon /> : null}
+            {theme === "dark" ? <Sun /> : null}
         </button>
     )
 }

src/context/App.tsx

@@ -10,7 +10,7 @@ type AppProviderProps = {
 
 const AppProvider: FC<AppProviderProps> = ({children}) => {
     const [open, setOpen] = useState(false)
-    const [theme, setTheme] = useTheme()
+    const {theme, setTheme} = useTheme()
 
     const context = {
         open,

src/hooks/useTheme/useTheme.test.ts

@@ -1,42 +1,80 @@
 import {act, renderHook} from "@testing-library/react"
 import {useTheme} from "hooks"
 
-test("returns default theme", () => {
+const mockGetItem = jest.fn()
+const mockSetItem = jest.fn()
+
+beforeEach(() => {
+    global.Storage.prototype.getItem = mockGetItem
+    global.Storage.prototype.setItem = mockSetItem
+})
+
+afterEach(() => {
+    mockGetItem.mockReset()
+    mockGetItem.mockReset()
+})
+
+test("defaults to light theme", () => {
+    mockGetItem.mockReturnValue(null)
+
     const {result} = renderHook(() => useTheme())
-    const [theme] = result.current
-    expect(theme).toEqual("light")
+
+    expect(result.current.theme).toEqual("light")
+    expect(mockSetItem).toHaveBeenCalledTimes(1)
+    expect(mockSetItem).toHaveBeenCalledWith("theme", "light")
+    expect(document.documentElement.classList.contains("dark")).toBeFalsy()
 })
 
-test("returns light theme", () => {
-    const {result} = renderHook(() => useTheme("light"))
-    const [theme] = result.current
-    expect(theme).toEqual("light")
+test("uses localstorage light theme", () => {
+    mockGetItem.mockReturnValue("light")
+
+    const {result} = renderHook(() => useTheme())
+
+    expect(result.current.theme).toEqual("light")
+    expect(mockSetItem).toHaveBeenCalledTimes(1)
+    expect(mockSetItem).toHaveBeenCalledWith("theme", "light")
+    expect(document.documentElement.classList.contains("dark")).toBeFalsy()
 })
 
-test("returns dark theme", () => {
-    const {result} = renderHook(() => useTheme("dark"))
-    const [theme] = result.current
-    expect(theme).toEqual("dark")
+test("uses localstorage dark theme", () => {
+    mockGetItem.mockReturnValue("dark")
+
+    const {result} = renderHook(() => useTheme())
+
+    expect(result.current.theme).toEqual("dark")
+    expect(mockSetItem).toHaveBeenCalledTimes(1)
+    expect(mockSetItem).toHaveBeenCalledWith("theme", "dark")
+    expect(document.documentElement.classList.contains("dark")).toBeTruthy()
 })
 
-test("sets dark theme", () => {
-    const {result} = renderHook(() => useTheme("light"))
-    expect(result.current[0]).toEqual("light")
+test("switches to light theme", () => {
+    mockGetItem.mockReturnValue("dark")
+
+    const {result} = renderHook(() => useTheme())
+    expect(result.current.theme).toEqual("dark")
 
     act(() => {
-        result.current[1]("dark")
+        result.current.setTheme("light")
     })
 
-    expect(result.current[0]).toEqual("dark")
+    expect(result.current.theme).toEqual("light")
+    expect(mockSetItem).toHaveBeenCalledTimes(2)
+    expect(mockSetItem).toHaveBeenLastCalledWith("theme", "light")
+    expect(document.documentElement.classList.contains("dark")).toBeFalsy()
 })
 
-test("sets light theme", () => {
-    const {result} = renderHook(() => useTheme("dark"))
-    expect(result.current[0]).toEqual("dark")
+test("switches to dark theme", () => {
+    mockGetItem.mockReturnValue("light")
+
+    const {result} = renderHook(() => useTheme())
+    expect(result.current.theme).toEqual("light")
 
     act(() => {
-        result.current[1]("light")
+        result.current.setTheme("dark")
     })
 
-    expect(result.current[0]).toEqual("light")
+    expect(result.current.theme).toEqual("dark")
+    expect(mockSetItem).toHaveBeenCalledTimes(2)
+    expect(mockSetItem).toHaveBeenLastCalledWith("theme", "dark")
+    expect(document.documentElement.classList.contains("dark")).toBeTruthy()
 })

src/hooks/useTheme/useTheme.ts

@@ -1,27 +1,33 @@
-import {Dispatch, SetStateAction, useEffect, useRef, useState} from "react"
+import {Dispatch, SetStateAction, useEffect, useState} from "react"
 
 type Theme = "light" | "dark"
 
-const useTheme = (
-    defaultTheme: Theme = "light",
-): [Theme, Dispatch<SetStateAction<Theme>>] => {
-    const initialRender = useRef(true)
-    const [theme, setTheme] = useState<Theme>(defaultTheme)
+const useTheme = (): {
+    theme: Theme
+    setTheme: Dispatch<SetStateAction<Theme>>
+} => {
+    const [theme, setTheme] = useState<Theme>()
 
     useEffect(() => {
-        if (initialRender.current) {
-            initialRender.current = false
+        const localTheme = window.localStorage.getItem("theme") as Theme
+        setTheme(localTheme ?? "light")
+    }, [])
+
+    useEffect(() => {
+        if (!theme) {
             return
         }
 
         if (theme === "dark") {
+            window.localStorage.setItem("theme", "dark")
             document.documentElement.classList.add("dark")
         } else {
+            window.localStorage.setItem("theme", "light")
             document.documentElement.classList.remove("dark")
         }
     }, [theme])
 
-    return [theme, setTheme]
+    return {theme, setTheme}
 }
 
 export default useTheme

src/pages/_document.tsx

@@ -5,6 +5,7 @@ import Document, {
     Main,
     NextScript,
 } from "next/document"
+import Script from "next/script"
 
 class MyDocument extends Document {
     static async getInitialProps(ctx: DocumentContext) {
@@ -35,6 +36,7 @@ class MyDocument extends Document {
                 <body className="bg-white transition duration-300 dark:bg-black">
                     <Main />
                     <NextScript />
+                    <Script src="/theme.js" strategy="beforeInteractive" />
                 </body>
             </Html>
         )