fix(uiux): 🐛 fix UI theme switching

vanntile · Oct 13, 2021 · 37fec49 · 37fec49
1 parent 44f45f3
commit 37fec49
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "next": "^11.1.0",
     "next-mdx-remote": "^3.0.4",
     "next-secure-headers": "^2.2.0",
-    "next-themes": "^0.0.14",
+    "next-themes": "^0.0.15",
     "nprogress": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -18,7 +18,7 @@ Router.events.on('routeChangeComplete', () => done())
 Router.events.on('routeChangeError', () => done())
 
 const App: NextPage<Props> = ({ Component, pageProps }) => (
-  <ThemeProvider attribute="class" defaultTheme="dark">
+  <ThemeProvider attribute="class" forcedTheme={(Component as unknown as { theme: string }).theme || undefined}>
     <MDXProvider components={MDXComponents}>
       <Component {...pageProps} />
     </MDXProvider>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -47,7 +47,7 @@ const externals: ExternalSVG[] = [
   },
 ]
 
-const IndexPage: NextPage<Props> = ({ blogPosts }) => {
+const IndexPage: NextPage<Props> & { theme: string } = ({ blogPosts }) => {
   const techSectionRef = useRef(null)
   const ExperienceTabsRef = useRef(null)
   const logomarkInt = useIntersection(techSectionRef, { root: null, rootMargin: '0px', threshold: 0.4 })
@@ -246,4 +246,5 @@ export const getStaticProps: GetStaticProps<Props> = async () => ({
   props: { blogPosts: await getSortedPostsData('posts') },
 })
 
+IndexPage.theme = 'dark'
 export default IndexPage