feature/IO-1113-Online-Dark-Mode - Toggle / Local storage solution

client/src/components/header/buildLeftMenuItems.jsx

@@ -25,7 +25,7 @@ import {
   UsergroupAddOutlined,
   UserOutlined
 } from "@ant-design/icons";
-import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa";
+import { FaCalendarAlt, FaCarCrash, FaMoon, FaSun, FaTasks } from "react-icons/fa";
 import { BsKanban } from "react-icons/bs";
 import { FiLogOut } from "react-icons/fi";
 import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
@@ -33,6 +33,7 @@ import { RiSurveyLine } from "react-icons/ri";
 import { IoBusinessOutline } from "react-icons/io5";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+import { Tooltip } from "antd";
 
 const buildLeftMenuItems = ({
   t,
@@ -41,7 +42,9 @@ const buildLeftMenuItems = ({
   setTaskUpsertContext,
   setReportCenterContext,
   signOutStart,
-  accountingChildren
+  accountingChildren,
+  handleDarkModeToggle,
+  darkMode
 }) => {
   return [
     {
@@ -331,6 +334,15 @@ const buildLeftMenuItems = ({
           label: t("user.actions.signout"),
           onClick: () => signOutStart()
         },
+        {
+          key: "darkmode-toggle",
+          id: "header-darkmode-toggle",
+          label: darkMode ? t("user.actions.light_theme") : t("user.actions.dark_theme"),
+          icon: (
+            <Tooltip title={darkMode ? t("Light mode") : t("Dark mode")}>{darkMode ? <FaSun /> : <FaMoon />}</Tooltip>
+          ),
+          onClick: handleDarkModeToggle
+        },
         {
           key: "help",
           id: "header-help",