Merge pull request #57 from Komal73/fix-issue-#26-komal

Fix: #26 (Add Light/Dark Mode)

src/Components/CustomComp/InputBox/InputBox.css

@@ -7,7 +7,9 @@
 }
 
 .input-box-title {
-    color: white;
+    /*    color: white;
+*/
+color: var(--text_color);
     font-size: 20px;
 }
 

src/Components/CustomComp/InputBox/InputBox.jsx

@@ -20,9 +20,14 @@ export default function InputBox({ input_title, value, onchange, error }) {
             setBorderError(true);
         }
     }
-
+    /*
+        const inputStyle = {
+            border: borderError ? '2px solid red' : '1px solid white',
+        };
+    */
+
     const inputStyle = {
-        border: borderError ? '2px solid red' : '1px solid white',
+        border: '2px solid red',
     };
 
     const handleClearInput = () => {

src/Components/CustomComp/OutputBox/OutputBox.css

@@ -15,7 +15,9 @@
     outline: none;
     padding: 10px;
     font-size: 20px;
-    color: white;
+    /*   color: white;
+  */ 
+  color: var(--text_color);
 }
 
 @media only screen and (max-width: 600px) {

src/Components/CustomComp/TextBox/TextBox.css

@@ -20,8 +20,10 @@
     font-size: 15px;
     font-weight: bold;
     line-height: 1.5;
-    /* overflow: auto; */
-    background-color: #141421;
+    /* overflow: auto;  
+     background-color: #141421;
+*/
+background-color: var(--body_background);
     color: gray;
     border: 1px solid #2e2e4c;
     box-shadow: 3px 9px 16px rgb(0, 0, 0, 0.4), -3px -3px 10px rgba(255, 255, 255, 0.06), inset 14px 14px 26px rgb(0, 0, 0, 0.3), inset -3px -3px 15px rgba(255, 255, 255, 0.05);

src/Components/Lightmode/Lightmode.css

@@ -0,0 +1,68 @@
+.dark_mode {
+    margin-top: -20px;
+    margin-left: 10px;
+}
+
+.dark_mode_label {
+    width: 65px;
+    height: 30px;
+    position: relative;
+    display: block;
+    background: #ebebeb;
+    border-radius: 200px;
+    box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
+        inset 0px -5px 15px rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: 0.3s;
+}
+.dark_mode_label:after {
+    content: "";
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    background: linear-gradient(180deg, #ffcc89, #d8860b);
+    border-radius: 180px;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+}
+.dark_mode_input {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+}
+.dark_mode_input:checked + .dark_mode_label {
+    background: #242424;
+}
+.dark_mode_input:checked + .dark_mode_label:after {
+    left: 62px;
+    transform: translateX(-100%);
+    background: linear-gradient(180deg, #777, #3a3a3a);
+}
+.dark_mode_label:active:after {
+    width: 30px;
+}
+
+.dark_mode_label svg {
+    position: absolute;
+    width: 20px;
+    top: 5px;
+    z-index: 100;
+}
+.dark_mode_label svg.sun {
+    left: 5px;
+    fill: #fff;
+    transition: 0.3s;
+}
+.dark_mode_label svg.moon {
+    left: 40px;
+    fill: #7e7e7e;
+    transition: 0.3s;
+}
+.dark_mode_input:checked + .dark_mode_label svg.sun {
+    fill: #7e7e7e;
+}
+.dark_mode_input:checked + .dark_mode_label svg.moon {
+    fill: #fff;
+}

src/Components/Lightmode/Lightmode.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { ReactComponent as Sun } from "./Sun.svg";
+import { ReactComponent as Moon } from "./Moon.svg";
+import "./Lightmode.css"
+
+const Lightmode = () => {
+    const [darkmode, setDarkMode] = useState(false);
+
+    const setDarkModePreference = () => {
+        document.querySelector("body").setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+        setDarkMode(true);
+    }
+    const setLightModePreference = () => {
+        document.querySelector("body").setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
+        setDarkMode(false);
+    }
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+            setDarkModePreference();
+
+        } else {
+            setLightModePreference();
+        }
+    }, []);
+
+    const toggletheme = () => {
+        if(darkmode)
+        {
+            setLightModePreference();
+            localStorage.setItem('theme', 'light');
+        }
+        else{
+            setDarkModePreference();
+            localStorage.setItem('theme', 'dark');
+        }
+    }
+
+    return (
+        <div className='dark_mode'>
+            <input
+                className='dark_mode_input'
+                type='checkbox'
+                id='darkmode-toggle'
+                checked={darkmode}
+                onChange={toggletheme}
+            />
+            <label className='dark_mode_label' for='darkmode-toggle'>
+                <Sun />
+                <Moon />
+            </label>
+        </div>
+    );
+};
+
+export default Lightmode;

src/Components/Sidebar/Sidebar.css

@@ -7,7 +7,8 @@ a {
 .sidebar {
     width: 300px;
     height: 100vh;
-    background: linear-gradient(to bottom, #303154, #2e2e4c);
+    /*    background: linear-gradient(to bottom, #303154, #2e2e4c);
+*/background: var(--sidebar-background);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     position: fixed;
     top: 0;