From dfcedf121ef824598d0f5258219211652f798342 Mon Sep 17 00:00:00 2001
From: Yahav Sofer <65678438+YahavSofer@users.noreply.github.com>
Date: Thu, 25 Jan 2024 06:18:06 +0200
Subject: [PATCH] fix: scrollbar color on dark mode (#431)

---
 src/layout/ThemeContext.tsx             | 5 ++++-
 src/layout/header/ToggleThemeButton.tsx | 7 +++++++
 src/locale/en.json                      | 2 ++
 src/locale/he.json                      | 2 ++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/layout/ThemeContext.tsx b/src/layout/ThemeContext.tsx
index 42854bbd..6e59afd7 100644
--- a/src/layout/ThemeContext.tsx
+++ b/src/layout/ThemeContext.tsx
@@ -1,6 +1,7 @@
 // ThemeContext.js
 import React, { FC, PropsWithChildren, createContext, useContext, useState } from 'react'
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
+import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'
 import { ConfigProvider, theme } from 'antd'
 import heIL from 'antd/es/locale/he_IL'
 import { useTranslation } from 'react-i18next'
@@ -44,7 +45,9 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
         algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
       }}>
       <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
-        <ThemeContext.Provider value={contextValue}> {children} </ThemeContext.Provider>
+        <ScopedCssBaseline enableColorScheme>
+          <ThemeContext.Provider value={contextValue}> {children} </ThemeContext.Provider>
+        </ScopedCssBaseline>
       </MuiThemeProvider>
     </ConfigProvider>
   )
diff --git a/src/layout/header/ToggleThemeButton.tsx b/src/layout/header/ToggleThemeButton.tsx
index 8dd4c849..d62bfbb6 100644
--- a/src/layout/header/ToggleThemeButton.tsx
+++ b/src/layout/header/ToggleThemeButton.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { BulbFilled, BulbOutlined } from '@ant-design/icons'
 
 interface ToggleThemeButtonProps {
@@ -7,10 +8,16 @@ interface ToggleThemeButtonProps {
 }
 
 const ToggleThemeButton: React.FC<ToggleThemeButtonProps> = ({ toggleTheme, isDarkTheme }) => {
+  const { t } = useTranslation()
+
+  const tooltip_title = isDarkTheme ? t('light_mode_tooltip') : t('dark_mode_tooltip')
+
   return (
     <button
       className="theme-icon"
       onClick={toggleTheme}
+      aria-label={tooltip_title}
+      title={tooltip_title}
       style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
       {isDarkTheme ? (
         <BulbOutlined style={{ color: '#fff', fontSize: '1.5em' }} />
diff --git a/src/locale/en.json b/src/locale/en.json
index 401a012f..e57880c4 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -74,6 +74,8 @@
   "migdal_company": "\"A tower in the community\"",
   "and_smaller_donors": "And other small contributions from my friends and fans of the workshop.",
   "github_link": "Go to GitHub",
+  "dark_mode_tooltip": "Move to Dark mode",
+  "light_mode_tooltip": "Move to Light mode",
   "Change Language": "שנה שפה",
   "bug_title": "Title/Summary",
   "bug_title_message": "Please enter a title/summary!",
diff --git a/src/locale/he.json b/src/locale/he.json
index 826d981b..1a7f8013 100644
--- a/src/locale/he.json
+++ b/src/locale/he.json
@@ -74,6 +74,8 @@
   "and_smaller_donors": "ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.",
   "gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
   "github_link": "למעבר אל GitHub",
+  "dark_mode_tooltip": "עבור למצב חשוך",
+  "light_mode_tooltip": "עבור למצב בהיר",
   "Change Language": "Change Language",
   "bug_title": "כותרת/סיכום",
   "bug_title_message": "אנא הזן כותרת/סיכום!",