feat(theme-switcher): Theme Switcher

Implemented mui theme switcher component

Author: rbiedrawa

README.md

@@ -55,4 +55,5 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 * [React Hook Form vs. Formik: A technical and performance comparison](https://blog.logrocket.com/react-hook-form-vs-formik-comparison/)
 * [React Hook Form - form builder](https://react-hook-form.com/form-builder)
 * [React Hook Form - typescript Support](https://react-hook-form.com/ts)
-* [Redux Style Guide](https://redux.js.org/style-guide/style-guide#write-action-types-as-domaineventname)
+* [Redux Style Guide](https://redux.js.org/style-guide/style-guide#write-action-types-as-domaineventname)
+* [MUI - theme switcher](https://mui.com/customization/dark-mode/)

src/App.tsx

@@ -3,23 +3,15 @@ import {Provider} from "react-redux";
 
 import './App.css';
 import {history, store} from "./store/store";
-import {createTheme} from '@mui/material/styles';
 import AppRoutes from "./routes";
-import {ThemeProvider} from "@emotion/react";
-import {CssBaseline} from "@mui/material";
 import {HistoryRouter as Router} from "redux-first-history/rr6";
 
 
-const theme = createTheme();
-
 const App = () => (
  <>
  <Provider store={store}>
  <Router history={history}>
- <ThemeProvider theme={theme}>
- <CssBaseline/>
- <AppRoutes/>
- </ThemeProvider>
+ <AppRoutes/>
  </Router>
  </Provider>
  </>

src/components/Layout/Header.tsx renamed to src/components/Headers/Header.tsx

@@ -1,19 +1,26 @@
 import React from "react";
 
-import {Button, ButtonGroup, Link} from "@mui/material";
+import {Button, ButtonGroup, IconButton, Link} from "@mui/material";
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import {NavLink as RouterLink} from 'react-router-dom';
 import {useTranslation} from "react-i18next";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import {Theme} from "@mui/material/styles/createTheme";
 
-const Header = () => {
- const {t, i18n} = useTranslation();
 
- // TODO: move state to redux
- const onChangeLanguage = (lang: string) => {
- i18n.changeLanguage(lang);
- };
+type HeaderProps = {
+ currentThemeMode: string
+ onChangeThemeClick: () => void
+ onChangeLanguage: (lang: string) => void
+}
+
+const Header = (props: HeaderProps) => {
+ const {t} = useTranslation();
+
+ const {currentThemeMode, onChangeThemeClick, onChangeLanguage} = props;
 
  return (
  <>
@@ -50,6 +57,9 @@ const Header = () => {
  <Button onClick={() => onChangeLanguage('en')}>🇺🇸</Button>
  <Button onClick={() => onChangeLanguage('pl')}>🇵🇱</Button>
  </ButtonGroup>
+ <IconButton sx={{ ml: 1 }} onClick={onChangeThemeClick} color="inherit">
+ {currentThemeMode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+ </IconButton>
  </nav>
  </Toolbar>
  </AppBar>

src/components/Layout/index.tsx

@@ -1,23 +1,59 @@
 import React from "react";
 import {Outlet} from 'react-router-dom';
-import Header from "./Header";
+import Header from "../Headers/Header";
 import Box from "@mui/material/Box";
+import {CssBaseline, ThemeProvider} from "@mui/material";
+import {createTheme} from "@mui/material/styles";
+import {useTranslation} from "react-i18next";
 
-const Layout = () => (
- <>
- <Header/>
- <main>
- <Box
- sx={{
- bgcolor: 'background.paper',
- pt: 3,
- pb: 3,
- }}
- >
- <Outlet/>
- </Box>
- </main>
- </>
-);
+
+const Layout = () => {
+ const [mode, setMode] = React.useState<'light' | 'dark'>('light');
+
+ const {i18n} = useTranslation();
+
+ // TODO: move state to redux
+ const onChangeLanguage = (lang: string) => {
+ i18n.changeLanguage(lang);
+ };
+
+ const colorMode = React.useMemo(
+ () => ({
+ toggleColorMode: () => {
+ setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+ },
+ }),
+ [],
+ );
+
+ const theme = React.useMemo(
+ () => {
+ return createTheme({
+ palette: {
+ mode,
+ },
+ });
+ },
+ [mode],
+ );
+
+ return (
+ <>
+ <ThemeProvider theme={theme}>
+ <CssBaseline/>
+ <Header currentThemeMode={theme.palette.mode} onChangeThemeClick={colorMode.toggleColorMode} onChangeLanguage={onChangeLanguage}/>
+ <main>
+ <Box sx={{
+ bgcolor: 'background.paper',
+ pt: 3,
+ pb: 3,
+ }}>
+ <Outlet/>
+ </Box>
+ </main>
+ </ThemeProvider>
+ </>
+ );
+};
 
 export default Layout;