IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-06 14:13:06 -06:00
Code Issues Packages Projects Releases Wiki Activity

Optimise logic used for OS theme syncing. #5932

Browse Source
This commit is contained in:
Yogesh Mahajan 2024-06-20 11:05:47 +05:30 committed by GitHub
parent 2b45a1f7d5
commit fedbe550db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/pgadmin/static/js/Theme/index.jsx
View File

@ -774,7 +774,6 @@ function getFinalTheme(baseTheme) {
export default function Theme({children}) {
const prefStore = usePreferences();
const [theme, setTheme] = useState(prefStore.getPreferencesForModule('misc')?.theme);
const [selectedMode, setSelectedMode] = useState(prefStore.getPreferencesForModule('misc')?.theme || 'light');
const themeObj = useMemo(()=>{
let baseTheme = getLightTheme(basicSettings);
@ -789,29 +788,26 @@ export default function Theme({children}) {
return getFinalTheme(baseTheme);
}, [theme]);
useEffect(() => usePreferences.subscribe(
state => {
setSelectedMode(state.getPreferencesForModule('misc').theme);
setTheme(state.getPreferencesForModule('misc').theme);
}),[theme]);
useEffect(() => {
if (selectedMode !== 'system') {
setTheme(selectedMode);
const selectedTheme = prefStore.getPreferencesForModule('misc').theme;
if(theme && theme === selectedTheme) {
return;
}else{
if (selectedTheme !== 'system') {
setTheme(selectedTheme);
return;
}
const isSystemInDarkMode = matchMedia('(prefers-color-scheme: dark)');
setTheme(isSystemInDarkMode.matches ? 'dark' : 'light');
const listener = (event) => {
setTheme(event.matches ? 'dark' : 'light');
};
isSystemInDarkMode.addEventListener('change',listener);
return () => {
isSystemInDarkMode.removeEventListener('change',listener);
};
}
const isSystemInDarkMode = matchMedia('(prefers-color-scheme: dark)');
setTheme(isSystemInDarkMode.matches ? 'dark' : 'light');
const listener = (event) => {
setTheme(event.matches ? 'dark' : 'light');
};
isSystemInDarkMode.addEventListener('change',listener);
return () => {
isSystemInDarkMode.removeEventListener('change',listener);
};
},[selectedMode]);
},[prefStore]);
return (
<ThemeProvider theme={themeObj}>