Added Color Mode

iiitkottayam · Feb 27, 2022 · 3794b27 · 3794b27 · vercel · Feb 27, 2022
1 parent 65338d2
commit 3794b27
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 20 deletions.
diff --git a/internship-portal-frontend/pages/_document.js b/internship-portal-frontend/pages/_document.js
@@ -0,0 +1,19 @@
+import { ColorModeScript } from "@chakra-ui/react";
+import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import theme from "../theme";
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
diff --git a/internship-portal-frontend/pages/index.js b/internship-portal-frontend/pages/index.js
@@ -1,34 +1,45 @@
-import { Flex, Spinner, Text } from "@chakra-ui/react";
+import { Button, Flex, Spinner, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 
 export default function Home() {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const color = useColorModeValue('blue.500', 'cyan')
   return (
-    <Flex
-      justifyContent={"center"}
-      alignItems={"center"}
-      height={"100vh"}
-      direction={"column"}
-    >
+    <>
       <Head>
         <title>Internship Portal</title>
         <meta name="description" content="IIIT Kottayam Internship Portal" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Text fontSize={"xl"}>IIIT Kottayam's Inhouse</Text>
-      <Text
-        color={"cyan"}
-        fontSize="6xl"
-        fontWeight="extrabold"
-        fontFamily={"body"}
-      >
-        Internship Portal
-      </Text>
-      <Flex>
-        <Text fontSize={"xl"}>Coming Soon</Text>
-        <Spinner ml={5} mt={1}/>
+      <Flex direction={"column"}>
+        <Flex justifyContent={"flex-end"} m={10}>
+          <Button onClick={toggleColorMode}>
+            Toggle {colorMode === "light" ? "Dark" : "Light"} Mode
+          </Button>
+        </Flex>
+        <Flex
+          justifyContent={"center"}
+          alignItems={"center"}
+          direction={"column"}
+          height={"80vh"}
+        >
+          <Text fontSize={"xl"}>IIIT Kottayam's Inhouse</Text>
+          <Text
+            color={color}
+            fontSize="6xl"
+            fontWeight="extrabold"
+            fontFamily={"body"}
+          >
+            Internship Portal
+          </Text>
+          <Flex>
+            <Text fontSize={"xl"}>Coming Soon</Text>
+            <Spinner ml={5} mt={1} />
+          </Flex>
+        </Flex>
       </Flex>
-    </Flex>
+    </>
   );
 }
diff --git a/internship-portal-frontend/theme.js b/internship-portal-frontend/theme.js
@@ -0,0 +1,15 @@
+// theme.js
+
+// 1. import `extendTheme` function
+import { extendTheme } from '@chakra-ui/react'
+
+// 2. Add your color mode config
+const config = {
+  initialColorMode: 'dark',
+  useSystemColorMode: true,
+}
+
+// 3. extend the theme
+const theme = extendTheme({ config })
+
+export default theme