feat: add support for dark & light themes

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<PropsWithChildren> = ({ children }) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false)
+
+  const toggleTheme = () => {
+    setIsDarkTheme((prevTheme) => !prevTheme)
+  }
+
+  const contextValue = {
+    isDarkTheme,
+    toggleTheme,
+  }
+
+  return (
+    <ConfigProvider
+      direction="rtl"
+      locale={heIL}
+      theme={{
+        algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
+      }}>
+      <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+        <ThemeContext.Provider value={contextValue}> {children} </ThemeContext.Provider>
+      </MuiThemeProvider>
+    </ConfigProvider>
+  )
+}
+
+export const useTheme = () => {
+  return useContext(ThemeContext)
+}

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<LayoutContextInterface>(LayoutCtx)
+  const { isDarkTheme, toggleTheme } = useTheme()
   return (
-    <Header style={{ background: 'white' }} className="hideOnDesktop">
-      <MenuOutlined onClick={() => setDrawerOpen(true)} />
+    <Header
+      style={{
+        background: isDarkTheme ? '#141414' : '#fff',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      }}
+      className="_hideOnDesktop">
+      <MenuOutlined onClick={() => setDrawerOpen(true)} className="hideOnDesktop" />
+      <div style={{ flex: 1 }}>&nbsp;</div>
+      <button
+        onClick={toggleTheme}
+        style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
+        <img src={isDarkTheme ? sunIcon : darkSunIcon} alt="sun icon" style={{ height: '30px' }} />
+      </button>
     </Header>
   )
 }

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 (
     <AboutStyle>
-      <div className="about-center-container">
-        <Title level={3}> קצת עלינו</Title>
+      <Space direction="vertical" size="middle">
+        <Title level={3}>קצת עלינו</Title>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
         <License />
         <Questions />
         <Funding />
-      </div>
+      </Space>
     </AboutStyle>
   )
 }

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 (
     <SearchContext.Provider value={{ search, setSearch: safeSetSearch }}>
       <CacheProvider value={cacheRtl}>
-        <ThemeProvider theme={theme}>
-          <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
-            <ConfigProvider direction="rtl" locale={heIL}>
-              <MainLayout />
-            </ConfigProvider>
-          </LocalizationProvider>
-        </ThemeProvider>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
+          <ThemeProvider>
+            <MainLayout />
+          </ThemeProvider>
+        </LocalizationProvider>
       </CacheProvider>
     </SearchContext.Provider>
   )

src/shared/Widget.tsx

@@ -1,5 +1,7 @@
+import { Card } from 'antd'
+
 const Widget = (props: { children: React.ReactNode }) => {
-  return <section className="widget">{props.children}</section>
+  return <Card>{props.children}</Card>
 }
 
 export default Widget