Skip to content

Commit

Permalink
dark mode is missing Devmangrani#63 Devmangrani#70
Browse files Browse the repository at this point in the history
done changes
  • Loading branch information
its-Pratik-15 authored Oct 29, 2024
1 parent c123567 commit f839fbf
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions components/NavBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default function NavBar() {
const [openJobs, setOpenJobs] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [isNightMode, setNightMode] = useState(false);

const hamburgerRef = useRef(null);
const dropdownRef = useRef(null);
Expand Down Expand Up @@ -54,6 +55,10 @@ export default function NavBar() {
localStorage.removeItem("user");
router.reload();
};

const toggleNightMode = () => {
setNightMode((prevMode) => !prevMode);
};

const handleLogin = () => {
router.push("/auth/login");
Expand All @@ -64,6 +69,17 @@ export default function NavBar() {
};

return (
<>
<style>
{`
body {
transition: background-color 0.5s, color 0.5s;
background-color: ${isNightMode ? "black" : "white"};
color: ${isNightMode ? "white" : "black"};
}
`}
</style>

<div className={`${styles.navbar} ${scrolled ? styles.scrolled : ""}`}>
<div className={styles.logo}>
<Link href="/">
Expand Down Expand Up @@ -108,6 +124,9 @@ export default function NavBar() {
</button>
</div>
)}
<button onClick={toggleNightMode} className={styles.toggleNightMode}>
{isNightMode ? "Switch to Day Mode" : "Switch to Night Mode"}
</button>
</div>

<div
Expand Down

0 comments on commit f839fbf

Please sign in to comment.