From b8220ed0b874d296f0f14f85e82b4b63ccb62818 Mon Sep 17 00:00:00 2001 From: moshe vilner Date: Fri, 22 Dec 2023 12:51:24 +0200 Subject: [PATCH] feat: add support for dark & light themes --- src/layout/ThemeContext.tsx | 52 +++++++++++++++++++++++++++++++ src/layout/header/Header.tsx | 24 +++++++++++--- src/layout/header/darkSunIcon.svg | 1 + src/layout/header/sunIcon.svg | 1 + src/pages/about/index.tsx | 8 ++--- src/routes/MainRoute.tsx | 29 ++++------------- src/shared/Widget.tsx | 4 ++- 7 files changed, 87 insertions(+), 32 deletions(-) create mode 100644 src/layout/ThemeContext.tsx create mode 100644 src/layout/header/darkSunIcon.svg create mode 100644 src/layout/header/sunIcon.svg diff --git a/src/layout/ThemeContext.tsx b/src/layout/ThemeContext.tsx new file mode 100644 index 000000000..96d861050 --- /dev/null +++ b/src/layout/ThemeContext.tsx @@ -0,0 +1,52 @@ +// ThemeContext.js +import React, { FC, PropsWithChildren, createContext, useContext, useState } from 'react' +import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles' +import { ConfigProvider, theme } from 'antd' +import heIL from 'antd/es/locale/he_IL' +export interface ThemeContextInterface { + toggleTheme: () => void + isDarkTheme: boolean +} +const ThemeContext = createContext({} as ThemeContextInterface) +const darkTheme = createTheme({ + palette: { + mode: 'dark', + }, +}) + +const lightTheme = createTheme({ + palette: { + mode: 'light', + }, +}) + +const { defaultAlgorithm, darkAlgorithm } = theme +export const ThemeProvider: FC = ({ children }) => { + const [isDarkTheme, setIsDarkTheme] = useState(false) + + const toggleTheme = () => { + setIsDarkTheme((prevTheme) => !prevTheme) + } + + const contextValue = { + isDarkTheme, + toggleTheme, + } + + return ( + + + {children} + + + ) +} + +export const useTheme = () => { + return useContext(ThemeContext) +} diff --git a/src/layout/header/Header.tsx b/src/layout/header/Header.tsx index ef46195e7..2c6caf1fc 100644 --- a/src/layout/header/Header.tsx +++ b/src/layout/header/Header.tsx @@ -1,15 +1,31 @@ import { Layout } from 'antd' import { MenuOutlined } from '@ant-design/icons' import { useContext } from 'react' -import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext' - +import { LayoutContextInterface, LayoutCtx } from '../LayoutContext' +import { useTheme } from '../ThemeContext' +import darkSunIcon from './darkSunIcon.svg' +import sunIcon from './sunIcon.svg' const { Header } = Layout const MainHeader = () => { const { setDrawerOpen } = useContext(LayoutCtx) + const { isDarkTheme, toggleTheme } = useTheme() return ( -
- setDrawerOpen(true)} /> +
+ setDrawerOpen(true)} className="hideOnDesktop" /> +
 
+
) } diff --git a/src/layout/header/darkSunIcon.svg b/src/layout/header/darkSunIcon.svg new file mode 100644 index 000000000..5fd09a958 --- /dev/null +++ b/src/layout/header/darkSunIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/header/sunIcon.svg b/src/layout/header/sunIcon.svg new file mode 100644 index 000000000..cbf9c3498 --- /dev/null +++ b/src/layout/header/sunIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index 76d430977..f053c0d85 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -2,22 +2,22 @@ import styled from 'styled-components' import SlackIcon from '../../resources/slack-icon.svg' import { useTranslation } from 'react-i18next' import Widget from 'src/shared/Widget' -import { Typography } from 'antd' +import { Space, Typography } from 'antd' import './About.scss' const { Title } = Typography const About = () => { return ( -
- קצת עלינו + + קצת עלינו -
+ ) } diff --git a/src/routes/MainRoute.tsx b/src/routes/MainRoute.tsx index 4ce2ac0b1..9acd17bb9 100644 --- a/src/routes/MainRoute.tsx +++ b/src/routes/MainRoute.tsx @@ -1,7 +1,5 @@ import { useCallback, useEffect } from 'react' -import { ConfigProvider } from 'antd' import 'leaflet/dist/leaflet.css' -import heIL from 'antd/es/locale/he_IL' import { useSearchParams } from 'react-router-dom' import { PageSearchState, SearchContext } from '../model/pageState' import moment from 'moment' @@ -12,25 +10,12 @@ import { CacheProvider } from '@emotion/react' import createCache from '@emotion/cache' import rtlPlugin from 'stylis-plugin-rtl' import 'moment/locale/he' -import { heIL as heILmui } from '@mui/x-date-pickers/locales' -import { ThemeProvider, createTheme } from '@mui/material' import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment' import { LocalizationProvider } from '@mui/x-date-pickers' +import { ThemeProvider } from '../layout/ThemeContext' import { PAGES } from '../routes' import { MainLayout } from '../layout' -const theme = createTheme( - { - direction: 'rtl', - palette: { - primary: { - main: '#5f5bff', - }, - }, - }, - heILmui, -) - // Create rtl cache const cacheRtl = createCache({ key: 'muirtl', @@ -85,13 +70,11 @@ export const MainRoute = () => { return ( - - - - - - - + + + + + ) diff --git a/src/shared/Widget.tsx b/src/shared/Widget.tsx index e319c227a..520632c62 100644 --- a/src/shared/Widget.tsx +++ b/src/shared/Widget.tsx @@ -1,5 +1,7 @@ +import { Card } from 'antd' + const Widget = (props: { children: React.ReactNode }) => { - return
{props.children}
+ return {props.children} } export default Widget