Skip to content

Commit

Permalink
fix: apparence settings is not correctly applied to the dom (#450)
Browse files Browse the repository at this point in the history
**Describe the pull request**
This pull request addresses an issue where appearance settings are not
correctly applied to the DOM. The fix involves refining the process
through which these settings are propagated to the DOM, ensuring that
user-specified appearance configurations are accurately reflected. By
resolving this issue, we enhance the application's responsiveness to
user settings and improve the overall user experience.

**Checklist**

- [x] I have made the modifications or added tests related to my PR
- [x] I have run the tests and linters locally and they pass
- [x] I have added/updated the documentation for my RP
  • Loading branch information
42atomys authored May 27, 2023
1 parent e9db8e9 commit 1a2fee3
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 3 deletions.
6 changes: 4 additions & 2 deletions web/ui/src/contexts/currentUser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,15 @@ export const MeProvider: React.FC<MeProviderProps> = ({
// to avoid a flash of the default theme on page load
// Move it to this hook to prevent duplicated provider with same behaviour.
useEffect(() => {
if (me.me.settings && me.me.settings.theme === Theme.DARK) {
if (me.me.settings.theme === Theme.DARK) {
document.documentElement.classList.add('dark', 'bg-slate-900');
} else if (
(!me.me.settings || me.me.settings.theme === Theme.AUTO) &&
me.me.settings.theme === Theme.AUTO &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
document.documentElement.classList.add('dark', 'bg-slate-900');
} else {
document.documentElement.classList.remove('dark', 'bg-slate-900');
}
}, [me]);

Expand Down
4 changes: 3 additions & 1 deletion web/ui/src/pages/settings/apparence.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ const ApparenceSettingPage: NextPage<PageProps> = () => {
<SelectInput
className="flex-1"
objects={Object.values(ClusterMapAvatarSize)}
selectedValue={settings.clusterMapAvatarSize}
selectedValue={
settings.clusterMapAvatarSize || ClusterMapAvatarSize.AUTO
}
defaultValue={ClusterMapAvatarSize.AUTO}
onChange={(value) =>
updateSettings({
Expand Down

0 comments on commit 1a2fee3

Please sign in to comment.