feat(components): support for persistent theme

Dunqing · Sep 20, 2022 · c8a3c7a · c8a3c7a
1 parent 291463a
commit c8a3c7a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/components/src/Resume.tsx b/packages/components/src/Resume.tsx
@@ -18,6 +18,7 @@ import {
   task,
   toolbox,
 } from './plugins'
+import { RESUME_THEME_KEY } from './constants'
 
 export interface ResumeProps extends Omit<ReactMarkdownOptions, 'components'> {
   /**
@@ -44,13 +45,17 @@ export const Resume = (props: ResumeProps) => {
     templateContextProps,
   } = props
 
-  const [dark, setDark] = useState(false)
+  const [dark, setDark] = useState(localStorage.getItem(RESUME_THEME_KEY) === 'dark')
 
   const toggleTheme = () => {
-    props.onDarkClass?.('dark', !dark ? 'add' : 'remove')
-    setDark((d) => {
-      return !d
-    })
+    const nextDark = !dark
+    props.onDarkClass?.('dark', nextDark ? 'add' : 'remove')
+    if (nextDark) {
+      localStorage.setItem(RESUME_THEME_KEY, 'dark')
+    } else {
+      localStorage.setItem(RESUME_THEME_KEY, 'light')
+    }
+    setDark(nextDark)
   }
 
   const print = () => {

diff --git a/packages/components/src/constants.ts b/packages/components/src/constants.ts
@@ -0,0 +1 @@
+export const RESUME_THEME_KEY = 'RESUME_THEME'