Merge pull request #24 from Abhi0049k/feat/light-dark-mode

Feat: add dark and light mode for website

Author: KrimsonSquad

src/components/Navbar.jsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import logo from '@/assets/images/logo.png';
 import { Link, useNavigate } from 'react-router-dom';
 import courses from '@/data/courseData';
+import { useTheme } from '@/context/ThemeContext';
+
 
 function Navbar({ loggedin }) {
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
+  const { theme, toggleTheme } = useTheme();
   const navigate = useNavigate();
 
   const handleSearchChange = (event) => {
@@ -39,7 +42,7 @@ function Navbar({ loggedin }) {
   };
 
   return (
-    <nav className="navbar navbar-expand-lg sticky-top bg-body-tertiary">
+    <nav className={`navbar navbar-expand-lg sticky-top bg-body-tertiary navbar-${theme}`}>
       <div className="container-fluid">
         <button
           className="navbar-toggler"
@@ -111,9 +114,23 @@ function Navbar({ loggedin }) {
               </ul>
             </li>
           </ul>
-
+          <span className="me-3">
+            <button
+              className="btn clk rounded-circle"
+              onClick={toggleTheme}
+              data-bs-toggle="tooltip"
+              title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
+            >
+              {theme === 'light' ? (
+                <i className="fa-solid fa-moon"></i>
+              ) : (
+                <i className="fa-solid fa-sun"></i>
+              )}
+            </button>
+          </span>
           {loggedin === 'true' ? (
             <div className="d-flex align-items-center flex-column flex-lg-row">
+
               <div className="me-2 mb-2 mb-lg-0 position-relative">
                 <form className="input-group" onSubmit={handleSearchSubmit}>
                   <span className="input-group-text" id="basic-addon1">

src/context/ThemeContext.jsx

@@ -6,7 +6,9 @@ export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState('light');
 
   const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    document.body.setAttribute('data-bs-theme', newTheme);
   };
 
   return (

src/main.jsx

@@ -4,9 +4,12 @@ import App from './App.jsx';
 import './styles/index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import { ThemeProvider } from './context/ThemeContext.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 );

src/styles/index.css

@@ -7,3 +7,13 @@
   justify-content: center;
   align-items: center;
 }
+
+[data-bs-theme="dark"] {
+  --bs-body-color: #f8f9fa;
+  --bs-body-bg: #212529;
+}
+
+[data-bs-theme="light"] {
+  --bs-body-color: #212529;
+  --bs-body-bg: #f8f9fa;
+}