Added theme

src/components/Header/Header.styled.js

@@ -1,5 +1,4 @@
 import { Box } from "@mui/material";
-import { themeToUse2 } from "hooks/useToggleColorMode";
 import styled from "styled-components";
 
 export const HeaderContainer = styled(Box)`
@@ -9,7 +8,7 @@ export const HeaderContainer = styled(Box)`
   padding: 0 24px;
   width: 100%;
   height: 72px;
-  background-color: ${themeToUse2.palette.primaryDark};
+  background-color: ${(props) => props?.theme.colors.primaryDark};
 `;
 export const HeaderSideContainer = styled(Box)`
   display: flex;

src/components/Header/HeaderNavigation/HeaderNavigationItem/HeaderNavigationItem.styled.js

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material";
 import { NavLink } from "react-router-dom";
 import styled from "styled-components";
-import selectedTheme from "themes";
 
 export const HeaderNavigationItemIconContainer = styled(Box)``;
 export const HeaderNavigationItemIconTitle = styled(Box)`
@@ -23,7 +22,7 @@ export const HeaderNavigationItemContainer = styled(NavLink)`
   height: 100%;
   transition-duration: 0.1s;
   &:hover {
-    background-color: ${selectedTheme.colors.primaryLighter};
+    background-color: ${(props) => props?.theme.colors.primaryLighter};
   }
   &[aria-checked="true"] ${HeaderNavigationItemIconTitle} {
     font-weight: 700;

src/components/Header/HeaderProfileBar/HeaderThemeChooser/HeaderThemeChooser.js

@@ -1,20 +1,21 @@
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { HeaderThemeChooserContainer } from "./HeaderThemeChooser.styled";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
-import useToggleColorMode, { themeToUse2 } from "hooks/useToggleColorMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { ColorModeContext } from "context/ColorModeContext";
+import { DARK_THEME } from "constants/themeConstants";
 
 const HeaderThemeChooser = () => {
-  const [toggleColorMode] = useToggleColorMode();
-
-  console.log(themeToUse2);
+  const themeCtx = useContext(ColorModeContext);
 
   const handleChangeTheme = () => {
-    toggleColorMode();
-  }
+    themeCtx?.changeTheme?.();
+  };
+  console.log(themeCtx)
   return (
     <HeaderThemeChooserContainer onClick={handleChangeTheme}>
-      <DarkModeIcon />
+      {themeCtx?.currentTheme === DARK_THEME ? <LightModeIcon /> : <DarkModeIcon />}
     </HeaderThemeChooserContainer>
   );
 };

src/components/Header/HeaderProfileBar/HeaderThemeChooser/HeaderThemeChooser.styled.js

@@ -1,4 +1,8 @@
-import { Box } from "@mui/material";
+import { IconButton } from "@mui/material";
 import styled from "styled-components";
 
-export const HeaderThemeChooserContainer = styled(Box)``
+export const HeaderThemeChooserContainer = styled(IconButton)`
+  cursor: pointer;
+  min-width: 0;
+  border-radius: 100%;
+`;

src/constants/themeConstants.js

@@ -0,0 +1,14 @@
+export const DARK_THEME = "dark";
+export const LIGHT_THEME = "light";
+
+export const themes = [DARK_THEME, LIGHT_THEME];
+
+export const getNextTheme = (currentTheme) => {
+  const currentThemeIndex =
+    themes?.findIndex?.((singleTheme) => singleTheme === currentTheme) || 0;
+  const nextThemeIndex =
+    currentThemeIndex === themes?.length - 1 ? 0 : currentThemeIndex + 1;
+  return themes[nextThemeIndex];
+};
+
+export const themeStorageKey = "colorMode";

src/context/ColorModeContext.js

@@ -1,14 +1,15 @@
 import React, { createContext } from "react";
 import PropTypes from "prop-types";
