update initial value of dark mode preference

Author: Roshan Jossy

src/components/navbar/Navbar.tsx

@@ -1,7 +1,10 @@
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import React from 'react'
 import Button from '../Button'
-import ThemeButton from './ThemeButton'
+const ThemeButton = dynamic(() => import('./ThemeButton'), {
+  ssr: false,
+})
 
 export default function Navbar() {
   const router = useRouter()
@@ -16,9 +19,7 @@ export default function Navbar() {
           <ThemeButton />
           {pathname !== '/story' && (
             <Button>
-              <a href="/story">
-                <a>Create Post </a>
-              </a>
+              <a href="/story">Create Post</a>
             </Button>
           )}
         </div>

src/components/navbar/ThemeButton.tsx

@@ -2,17 +2,19 @@ import { useEffect, useState } from 'react'
 import Button from '../Button'
 
 export default function ThemeButton() {
-  const [darkMode, setDarkMode] = useState<boolean | undefined>(undefined)
-  useEffect(() => {
-    setDarkMode(document.documentElement.classList.contains('dark'))
-  }, [])
+  const darkModePreference =
+    localStorage.theme === 'dark' ||
+    (!('theme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const [darkMode, setDarkMode] = useState(darkModePreference)
+  darkModePreference && window.document.documentElement.classList.add('dark')
   useEffect(() => {
     if (darkMode) {
       window.document.documentElement.classList.add('dark')
-      localStorage.setItem('vidyaDarkMode', 'true')
+      localStorage.setItem('preferenceDarkMode', 'true')
     } else {
       window.document.documentElement.classList.remove('dark')
-      localStorage.setItem('vidyaDarkMode', 'false')
+      localStorage.setItem('preferenceDarkMode', 'false')
     }
   }, [darkMode])
   const onClick = () => {