fix: scrollbar color on dark mode (#431)

hasadna · Jan 25, 2024 · dfcedf1 · dfcedf1
1 parent 94f7c68
commit dfcedf1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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": "אנא הזן כותרת/סיכום!",