binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: update theme post sign-in (#4586)

Browse source
This commit is contained in:
Aaryan Khandelwal 2024-05-24 20:12:40 +05:30 • committed by GitHub
parent 55148ab3f7
commit 99e3097122
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/lib/wrappers/store-wrapper.tsx
View file

@ -22,7 +22,7 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
const { data: userProfile } = useUserProfile();
// states
const [dom, setDom] = useState<undefined | HTMLElement>();
const [dom, setDom] = useState<HTMLElement | null>(null);
/**
* Sidebar collapsed fetching from local storage
@ -38,19 +38,40 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
* Setting up the theme of the user by fetching it from local storage
*/
useEffect(() => {
if (!userProfile?.theme?.theme) return;
if (window) setDom(() => window.document?.querySelector<HTMLElement>("[data-theme='custom']") || undefined);
setTheme(userProfile?.theme?.theme || "system");
if (userProfile?.theme?.theme === "custom" && userProfile?.theme?.palette && dom)
if (!userProfile?.theme?.theme) return;
if (userProfile?.theme?.theme === "custom" && userProfile?.theme?.palette) {
applyTheme(
userProfile?.theme?.palette !== ",,,,"
? userProfile?.theme?.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
false
false,
dom
);
else unsetCustomCssVariables();
}, [userProfile, userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]);
} else unsetCustomCssVariables();
}, [userProfile, userProfile?.theme, userProfile?.theme?.palette, setTheme, dom]);
useEffect(() => {
if (dom) return;
const observer = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if (mutation.type === "childList") {
const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
if (customThemeElement) {
setDom(customThemeElement);
observer.disconnect();
break;
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
return () => observer.disconnect();
}, [dom]);
useEffect(() => {
if (!router.query) return;