Toggletheme added

src/components/Sidebar/SideBar.jsx

@@ -6,6 +6,9 @@ import './sidebar.css';
 
 import { FaBars } from 'react-icons/fa';
 import { BiSearch } from 'react-icons/bi';
+import { FiSun, FiMoon } from 'react-icons/fi';
+
+
 
 const inputAnimation = {
   hidden: {
@@ -44,6 +47,16 @@ const SideBar = ({ routes, children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
 
+  const [theme, setTheme] = useState('light'); //Add state to manage the current theme
+
+const ThemeToggleIcon = ({ theme }) => {
+  return theme === 'light' ? <FiMoon /> : <FiSun />;
+};
+const toggleTheme = () => {
+  // Create a function to toggle the theme
+  setTheme(theme === 'light' ? 'dark' : 'light');
+};
+
   useEffect(() => {
     const currentCategory = getCurrentCategory();
     const scrollbarColor = getScrollbarColor(currentCategory);
@@ -93,17 +106,19 @@ const SideBar = ({ routes, children }) => {
   };
 
   const toggle = () => setIsOpen(!isOpen);
+
+
 
   return (
     <>
-      <div className='main-container'>
+      <div className={`main-container ${theme}`}>
         <motion.div
           animate={{
             width: isOpen ? '200px' : '75px',
             position: 'fixed',
             transition: { duration: 0.5, type: 'spring', damping: 10 },
           }}
-          className={`sidebar`}
+          className={`sidebar ${theme}`} //  Apply theme class to sidebar
         >
           <div className='top_section d-lg-flex align-items-center justify-content-center'>
             <AnimatePresence>
@@ -120,14 +135,14 @@ const SideBar = ({ routes, children }) => {
           </div>
 
           <div className='search'>
-            <div className='search_icon circle'>
+            <div className={`search-icon circle ${theme}`}>
               <BiSearch />
             </div>
             <AnimatePresence>
               {isOpen && <motion.input initial='hidden' animate='show' exit='hidden' variants={inputAnimation} type='text' placeholder='Search' />}
             </AnimatePresence>
           </div>
-
+          
           <section className='routes'>
             {routes.map((route, index) => {
               if (route.subRoutes) {
@@ -140,12 +155,15 @@ const SideBar = ({ routes, children }) => {
                     setIsOpen={setIsOpen}
                     routes={routes} // Pass the routes prop here
                   />
+
                 );
               }
+
 
               return (
+
                 <NavLink to={route.path} key={index} className='link' activeClassName='active'>
-                  <div className='circle'>
+                  <div className={`circle ${theme}`}>
                     <div className='icon'>{route.icon}</div>
                   </div>
                   <AnimatePresence>
@@ -159,6 +177,11 @@ const SideBar = ({ routes, children }) => {
               );
             })}
           </section>
+          <div className='theme' onClick={toggleTheme}> {/*  Handle theme toggle action */}
+            <div className='bars flex-grow d-flex align-items-stretch align-self-center'>
+              {theme === 'light' ? <FiMoon /> : <FiSun />} {/* Conditional rendering based on theme */}
+            </div>
+          </div>
         </motion.div>
 
         <main style={{ marginLeft: 'auto', transition: 'all 0.3s' }}>{children}</main>

src/components/Sidebar/sidebar.css

@@ -4,15 +4,62 @@
     box-sizing: border-box;
 }
 
+:root {
+  --sidebar-bg-light: #afacac;
+  --sidebar-bg-dark: #251d45;
+  --sidebar-color-light: #000000;
+  --sidebar-color-dark: #fffffff5;
+  --active-bg: #0f1015;
+  --link-color-light: #6c7293;
+  --link-color-dark: #bba8bff5;
+  --main-container-bg-light: #c7c6d0;
+  --main-container-bg-dark: #0c003a;
+  --main-container-color-light: #000000;
+  --main-container-color-dark: #ffffff;
+  --circle-bg-light:#d9e5f1;
+  --circle-bg-dark:#000000;
+
+
+}
+
+.sidebar {
+  background: var(--sidebar-bg-light);
+  color: var(--sidebar-color-light);
+}
+
+.sidebar.dark {
+  background: var(--sidebar-bg-dark);
+  color: var(--sidebar-color-dark);
+}
+
+.main-container {
+    background: var(--main-container-bg-light);
+    color: var(--main-container-color-light);
+
+
+  }
+.main-container.dark {
+  background: var(--main-container-bg-dark);
+  color: var(--main-container-color-dark);
+}
+.circle{
+    background: var(--circle-bg-light);
+}
+.circle.dark{
+    background: var(--circle-bg-dark);
+}
+
+/* end */
+
 .main-container {
     display: flex;
-    background-color: black;
-    color: white;
+    /* background-color: rgb(158, 0, 0); */
+    /* color: white; */
 }
 
 .sidebar {
-    background: #12151e;
-    color: #6c7293;
+    /* background: #12151e; */
+    /* color: #9c7358; */
     height: 100%;
     overflow-y: auto;
 }
@@ -46,6 +93,13 @@
     height: 30px;
     padding: 10px;
 }
+.theme{
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+    height: 30px;
+    padding: 20px;
+}
 
 .search input {
     border: none;
@@ -119,7 +173,7 @@
 .icon {
     font-size: 1.2rem;
     line-height: 1.2;
-    color: #bba8bff5;
+    color: #7a0a91f5;
 }
 
 .icon::before {
@@ -130,7 +184,7 @@
     width: 30px;
     height: 30px;
     border-radius: 100%;
-    background-color: #6c729333;
+    /* background-color: #77e1ad33; */
     text-align: center;
     margin-left: 10px;
 }

src/index.css

@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #000000;
+  /* background-color: #000000; */
   /* 6c7293 - light blackish */
   /* 0f1015 - fade black color */
 
@@ -15,12 +15,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root {
+  --body-bg-light: #0c0000;
+  --body-bg-dark: #000000;
+}
+body{
+  background-color: var(--body-bg-light);
+}
+body.dark{
+  background-color: var(--body-bg-dark);
+}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #000000;
+  /* background-color: #000000; */
   color: white;
 }