Skip to content

Commit e894dc1

Browse files
daniel-jebarsondaniel-jebarson
committed
🌐 Feat : Theme can be changed anywhere
1 parent 1608e6e commit e894dc1

File tree

7 files changed

+74
-32
lines changed

7 files changed

+74
-32
lines changed

‎client/layout/ColorChange.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SunIcon, MoonIcon } from "@chakra-ui/icons";
2+
import { useColorModeValue, IconButton, useColorMode } from "@chakra-ui/react";
3+
export default function ColorChange({ children }) {
4+
const colorIcon = useColorModeValue(<MoonIcon />, <SunIcon />);
5+
const { colorMode, toggleColorMode } = useColorMode();
6+
return (
7+
<>
8+
<IconButton
9+
position={"fixed"}
10+
top={"1.5"}
11+
left={"1.5"}
12+
size="sm"
13+
isRound
14+
onClick={toggleColorMode}
15+
_focus={{ boxShadow: "none" }}
16+
icon={colorIcon}
17+
/>
18+
<main>{children}</main>
19+
</>
20+
);
21+
}

‎client/pages/_document.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Html, Head, Main, NextScript } from "next/document";
2+
import { ColorModeScript } from "@chakra-ui/react";
3+
import theme from "../theme";
24

35
export default function Document() {
46
return (
57
<Html>
68
<Head />
79
<body>
10+
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
811
<Main />
912
<NextScript />
1013
</body>

‎client/pages/chat.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,8 @@ function Chat() {
248248
});
249249

250250
const logOut = async () => {
251-
localStorage.clear();
251+
// localStorage.clear();
252+
localStorage.removeItem("userInfo");
252253
toast({
253254
title: "Logging out ...",
254255
description: "Logged out successfully!",

‎client/pages/index.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,18 @@ import {
1515
FormHelperText,
1616
InputRightElement,
1717
useToast,
18+
useColorModeValue,
1819
} from "@chakra-ui/react";
1920
import HeaderMeta from "../components/meta/HeaderMeta";
21+
import ColorChange from "../layout/ColorChange";
2022
import { useEffect } from "react";
2123
import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
2224
import Axios from "axios";
2325
import { NextSeo } from "next-seo";
2426
const Home = () => {
27+
const color = useColorModeValue("#000", "#fff");
28+
const bg = useColorModeValue("gray.200", "#2e2b2b");
29+
const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
2530
const [showPassword, setShowPassword] = useState(false);
2631
const [loading, setLoading] = useState(false);
2732
const [email, setEmail] = useState("");
@@ -69,7 +74,6 @@ const Home = () => {
6974
position: "bottom",
7075
});
7176
// console.log(data);
72-
7377
await sleep(3000);
7478
setLoading(false);
7579
window.location.href = "./chat";
@@ -88,15 +92,17 @@ const Home = () => {
8892
};
8993

9094
return (
91-
<>
95+
<ColorChange>
9296
<NextSeo
9397
title="WebChatApp - Login"
9498
description="Login in to the web chat app to start messaging to others"
9599
/>
96100
<Flex
101+
color={color}
102+
bgColor={bg}
103+
width={"full"}
97104
flexDirection="column"
98105
height="100vh"
99-
backgroundColor="gray.200"
100106
justifyContent="center"
101107
alignItems="center"
102108
>
@@ -110,7 +116,7 @@ const Home = () => {
110116
justifyContent="center"
111117
alignItems="center"
112118
pt={"10"}
113-
bgColor={"whiteAlpha.900"}
119+
bgColor={profileColor}
114120
>
115121
<Avatar bg="teal.500" />
116122
<Heading color="teal.400">Welcome</Heading>
@@ -120,7 +126,7 @@ const Home = () => {
120126
spacing={4}
121127
px="1rem"
122128
py={"2rem"}
123-
backgroundColor="whiteAlpha.900"
129+
bgColor={profileColor}
124130
boxShadow="md"
125131
>
126132
<FormControl>
@@ -161,7 +167,7 @@ const Home = () => {
161167
</InputRightElement>
162168
</InputGroup>
163169
<FormHelperText textAlign="right">
164-
<Link>forgot password?</Link>
170+
<Link color={"red.400"}>forgot password?</Link>
165171
</FormHelperText>
166172
</FormControl>
167173
<Button
@@ -185,7 +191,7 @@ const Home = () => {
185191
</Link>
186192
</Box>
187193
</Flex>
188-
</>
194+
</ColorChange>
189195
);
190196
};
191197

‎client/pages/otp.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import {
1414
FormHelperText,
1515
InputRightElement,
1616
useToast,
17+
useColorModeValue,
1718
} from "@chakra-ui/react";
19+
import ColorChange from "../layout/ColorChange";
1820
import { NextSeo } from "next-seo";
1921
import { FaRegUser } from "react-icons/fa";
2022
import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
@@ -24,11 +26,14 @@ import HeaderMeta from "../components/meta/HeaderMeta";
2426
import React, { useState, useEffect } from "react";
2527
const OTP = () => {
2628
const [userData, setUserData] = useState({});
29+
const color = useColorModeValue("#000", "#fff");
30+
const bg = useColorModeValue("gray.200", "#2e2b2b");
31+
const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
2732
const [timeLeft, setTimeLeft] = useState(0);
2833
const toast = useToast();
2934
useEffect(() => {
3035
let data = JSON.parse(localStorage.getItem("userInfo"));
31-
if (Object.keys(data).length == 0) {
36+
if (data == null || Object.keys(data).length == 0) {
3237
window.location.href = "./";
3338
} else if (data.verified) {
3439
window.location.href = "./chat";
@@ -44,7 +49,6 @@ const OTP = () => {
4449
while (time !== 0) {
4550
await sleep(1000);
4651
setTimeLeft(--time);
47-
// console.log(time);
4852
}
4953
};
5054

@@ -86,7 +90,7 @@ const OTP = () => {
8690
};
8791

8892
return (
89-
<>
93+
<ColorChange>
9094
{" "}
9195
<NextSeo
9296
description={"OTP to activate the account in Web Chat App"}
@@ -95,9 +99,11 @@ const OTP = () => {
9599
<Flex
96100
flexDirection="column"
97101
height="100vh"
98-
backgroundColor="gray.200"
99102
justifyContent="center"
100103
alignItems="center"
104+
color={color}
105+
bgColor={bg}
106+
width={"full"}
101107
>
102108
{/* <HeaderMeta
103109
content={"OTP to activate the account in Web Chat App"}
@@ -109,7 +115,7 @@ const OTP = () => {
109115
justifyContent="center"
110116
alignItems="center"
111117
pt={"10"}
112-
bgColor={"whiteAlpha.900"}
118+
bgColor={profileColor}
113119
>
114120
<Avatar bg="teal.500" />
115121
<Heading color="teal.400">Verify the link</Heading>
@@ -119,7 +125,7 @@ const OTP = () => {
119125
spacing={4}
120126
px="1rem"
121127
py={"2rem"}
122-
backgroundColor="whiteAlpha.900"
128+
bgColor={profileColor}
123129
boxShadow="md"
124130
>
125131
<FormControl>
@@ -168,7 +174,7 @@ const OTP = () => {
168174
</Link>
169175
</Box>
170176
</Flex>
171-
</>
177+
</ColorChange>
172178
);
173179
};
174180

‎client/pages/register.js

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,19 @@ import {
1515
InputRightElement,
1616
Icon,
1717
useToast,
18+
useColorModeValue,
1819
} from "@chakra-ui/react";
1920
import { FaRegUser } from "react-icons/fa";
2021
import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
2122
import HeaderMeta from "../components/meta/HeaderMeta";
2223
import { NextSeo } from "next-seo";
2324
import Axios from "axios";
2425
import { useEffect } from "react";
26+
import ColorChange from "../layout/ColorChange";
2527
const Register = () => {
28+
const color = useColorModeValue("#000", "#fff");
29+
const bg = useColorModeValue("gray.200", "#2e2b2b");
30+
const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
2631
const toast = useToast();
2732
const [pass, setPass] = useState("");
2833
const [cpass, setcPass] = useState("");
@@ -33,10 +38,6 @@ const Register = () => {
3338
const [loading, setLoading] = useState(false);
3439
const handleShowClick = () => setShowPassword(!showPassword);
3540
const handleShowCClick = () => setShowCPassword(!showCPassword);
36-
// const postDetails = (img) => {
37-
// setLoading(true);
38-
// // if(img===undefined)
39-
// };
4041

4142
useEffect(() => {
4243
let data = JSON.parse(localStorage.getItem("userInfo"));
@@ -99,16 +100,18 @@ const Register = () => {
99100
};
100101

101102
return (
102-
<>
103+
<ColorChange>
103104
{" "}
104105
<NextSeo
105106
description={"Register to create the account in Web Chat App"}
106107
title={"WebChatApp - Register"}
107108
/>
108109
<Flex
110+
color={color}
111+
bgColor={bg}
112+
width={"full"}
109113
flexDirection="column"
110114
height="100vh"
111-
backgroundColor="gray.200"
112115
justifyContent="center"
113116
alignItems="center"
114117
>
@@ -122,7 +125,7 @@ const Register = () => {
122125
justifyContent="center"
123126
alignItems="center"
124127
pt={"10"}
125-
bgColor={"whiteAlpha.900"}
128+
bgColor={profileColor}
126129
>
127130
<Avatar bg="teal.500" />
128131
<Heading color="teal.400">Welcome</Heading>
@@ -132,8 +135,8 @@ const Register = () => {
132135
spacing={4}
133136
px="1rem"
134137
py={"2rem"}
135-
backgroundColor="whiteAlpha.900"
136138
boxShadow="md"
139+
bgColor={profileColor}
137140
>
138141
<FormControl>
139142
<InputGroup>
@@ -211,14 +214,6 @@ const Register = () => {
211214
</InputRightElement>
212215
</InputGroup>
213216
</FormControl>
214-
{/* <FormControl>
215-
<Input
216-
type="file"
217-
p={1.5}
218-
accept="image/*"
219-
onChange={(e) => postDetails(e.target.files[0])}
220-
/>
221-
</FormControl> */}
222217

223218
<Button
224219
borderRadius={0}
@@ -241,7 +236,7 @@ const Register = () => {
241236
</Link>
242237
</Box>
243238
</Flex>
244-
</>
239+
</ColorChange>
245240
);
246241
};
247242

‎client/theme/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { extendTheme } from "@chakra-ui/react";
2+
3+
const config = {
4+
initialColorMode: "system",
5+
useSystemColorMode: false,
6+
};
7+
8+
const theme = extendTheme({ config });
9+
10+
export default theme;

0 commit comments

Comments
 (0)