Add Light Theme (#178)

src/App.jsx

@@ -4,17 +4,20 @@ import Error from "./components/Error/Error";
 import SearchInput from "./components/Search/SearchInput";
 import Layout from "./components/Layout/Layout";
 import BGShape from "./components/BGShape";
+import { ThemeProvider } from "./context/ThemeContext";
 
 function App() {
   const [search, setSearch] = useState("");
   const [type, setType] = useState("");
 
   return (
     <>
-      <Layout>
-        <SearchInput search={search} setSearch={setSearch} setType={setType} />
-        <Error search={search} type={type} />
-      </Layout>
+      <ThemeProvider>
+        <Layout>
+          <SearchInput search={search} setSearch={setSearch} setType={setType} />
+          <Error search={search} type={type} />
+        </Layout>
+      </ThemeProvider>
     </>
   );
 }

src/components/Doc/DocItem.jsx

@@ -9,8 +9,8 @@ const DocItem = ({ title, content }) => {
   // const b = "<b>"
   return (
     <div className={`p-4 rounded shadow-lg shadow-[#118d7c22] bg-white/5 backdrop-blur-[10px]`}>
-      <h6 className='font-semibold text-white text-opacity-80 mb-2'>{title}</h6>
-      <p className={`text-sm text-gray line-clamp-11 leading-relaxed ${!readMore ? "none" : "hidden"}`}>
+      <h6 className='font-semibold text-dark dark:text-white text-opacity-80 mb-2'>{title}</h6>
+      <p className={`text-sm text-zinc-600 dark:text-gray line-clamp-11 leading-relaxed ${!readMore ? "none" : "hidden"}`}>
         {
           content.length > 100 ? content.substring(0, 100).replace(/`/g, '') : content.replace(/`/g, '')
         }

src/components/Error/ErrorCard.jsx

@@ -27,7 +27,7 @@ function ErrorCard({ error }) {
       <div className="bg-primary w-full h-[2px] my-4" />
 
       <div className="h-fit">
-        <p className="text-sm text-gray line-clamp-11 leading-relaxed">
+        <p className="text-sm text-zinc-700 dark:text-gray line-clamp-11 leading-relaxed">
           {readMore ? error.description : error.description.substring(0, 100)}
           {error.description.length > 100 ? (
             <button

src/components/Header/Header.jsx

@@ -2,7 +2,14 @@ import { MdPeople, MdInsertDriveFile } from "react-icons/md";
 import { AiFillGithub } from "react-icons/ai";
 import { Link } from "react-router-dom";
 
+import { HiMoon, HiSun } from "react-icons/hi";
+import { ThemeContext } from '../../context/ThemeContext'
+import { useContext } from "react";
+
 function Header({ notice }) {
+  const { toggleTheme } = useContext(ThemeContext);
+
+
   const navLink = [
     {
       name: 'Home',
@@ -12,12 +19,12 @@ function Header({ notice }) {
     {
       name: 'Doc',
       link: '/doc',
-      icon: <MdInsertDriveFile size='1rem'/>
+      icon: <MdInsertDriveFile size='1rem' />
     },
     {
       name: 'Contributors',
       link: '/Contributors',
-      icon: <MdPeople size='1.25rem'/>
+      icon: <MdPeople size='1.25rem' />
     },
     {
       name: '',
@@ -33,7 +40,7 @@ function Header({ notice }) {
           GITHUB <span className="text-primary line-through">ERROR</span> SOLVE
         </h1> */}
         <Link to={'/'}>
-          <img src="/assets/logo.png" className="w-36 bg-transparent" alt="GES" />
+          <img src="/assets/logo.png" className="w-36 bg-transparent invert dark:invert-0" alt="GES" />
         </Link>
         <div className="flex mt-2 md:mt-0 items-center gap-7 text-sm">
 
@@ -47,9 +54,14 @@ function Header({ notice }) {
                 ) : null
               )
             })
-
           }
 
+          <p className="text-lg cursor-pointer" onClick={toggleTheme}>
+            <HiMoon className="dark:hidden" />
+            <HiSun className="hidden dark:inline" />
+          </p>
+
+
 
           {/* <MdConstruction className="text-lg" />
           <h6>Under Construction</h6>

src/components/Search/SearchInput.jsx

@@ -22,7 +22,7 @@ function SearchInput({ search, setSearch, setType }) {
     <div className="flex flex-col mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg w-11/12 md:w-5/6">
       <form
         onSubmit={(e) => e.preventDefault()}
-        className="flex mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
+        className="flex mx-auto mt-12 items-center border border-zinc-300 gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
       >
         <MdSearch className="text-gray text-2xl" />
         <input
@@ -46,7 +46,7 @@ function SearchInput({ search, setSearch, setType }) {
       <div className="types mt-4">
         {width > 768 ? (
           <ul
-            className={`flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12  md:w-auto`}
+            className={`flex flex-col sm:flex-row mx-auto mt-2 border border-zinc-300 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12  md:w-auto`}
           >
             {errorType.map((item, i) => (
               <li

src/context/ThemeContext.jsx

@@ -0,0 +1,38 @@
+import React, { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState();
+
+  useEffect(() => {
+    const localTheme = localStorage.getItem('theme');
+    console.log('Get LocalStorage theme', localTheme);
+
+    setTheme(localTheme || 'dark');
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  useEffect(() => {
+    if (theme && theme !== 'undefined' && theme !== 'null') {
+      localStorage.setItem('theme', theme);
+      console.log('Set LocalStorage theme', theme);
+
+      if (theme == 'dark') {
+        document.documentElement.classList.add('dark')
+
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    }
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/hooks/useColorBorderBox.js

@@ -24,7 +24,7 @@ const useColorBorderBox = (error = "") => {
 
       let item = error.type;
 
-      let response = `py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg   items-start bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 ${
+      let response = `py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg   items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 ${
         item === "add"
           ? "border-[#4024e0]"
           : item === "commit"

tailwind.config.cjs

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     fontFamily: {