work on light theme

frontend/app/src/components/HeaderComponent.tsx

@@ -3,15 +3,23 @@ import {
   GlobalOutlined,
   LogoutOutlined,
   MenuOutlined,
+  MoonOutlined,
   PicCenterOutlined,
   SettingOutlined,
+  SunOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Drawer, Layout, Menu, MenuProps } from "antd";
+import { Drawer, Layout, Menu, MenuProps, Switch } from "antd";
 import React, { useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
-import { StorePrototype, logOut, setLanguage, store } from "../config/store";
+import {
+  StorePrototype,
+  logOut,
+  setLanguage,
+  setTheme,
+  store,
+} from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
 import { Link, useNavigate } from "react-router-dom";
@@ -43,6 +51,10 @@ const HeaderComponent = () => {
     (state: StorePrototype) => state.auth.user
   );
 
+  const currentTheme: string | undefined = useSelector(
+    (state: StorePrototype) => state.settings.theme
+  );
+
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   useEffect(() => {
     const keys = [];
@@ -113,6 +125,18 @@ const HeaderComponent = () => {
       children: languageSelectItems,
       style: { background: "#001529" },
     },
+    {
+      label: (
+        <Switch
+          onChange={(v: boolean) =>
+            store.dispatch(setTheme(v ? "light" : "dark"))
+          }
+          defaultChecked={currentTheme === "light"}
+        />
+      ),
+      key: "theme",
+      icon: currentTheme === "dark" ? <MoonOutlined /> : <SunOutlined />,
+    },
     {
       label: user ? user.username : tr("Log in"),
       key: "login",
@@ -167,6 +191,18 @@ const HeaderComponent = () => {
       onClick: () => !user && setAuthModalOpen(true),
       ...(user ? { children: userMenuItems } : {}),
     },
+    {
+      label: (
+        <Switch
+          onChange={(v: boolean) =>
+            store.dispatch(setTheme(v ? "light" : "dark"))
+          }
+          defaultChecked={currentTheme === "light"}
+        />
+      ),
+      key: "theme",
+      icon: currentTheme === "dark" ? <MoonOutlined /> : <SunOutlined />,
+    },
   ];
 
   return (