-import { ThemeProvider } from "@mui/material/styles";
-import useToggleColorMode from "hooks/useToggleColorMode";
+// import { ThemeProvider } from "@mui/material/styles";
+import useTheme from "hooks/useTheme";
+import { ThemeProvider } from "styled-components";
 
 export const ColorModeContext = createContext();
 
 const ColorModeProvider = ({ children }) => {
-  const [toggleColorMode, theme] = useToggleColorMode();
+  const [changeTheme, theme, currentTheme] = useTheme();
   return (
-    <ColorModeContext.Provider value={toggleColorMode}>
+    <ColorModeContext.Provider value={{ changeTheme, theme, currentTheme }}>
       <ThemeProvider theme={theme}>{children}</ThemeProvider>
     </ColorModeContext.Provider>
   );

src/hooks/useTheme.js

@@ -0,0 +1,29 @@
+import { useState, useMemo } from "react";
+import {
+  authScopeSetHelper,
+  authScopeStringGetHelper,
+} from "util/authScopeHelpers";
+import { getTheme } from "themes";
+import {
+  getNextTheme,
+  themeStorageKey,
+  themes,
+} from "constants/themeConstants";
+
+const useTheme = () => {
+  const currentColorMode =
+    authScopeStringGetHelper(themeStorageKey) || themes[0];
+  const [currentTheme, setCurrentTheme] = useState(currentColorMode);
+
+  const changeTheme = (newTheme) => {
+    const nextMode = newTheme || getNextTheme(currentTheme);
+    authScopeSetHelper(themeStorageKey, nextMode);
+    setCurrentTheme(nextMode);
+  };
+
+  const theme = useMemo(() => getTheme(), [currentTheme]);
+
+  return [changeTheme, theme, currentTheme];
+};
+
+export default useTheme;

src/hooks/useToggleColorMode.js

@@ -1,44 +0,0 @@
-import { useState, useMemo } from "react";
-import { createTheme } from "@mui/material/styles";
-import {
-  authScopeSetHelper,
-  authScopeStringGetHelper,
-} from "util/authScopeHelpers";
-import selectedTheme, { reinitializeTheme } from "themes";
-import { primaryThemeColors } from "themes/primaryTheme/primaryThemeColors";
-import { secondaryThemeColors } from "themes/secondaryTheme/secondaryThemeColors";
-
-var themeToUse = {
-  palette: {
-    primary: "white",
-  },
-};
-
-const useToggleColorMode = () => {
-  const currentColorMode = authScopeStringGetHelper("colorMode") || "light";
-  const [mode, setMode] = useState(currentColorMode);
-
-  const toggleColorMode = () => {
-    const nextMode = mode === "light" ? "dark" : "light";
-    setMode(nextMode);
-    authScopeSetHelper("colorMode", nextMode);
-  };
-
-  const theme = useMemo(() => {
-    reinitializeTheme();
-    themeToUse = createTheme({
-      palette: {
-        mode,
-        ...(mode === "light" ? primaryThemeColors : secondaryThemeColors),
-      },
-    });
-    return themeToUse;
-  }, [mode]);
-  console.log(selectedTheme);
-
-  return [toggleColorMode, theme];
-};
-
-export const themeToUse2 = getTheme;
-
-export default useToggleColorMode;

src/index.js

@@ -10,7 +10,7 @@ import { store, persistor } from "./features/store";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import ColorModeProvider from "context/ColorModeContext";
-import { CssBaseline } from "@mui/material";
+// import { CssBaseline } from "@mui/material";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -18,7 +18,7 @@ root.render(
     <React.StrictMode>
       <Provider store={store}>
         <ColorModeProvider>
-        <CssBaseline />
+        {/* <CssBaseline /> */}
           <PersistGate loading={null} persistor={persistor}>
             <BrowserRouter>
               <Routes>

src/themes/index.js

@@ -1,25 +1,16 @@
 import { authScopeStringGetHelper } from "util/authScopeHelpers";
 import primary from "./primaryTheme/primaryTheme";
 import secondary from "./secondaryTheme/secondaryTheme";
+import { LIGHT_THEME } from "constants/themeConstants";
 
-
-export const getTheme = () => {
+export let getTheme = () => {
   let selectedThemeStorage = authScopeStringGetHelper("colorMode");
-  console.log(selectedThemeStorage);
-  if (selectedThemeStorage === "light") {
+  if (selectedThemeStorage === LIGHT_THEME) {
     return { ...primary };
   }
-  if (selectedThemeStorage === "dark") {
-    return { ...secondary };
-  }
+  return { ...secondary };
 };
 
 let selectedTheme = getTheme();
 
-export const reinitializeTheme = () => {
-    selectedTheme = getTheme();
-}
-
 export default selectedTheme;
-
-npm i @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-theme-lark @ckeditor/ckeditor5-react @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles