From 00593357a81c4a631908a94b46f1f2e42ee0a23c Mon Sep 17 00:00:00 2001
From: Prateek <devXprite@gmail.com>
Date: Thu, 5 Oct 2023 17:35:37 +0530
Subject: [PATCH] Add Light Theme (#178)

---
 src/App.jsx                           | 11 +++++---
 src/components/Doc/DocItem.jsx        |  4 +--
 src/components/Error/ErrorCard.jsx    |  2 +-
 src/components/Header/Header.jsx      | 20 +++++++++++---
 src/components/Search/SearchInput.jsx |  4 +--
 src/context/ThemeContext.jsx          | 38 +++++++++++++++++++++++++++
 src/hooks/useColorBorderBox.js        |  2 +-
 src/index.css                         |  2 +-
 tailwind.config.cjs                   |  1 +
 9 files changed, 69 insertions(+), 15 deletions(-)
 create mode 100644 src/context/ThemeContext.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 18167f0..4b2453d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ 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("");
@@ -11,10 +12,12 @@ function App() {
 
   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>
     </>
   );
 }
diff --git a/src/components/Doc/DocItem.jsx b/src/components/Doc/DocItem.jsx
index 4a6cf45..f3377d3 100644
--- a/src/components/Doc/DocItem.jsx
+++ b/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, '')
         }
diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx
index 4378fc8..f888762 100644
--- a/src/components/Error/ErrorCard.jsx
+++ b/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
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 0115398..0156090 100644
--- a/src/components/Header/Header.jsx
+++ b/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>
diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
index d06601d..bcd5577 100644
--- a/src/components/Search/SearchInput.jsx
+++ b/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
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..66c08c9
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/src/hooks/useColorBorderBox.js b/src/hooks/useColorBorderBox.js
index 772a55e..be1eaa3 100644
--- a/src/hooks/useColorBorderBox.js
+++ b/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"
diff --git a/src/index.css b/src/index.css
index 7063f18..20bde79 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,7 +9,7 @@
 
 @layer base {
   body {
-    @apply bg-dark text-white;
+    @apply bg-white text-dark dark:bg-dark dark:text-white;
   }
 }
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index bbf38d7..d5a05e5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     fontFamily: {