added dark mode toggle

boshyxd · Aug 19, 2024 · 37f9d87 · 37f9d87
1 parent c57e581
commit 37f9d87
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 34 deletions.
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import theme from './theme';
+import Navbar from './components/Navbar';
+
+function App() {
+  return (
+    <ChakraProvider theme={theme}>
+      <Navbar />
+      {/* Rest of your app */}
+    </ChakraProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/ColorModeToggle.js b/src/components/ColorModeToggle.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useColorMode, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { SunIcon, MoonIcon } from '@chakra-ui/icons';
+
+function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const iconColor = useColorModeValue('gray.600', 'white');
+
+  return (
+    <IconButton
+      icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+      onClick={toggleColorMode}
+      variant="ghost"
+      color={iconColor}
+      aria-label={`Toggle ${colorMode === 'light' ? 'Dark' : 'Light'} Mode`}
+    />
+  );
+}
+
+export default ColorModeToggle;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -3,14 +3,15 @@ import {
   Box, Flex, Button, Text, useColorModeValue, IconButton,
   Menu, MenuButton, MenuList, MenuItem, Avatar, useDisclosure,
   Drawer, DrawerBody, DrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton,
-  HStack, VStack, Container
+  HStack, VStack, Container, Spacer
 } from "@chakra-ui/react";
 import Link from 'next/link';
 import { HamburgerIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { useAuth } from '../hooks/useAuth';
 import { signOut } from 'firebase/auth';
 import { auth } from '../firebase/config';
 import { useRouter } from 'next/router';
+import ColorModeToggle from './ColorModeToggle';
 
 const Navbar = () => {
   const { user } = useAuth();
@@ -38,6 +39,7 @@ const Navbar = () => {
   const Logo = () => (
     <Link href="/" passHref>
       <Text
+        as="a"
         fontSize="2xl"
         fontWeight="bold"
         bgGradient="linear(to-r, green.400, green.600)"
@@ -55,7 +57,7 @@ const Navbar = () => {
   const NavItems = () => (
     <HStack spacing={4}>
       <Link href="/quiz" passHref>
-        <Button colorScheme="green" variant="ghost">
+        <Button as="a" colorScheme="green" variant="ghost">
           Start Quiz
         </Button>
       </Link>
@@ -77,20 +79,20 @@ const Navbar = () => {
           </MenuButton>
           <MenuList>
             <Link href="/profile" passHref>
-              <MenuItem>View Profile</MenuItem>
+              <MenuItem as="a">View Profile</MenuItem>
             </Link>
             <MenuItem onClick={handleLogout}>Logout</MenuItem>
           </MenuList>
         </Menu>
       ) : (
         <>
           <Link href="/login" passHref>
-            <Button colorScheme="green" variant="outline">
+            <Button as="a" colorScheme="green" variant="outline">
               Login
             </Button>
           </Link>
           <Link href="/register" passHref>
-            <Button colorScheme="green" variant="solid">
+            <Button as="a" colorScheme="green" variant="solid">
               Register
             </Button>
           </Link>
@@ -115,14 +117,18 @@ const Navbar = () => {
           <Logo />
           <HStack spacing={8} alignItems="center" display={{ base: 'none', md: 'flex' }}>
             <NavItems />
+            <ColorModeToggle />
           </HStack>
-          <IconButton
-            size="md"
-            icon={<HamburgerIcon />}
-            aria-label="Open Menu"
-            display={{ md: 'none' }}
-            onClick={onOpen}
-          />
+          <Flex alignItems="center" display={{ base: 'flex', md: 'none' }}>
+            <ColorModeToggle />
+            <IconButton
+              size="md"
+              icon={<HamburgerIcon />}
+              aria-label="Open Menu"
+              ml={2}
+              onClick={onOpen}
+            />
+          </Flex>
         </Flex>
       </Container>
 
@@ -142,4 +148,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,4 +1,4 @@
-import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
+import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import '../styles/globals.css'
@@ -17,21 +17,22 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <ChakraProvider theme={theme}>
-      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-      <AuthProvider>
-        <Head>
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-          <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet" />
-          <title>AestheticAxis</title>
-          <meta name="description" content="AestheticAxis - Find Your Style" />
-          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-          <link rel="icon" href={`${router.basePath}/images/favicon.ico`} />
-        </Head>
-        {mounted && <Component {...pageProps} />}
-      </AuthProvider>
+      <ColorModeProvider options={theme.config}>
+        <AuthProvider>
+          <Head>
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+            <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet" />
+            <title>AestheticAxis</title>
+            <meta name="description" content="AestheticAxis - Find Your Style" />
+            <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+            <link rel="icon" href={`${router.basePath}/images/favicon.ico`} />
+          </Head>
+          {mounted && <Component {...pageProps} />}
+        </AuthProvider>
+      </ColorModeProvider>
     </ChakraProvider>
   )
 }
 
-export default MyApp
+export default MyApp
diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -0,0 +1,20 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+import theme from '../theme'
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -31,7 +31,6 @@ const IconCloudDemo = () => (
 );
 
 export default function Home() {
-  const bgColor = useColorModeValue("green.700", "green.900");
   return (
     <>
       <Head>
@@ -46,7 +45,7 @@ export default function Home() {
         <Hero />
         <FeatureSection />
 
-        <Box minHeight="100vh" bg={bgColor} py={16}>
+        <Box minHeight="100vh" bg="green.700" py={16}>
           <Container maxW="6xl">
             <VStack spacing={8} align="center">
               <Heading
@@ -69,7 +68,7 @@ export default function Home() {
           </Container>
         </Box>
 
-        <Box as="section" py={20} bg={bgColor}>
+        <Box as="section" py={20} bg="green.700">
           <Container maxW="6xl" centerContent>
             <Box textAlign="center" mb={10}>
               <ChakraLink as={Link} href="/quiz" passHref>

diff --git a/src/theme.js b/src/theme.js
@@ -10,6 +10,10 @@ const theme = extendTheme({
       bg: "#1A202C",
       text: "#E2E8F0",
     },
+    light: {
+      bg: "#F7FAFC",
+      text: "#1A202C",
+    },
   },
   fonts: {
     heading: '"Josefin Sans", sans-serif',
@@ -18,11 +22,11 @@ const theme = extendTheme({
   styles: {
     global: (props) => ({
       body: {
-        bg: props.colorMode === "dark" ? "dark.bg" : "var(--bg-color)",
-        color: props.colorMode === "dark" ? "dark.text" : "var(--text-color)",
+        bg: "dark.bg",
+        color: "dark.text",
       },
     }),
   },
 });
 
-export default theme;
+export default theme;