darkMode context and button implemented

space_flow/src/App.tsx

@@ -11,6 +11,7 @@ import { locationContext } from "./contexts/locationContext";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
 import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
+import { darkContext } from "./contexts/darkContext";
 
 export default function App() {
 	var _ = require("lodash");
@@ -24,6 +25,8 @@ export default function App() {
 		setIsStackedOpen(true);
 	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
 
+	const {dark} = useContext(darkContext);
+
 	const {
 		errorData,
 		errorOpen,
@@ -93,7 +96,7 @@ export default function App() {
 
 	return (
 		//need parent component with width and height
-		<div className="h-full flex flex-col">
+		<div className={(dark ? "dark " : "") + "h-full flex flex-col"}>
 			<div className="flex grow-0 shrink basis-auto">
 				<Header userNavigation={userNavigation} user={user}></Header>
 			</div>

space_flow/src/components/HeaderComponent/index.tsx

@@ -4,6 +4,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import {
     BellIcon,
     MoonIcon,
+    SunIcon,
   } from '@heroicons/react/24/outline'
 import { classNames } from '../../utils'
 import { Link } from 'react-router-dom'
@@ -11,6 +12,7 @@ import Breadcrumb from '../breadcrumbComponent'
 import { alertContext } from '../../contexts/alertContext'
 import { useLayer,Arrow } from 'react-laag'
 import AlertDropdown from '../../alerts/alertDropDown'
+import { darkContext } from '../../contexts/darkContext'
 
 export default function Header({user, userNavigation}){
   const {notificationCenter, setNotificationCenter} = useContext(alertContext)
@@ -24,6 +26,7 @@ export default function Header({user, userNavigation}){
     containerOffset: 12,
     arrowOffset: 4,
   })
+  const {dark, setDark} = useContext(darkContext);
     return (
     <header className="relative flex h-16 w-full shrink-0 items-center bg-white">
         {/* Logo area */}
@@ -47,7 +50,14 @@ export default function Header({user, userNavigation}){
           </div>
           <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
-              <span className="inline-flex">
+              <span className="inline-flex gap-6">
+                <button className="text-gray-400 hover:text-gray-500 dark:text-slate-700 dark:hover:text-slate-600" onClick={()=>{setDark(!dark)}}>
+                  {dark ?
+                    <SunIcon className="h-6 w-6" />
+                  :
+                    <MoonIcon className="h-6 w-6" />
+                  }
+                </button>
                 <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
                   <span className="sr-only">View notifications</span>
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}

space_flow/src/contexts/darkContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useState } from "react";
+
+type darkContextType = {
+	dark: {};
+	setDark: (newState: {}) => void;
+};
+
+const initialValue = {
+	dark: {},
+	setDark: () => {},
+};
+
+export const darkContext = createContext<darkContextType>(initialValue);
+
+export function DarkProvider({ children }) {
+	const [dark, setDark] = useState(false);
+	return (
+		<darkContext.Provider
+			value={{
+				dark,
+				setDark,
+			}}
+		>
+			{children}
+		</darkContext.Provider>
+	);
+}

space_flow/src/contexts/index.tsx

@@ -1,4 +1,5 @@
 import { AlertProvider } from "./alertContext";
+import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
@@ -8,15 +9,17 @@ export default function ContextWrapper({ children }) {
   //element to wrap all context
   return (
     <>
-      <LocationProvider>
-        <PopUpProvider>
-          <TypesProvider>
-            <TabsProvider>
-              <AlertProvider>{children}</AlertProvider>
-            </TabsProvider>
-          </TypesProvider>
-        </PopUpProvider>
-      </LocationProvider>
+      <DarkProvider>
+        <LocationProvider>
+          <PopUpProvider>
+            <TypesProvider>
+              <TabsProvider>
+                <AlertProvider>{children}</AlertProvider>
+              </TabsProvider>
+            </TypesProvider>
+          </PopUpProvider>
+        </LocationProvider>
+      </DarkProvider>
     </>
   );
 }

space_flow/tailwind.config.js

@@ -2,6 +2,7 @@
 const plugin = require('tailwindcss/plugin')
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,jsx}"],
+  darkMode: 'class',
   important:true,
   theme: {
     extend: {},