Skip to content

Commit b929b40

Browse files
Ecell23Ecell23
authored
Merge pull request #260 from Sristi2004-developer/Darkmode-toggler
Darkmode toggler
2 parents a8da7c8 + 2bd38a4 commit b929b40

File tree

10 files changed

+349
-190
lines changed

10 files changed

+349
-190
lines changed

‎src/App.jsx

Lines changed: 192 additions & 184 deletions
Large diffs are not rendered by default.

‎src/components/Admin/BlogCard/BlogCard.module.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
.blogCard {
42
* {
53
overflow: auto;

‎src/components/ConnectionDropBanner/ConnectionDropBanner.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const ConnectionDropBanner = () => {
3131
!isConnected
3232
? styles.offlinebanner
3333
: showOnlineBanner
34-
? styles.onlinebanner
35-
: styles.hide
34+
? styles.onlinebanner
35+
: styles.hide
3636
}
3737
>
3838
{!isConnected && <p>You are offline. Please check your internet connection.</p>}

‎src/components/GalleryPage/GalleryCard/GalleryCard.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
width: 25vw;
33
height: 16rem;
44
overflow: hidden;
5-
box-shadow: 4px 4px 12px var(--box-shadow-color-black-1),
5+
box-shadow:
6+
4px 4px 12px var(--box-shadow-color-black-1),
67
-4px -4px 12px var(--box-shadow-color-black-2);
78
border-radius: 8px;
89
margin: 2.5vw;

‎src/components/shared/Navbar/Navbar.jsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,18 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
66
import "./Navbar.css";
77
import axios from "axios";
88
import UserContext from "../../../context/UserContext";
9+
import { ThemeContext } from "../../../context/ThemeContext";
10+
import ThemeToggleButton from "../ThemeToggleButton/ThemeToggleButton";
11+
12+
// import { FaMoon } from "react-icons/fa";
13+
// import { IoSunny } from "react-icons/io5";
14+
915
const Navbar = () => {
1016
const navigate = useNavigate();
1117
const [toggle, setToggle] = useState(false);
18+
const { isDarkMode, toggleTheme, setIsDarkMode, setCurrentMode } =
19+
useContext(ThemeContext);
20+
// const storedTheme = localStorage.getItem("isDarkMode");
1221

1322
const handleToggle = () => {
1423
setToggle(!toggle);
@@ -61,7 +70,7 @@ const Navbar = () => {
6170

6271
return (
6372
<nav
64-
className={toggle ? "navbar1 expanded" : "navbar1"}
73+
className={`navbar1 ${toggle ? "expanded" : ""} ${isDarkMode ? "dark-theme" : ""}`}
6574
id={bgChng ? "bgchng" : ""}
6675
style={{ userSelect: "none" }}
6776
>
@@ -116,6 +125,8 @@ const Navbar = () => {
116125
<NavLink to="/signup">SIGN UP</NavLink>
117126
</li>
118127
)}
128+
129+
<ThemeToggleButton />
119130
</ul>
120131
</nav>
121132
);

‎src/components/shared/Navbar/NavbarTeam.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
88
import axios from "axios";
99
import { useContext } from "react";
1010
import UserContext from "../../../context/UserContext";
11+
import ThemeToggleButton from "../ThemeToggleButton/ThemeToggleButton";
1112

1213
const NavbarTeam = () => {
1314
const [toggle, setToggle] = useState(false);
@@ -111,6 +112,7 @@ const NavbarTeam = () => {
111112
<NavLink to="/signup">SIGN UP</NavLink>
112113
</li>
113114
)}
115+
<ThemeToggleButton />
114116
</ul>
115117
</nav>
116118
);

‎src/components/shared/ThemeToggleButton/ThemeToggleButton.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useContext } from "react";
2+
import { FaMoon } from "react-icons/fa";
3+
import { IoSunny } from "react-icons/io5";
4+
import { ThemeContext } from "../../../context/ThemeContext";
5+
6+
const ThemeToggleButton = () => {
7+
const { isDarkMode, toggleTheme } = useContext(ThemeContext);
8+
9+
return (
10+
// <button onClick={toggleTheme} style={{ border: 'none', backgroundColor: 'transparent' }}>
11+
// <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
12+
// {isDarkMode ? (
13+
// <IoSunny size={isDarkMode ? 20 : 18} style={{ color: 'white' }} />
14+
// ) : (
15+
// <FaMoon size={isDarkMode ? 18 : 20} style={{ color: 'black' }} />
16+
// )}
17+
// </div>
18+
// </button>
19+
<button
20+
onClick={toggleTheme}
21+
style={{
22+
border: "none",
23+
backgroundColor: "transparent",
24+
marginBottom: "15px",
25+
}}
26+
>
27+
<div
28+
style={{
29+
width: "30px",
30+
height: "30px",
31+
display: "flex",
32+
justifyContent: "center",
33+
alignItems: "center",
34+
}}
35+
>
36+
{isDarkMode ? (
37+
<IoSunny size={isDarkMode ? 20 : 18} style={{ color: "white" }} />
38+
) : (
39+
<FaMoon size={isDarkMode ? 18 : 20} style={{ color: "black" }} />
40+
)}
41+
</div>
42+
</button>
43+
);
44+
};
45+
46+
export default ThemeToggleButton;

‎src/context/ThemeContext.jsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { useRef } from "react";
2+
import { createContext, useState, useEffect } from "react";
3+
4+
const ThemeContext = createContext({
5+
isDarkMode: false,
6+
toggleTheme: () => {},
7+
});
8+
9+
function ThemeContextProvider({ children }) {
10+
let currentMode = localStorage.getItem("isDarkMode");
11+
12+
console.log(typeof currentMode);
13+
14+
// useEffect(() => {
15+
16+
// currentMode = localStorage.getItem("isDarkMode");
17+
18+
// if (currentMode == null) {
19+
// currentMode = "false";
20+
// localStorage.setItem("isDarkMode", "false");
21+
// } else {
22+
// if (currentMode == "false") {
23+
// document.body.classList.remove("dark-theme");
24+
// localStorage.setItem("isDarkMode", "false");
25+
// } else {
26+
// document.body.classList.add("dark-theme");
27+
// localStorage.setItem("isDarkMode", "true");
28+
// }
29+
// }
30+
31+
// },[])
32+
// }
33+
// if (currentMode == null) {
34+
// currentMode = "false";
35+
// localStorage.setItem("isDarkMode", "false");
36+
// } else {
37+
// if (currentMode == "false") {
38+
// document.body.classList.remove("dark-theme");
39+
// localStorage.setItem("isDarkMode", "false");
40+
// } else {
41+
// document.body.classList.add("dark-theme");
42+
// localStorage.setItem("isDarkMode", "true");
43+
// }
44+
// }
45+
46+
const [isDarkMode, setIsDarkMode] = useState(currentMode != "false");
47+
if (isDarkMode) {
48+
localStorage.setItem("isDarkMode", "true");
49+
} else {
50+
localStorage.setItem("isDarkMode", "false");
51+
}
52+
53+
useEffect(() => {
54+
const currentMode = localStorage.getItem("isDarkMode");
55+
56+
if (currentMode !== null) {
57+
setIsDarkMode(currentMode === "true");
58+
}
59+
60+
if (isDarkMode) {
61+
document.body.classList.add("dark-theme");
62+
} else {
63+
document.body.classList.remove("dark-theme");
64+
}
65+
}, [isDarkMode]);
66+
// const [isDarkMode, setIsDarkMode] = useState(currentMode != "false");
67+
// if (isDarkMode) {
68+
// localStorage.setItem("isDarkMode", "true");
69+
// } else {
70+
// localStorage.setItem("isDarkMode", "false");
71+
// }
72+
const toggleTheme = () => {
73+
setIsDarkMode(!isDarkMode);
74+
if (currentMode == "false") {
75+
document.body.classList.remove("dark-theme");
76+
} else {
77+
document.body.classList.add("dark-theme");
78+
}
79+
};
80+
return (
81+
<ThemeContext.Provider value={{ isDarkMode, toggleTheme, setIsDarkMode }}>
82+
{children}
83+
</ThemeContext.Provider>
84+
);
85+
}
86+
87+
export { ThemeContext, ThemeContextProvider };

‎src/pages/Events/Events.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
66
import { Carousel } from "react-responsive-carousel";
77
// import UpcomingEvents from '../../components/EventsPage/UpcomingEvents';
88
import PastEvents from "../../components/EventsPage/PastEvents";
9+
import { ThemeContext } from "../../context/ThemeContext";
10+
import { useContext } from "react";
911
const Events = () => {
12+
const { isDarkMode, setIsDarkMode } = useContext(ThemeContext);
1013
useEffect(() => {
1114
document.title = "Events | E-Cell NIT Silchar";
1215
}, []);

‎src/pages/Home/Home.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import Footer from "../../components/shared/Footer/Footer";
1010
import Footerconstant from "../../components/shared/FooterConstant/Footerconstant";
1111
import Contactus from "../../components/Home/Contact/Contactus";
1212
import ScrollToSection from "../../components/shared/ScrollToSection/Scroll";
13+
import { ThemeContext } from "../../context/ThemeContext";
14+
import { useContext } from "react";
1315
const Home = () => {
16+
const { isDarkMode, setIsDarkMode } = useContext(ThemeContext);
1417
useEffect(() => {
1518
document.title = "E-Cell | NIT Silchar";
1619
}, []);

0 commit comments

Comments
 (0)