fix a few issues with dark mode

components/footer.js

@@ -11,6 +11,7 @@ import useDarkMode from 'use-dark-mode'
 import Sun from '../svgs/sun-fill.svg'
 import Moon from '../svgs/moon-fill.svg'
 import { handleThemeChange } from '../public/darkmode'
+import { useEffect, useState } from 'react'
 
 const ChatPopover = (
   <Popover>
@@ -46,16 +47,23 @@ export default function Footer ({ noLinks }) {
     onChange: handleThemeChange
   })
 
+  const [mounted, setMounted] = useState()
+
+  useEffect(() => {
+    setMounted(true)
+  })
+
   return (
     <footer>
       <Container className='mb-3 mt-4'>
         {!noLinks &&
           <div className='mb-2' style={{ fontWeight: 500, opacity: 0.5 }}>
-            <div className='mb-2'>
+            {mounted &&
-              {darkMode.value
+              <div className='mb-2'>
-                ? <Sun onClick={() => darkMode.toggle()} className='theme' />
+                {darkMode.value
-                : <Moon onClick={() => darkMode.toggle()} className='theme' />}
+                  ? <Sun onClick={() => darkMode.toggle()} className='theme' />
-            </div>
+                  : <Moon onClick={() => darkMode.toggle()} className='theme' />}
+              </div>}
             <Link href='/faq' passHref>
               <a className='text-reset d-inline-flex'>
                 faq

public/darkmode.js

@@ -10,7 +10,7 @@ export const COLORS = {
     navLinkActive: 'rgba(0, 0, 0, 0.9)',
     borderColor: '#ced4da',
     inputBg: '#ffffff',
-    dropdownItemColor: 'inherit',
+    dropdownItemColor: 'rgba(0, 0, 0, 0.7)',
     dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
     commentBg: 'rgba(0, 0, 0, 0.03)',
     clickToContextColor: 'rgba(0, 0, 0, 0.05)',