Add dark mode support

Author: VeckoTheGecko

src/components/ColorModeToggle.js

@@ -0,0 +1,20 @@
+import { IconButton, useColorMode } from '@chakra-ui/react'
+import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+
+export function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <IconButton
+      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+      onClick={toggleColorMode}
+      variant='ghost'
+      size='md'
+      position='fixed'
+      top={4}
+      right={4}
+      zIndex={1000}
+    />
+  )
+}

src/pages/_app.js

@@ -4,6 +4,7 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
+import { ColorModeToggle } from '@/components/ColorModeToggle'
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
@@ -41,6 +42,7 @@ function MyApp({ Component, pageProps }) {
         }}
       />
 
+      <ColorModeToggle />
       <Component {...pageProps} />
     </ChakraProvider>
   )

src/theme.js

@@ -4,6 +4,7 @@ import '@fontsource-variable/inter'
 
 // color mode config
 const config = {
+  // TODO: Change default color mode to system?
   initialColorMode: 'light',
   useSystemColorMode: false,
 }