work on light theme

frontend/app/src/config/ThemeProviderWrapper.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "./store";
+import { ConfigProvider } from "antd";
+import { darkTheme, lightTheme } from "./style";
+import PropTypes from "prop-types";
+
+const ThemeProviderWrapper = ({ children }: { children: ReactNode }) => {
+  const theme = useSelector((state: StorePrototype) => state.settings.theme);
+
+  return (
+    <ConfigProvider theme={theme === "dark" ? darkTheme : lightTheme}>
+      {children}
+    </ConfigProvider>
+  );
+};
+
+ThemeProviderWrapper.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ThemeProviderWrapper;

frontend/app/src/config/store.ts

@@ -23,10 +23,12 @@ const initialAuthDataState: AuthDataType = {
 
 export type SettingsType = {
   language: string | undefined;
+  theme: string | undefined;
 };
 
 const initialSettingsState: SettingsType = {
   language: undefined,
+  theme: undefined,
 };
 
 export type StorePrototype = {
@@ -44,6 +46,8 @@ export const logOut = createAction("auth/logOut");
 
 export const setLanguage = createAction<string>("settings/setLanguage");
 export const loadLanguage = createAction("settings/loadLanguage");
+export const setTheme = createAction<string>("settings/setTheme");
+export const loadTheme = createAction("settings/loadTheme");
 
 export const store = configureStore({
   reducer: {
@@ -94,6 +98,19 @@ export const store = configureStore({
           state.language = "en";
         }
       });
+      builder.addCase(setTheme, (state, action) => {
+        state.theme = action.payload || "dark";
+        localStorage.setItem("theme", action.payload || "dark");
+      });
+      builder.addCase(loadTheme, (state) => {
+        const theme: string | null = localStorage.getItem("theme");
+        if (theme) {
+          state.theme = theme;
+        } else {
+          const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+          state.theme = darkThemeMq.matches ? "dark" : "light";
+        }
+      });
     }),
   },
   // Adding the api middleware enables caching, invalidation, polling,

frontend/app/src/config/style.ts

@@ -1,6 +1,6 @@
 import { ThemeConfig } from "antd";
 
-export const theme: ThemeConfig = {
+export const darkTheme: ThemeConfig = {
   token: {
     colorText: "white",
     colorIcon: "white",
@@ -18,3 +18,13 @@ export const theme: ThemeConfig = {
     },
   },
 };
+
+export const lightTheme: ThemeConfig = {
+  token: {
+    colorPrimary: "#00d8a4",
+    colorIconHover: "#00d8a4",
+    borderRadius: 5,
+    fontFamily: "Comfortaa",
+    // colorWarningBg: "#001529",
+  },
+};