feat: setting user dashboard color

Author: NdekoCode

src/App.jsx

@@ -9,8 +9,8 @@ import { UserStateContextProvider } from "./libs/context/UserInteractionContext"
 import routes from "./libs/routes/routes";
 
 function App() {
-  const { activeMenu, themeSettings, setThemeSettings } = StateContext();
-
+  const { activeMenu, themeSettings, currentColor, setThemeSettings } =
+    StateContext();
   return (
     <div>
       <BrowserRouter>
@@ -20,7 +20,7 @@ function App() {
               <button
                 type="button"
                 className="text-3xl p-3 hover:drop-shadow-xl rounded-full transition-colors text-white hover:bg-light-gray"
-                style={{ backgroundColor: "blue" }}
+                style={{ backgroundColor: currentColor }}
                 onClick={setThemeSettings}
               >
                 <FiSettings />

src/components/Partials/Navbar.jsx

@@ -22,8 +22,8 @@ const NavButton = ({ title, customFunc, icon, color, dotColor }) => {
       <button
         type="button"
         onClick={customFunc}
-        style={{ color }}
         className="relative text-xl rounded-full p-3 hover:bg-light-gray"
+        style={{ color }}
       >
         <span
           style={{ backgroundColor: dotColor }}
@@ -35,7 +35,7 @@ const NavButton = ({ title, customFunc, icon, color, dotColor }) => {
   );
 };
 const Navbar = () => {
-  const { toggleMenu } = StateContext();
+  const { toggleMenu, currentColor } = StateContext();
   const { isClicked, toggleIsClicked } = UserStateContext();
   const { chat, cart, userProfile, notification } = isClicked;
 
@@ -44,27 +44,27 @@ const Navbar = () => {
       <NavButton
         title="Menu"
         customFunc={toggleMenu}
-        color="blue"
+        color={currentColor}
         icon={<AiOutlineMenu />}
       />
       <div className="flex">
         <NavButton
           title="Cart"
           customFunc={() => toggleIsClicked("cart")}
-          color="blue"
+          color={currentColor}
           icon={<FiShoppingCart />}
         />
         <NavButton
           title="Chat"
           customFunc={() => toggleIsClicked("chat")}
-          color="blue"
+          color={currentColor}
           dotColor="#03c9d7"
           icon={<BsChatLeft />}
         />
         <NavButton
           title="Notification"
           customFunc={() => toggleIsClicked("notification")}
-          color="blue"
+          color={currentColor}
           dotColor="#03c9d7"
           icon={<RiNotification3Line />}
         />

src/components/Partials/Sidebar.jsx

@@ -9,7 +9,7 @@ import StateContext from "../../libs/context/AppContext";
 import { links } from "../../libs/data/dummy";
 
 const Sidebar = () => {
-  const { handleCloseSideBar } = StateContext();
+  const { handleCloseSideBar, currentColor } = StateContext();
   const activeLink =
     "flex items-center gap-5 pl-3 py-2.5 rounded-lg text-white text-md m-2 transition-colors bg-gray-900";
   const normalLink =
@@ -48,6 +48,9 @@ const Sidebar = () => {
                     className={(nav) =>
                       nav.isActive ? activeLink : normalLink
                     }
+                    style={(nav) =>
+                      nav.isActive ? { backgroundColor: currentColor } : {}
+                    }
                   >
                     {item.icon}
                     <span className="capitalize">{item.name}</span>

src/components/Partials/ThemeSettings.jsx

@@ -22,7 +22,7 @@ const ThemeSettings = () => {
           <button
             type="button"
             className="text-2xl rounded-full p-2 hover:drop-shadow-xl hover:bg-light-gray"
-            onClick={() => setThemeSettings()}
+            onClick={setThemeSettings}
             style={{ color: "rgba(153,171,180)" }}
           >
             <MdOutlineCancel />
@@ -36,8 +36,8 @@ const ThemeSettings = () => {
               name="theme"
               id="light"
               value="Light"
-              onChange={() => {}}
-              checked={true}
+              onChange={setMode}
+              checked={currentMode === "Light"}
               className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
             />
             <label htmlFor="light" className="ml-2 text-md cursor-pointer">
@@ -50,8 +50,8 @@ const ThemeSettings = () => {
               name="theme"
               id="dark"
               value="Dark"
-              onChange={() => {}}
-              checked={true}
+              onChange={setMode}
+              checked={currentMode === "Dark"}
               className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
             />
             <label htmlFor="dark" className="ml-2 text-md cursor-pointer">
@@ -78,11 +78,6 @@ const ThemeSettings = () => {
                     }}
                     onClick={() => {
                       setColor(theme.color);
-                      console.log(
-                        currentColor === theme.color,
-                        currentColor,
-                        theme.color
-                      );
                     }}
                   >
                     <BsCheck

src/libs/context/AppContext.jsx

@@ -13,15 +13,22 @@ const StateContextInit = createContext();
 export const StateContextProvider = memo(({ children }) => {
   const [activeMenu, toggleMenu] = useToggle(true);
   const [themeSettings, setThemeSettings] = useToggle(false);
-  const [currentColor, setCurrentColor] = useState("#03C9D7");
-  const [currentMode, setCurrentMode] = useState("Light");
+  const [currentColor, setCurrentColor] = useState(
+    localStorage.getItem("color") || "#03C9D7"
+  );
+  const [currentMode, setCurrentMode] = useState(
+    localStorage.getItem("theme") || "Light"
+  );
   const setMode = (e) => {
     setCurrentMode(e.target.value);
     localStorage.setItem("theme", e.target.value);
+
+    setThemeSettings(false);
   };
   const setColor = (value) => {
     setCurrentColor(value);
     localStorage.setItem("color", value);
+    setThemeSettings(false);
   };
   const [screenSize, handleSize] = useResize();
   const handleCloseSideBar = useCallback(() => {

src/pages/Partials/Ecommerce.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { GoPrimitiveDot } from "react-icons/go";
 import { Button, SparkLine, Stacked } from "../../components/components";
+import StateContext from "../../libs/context/AppContext";
 import { earningData, SparklineAreaData } from "../../libs/data/dummy";
 
 function Ecommerce() {
+  const { currentColor } = StateContext();
   return (
     <div className="FadeAp mt-5">
       <div className="flex flex-wrap lg:flex-nowrap justify-center">
@@ -16,7 +18,7 @@ function Ecommerce() {
           <div className="mt-6">
             <Button
               color="white"
-              bgColor="blue"
+              bgColor={currentColor}
               borderRadius="10px"
               size="md"
               className="px-3 py-2 hover:drop-shadow-xl"
@@ -92,19 +94,19 @@ function Ecommerce() {
               </div>
               <div className="mt-5">
                 <SparkLine
-                  currentColor="blue"
+                  currentColor={currentColor}
                   id="line-sparkline"
                   type="Line"
                   height="80px"
                   width="80px"
-                  color="blue"
+                  color={currentColor}
                   data={SparklineAreaData}
                 />
               </div>
               <div className="mt-10">
                 <Button
                   color="white"
-                  bgColor="blue"
+                  bgColor={currentColor}
                   className="px-3 py-2"
                   borderRadius="5px"
                 >

tailwind.config.cjs

@@ -5,6 +5,7 @@ module.exports = {
   safelist: [
     "text-2xl",
     "text-3xl",
+    "bg-[]",
     {
       pattern: /text-(red|green|blue)-(100|200|300|500|600|700|800|900)/,
       variants: ["lg", "hover", "focus", "lg:hover"],