github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/helpers/theme.helper.ts
View File

@ -59,9 +59,8 @@ const calculateShades = (hexValue: string): TShades => {
return shades as TShades; return shades as TShades;
}; };
export const applyTheme = (palette: string, isDarkPalette: boolean) => { export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLElement | null) => {
if (!palette) return; if (!palette) return;
const dom = document?.querySelector<HTMLElement>("[data-theme='custom']");
// palette: [bg, text, primary, sidebarBg, sidebarText] // palette: [bg, text, primary, sidebarBg, sidebarText]
const values: string[] = palette.split(","); const values: string[] = palette.split(",");
values.push(isDarkPalette ? "dark" : "light"); values.push(isDarkPalette ? "dark" : "light");

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

@ -22,7 +22,7 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
const { sidebarCollapsed, toggleSidebar } = useAppTheme(); const { sidebarCollapsed, toggleSidebar } = useAppTheme();
const { data: userProfile } = useUserProfile(); const { data: userProfile } = useUserProfile();
// states // states
const [dom, setDom] = useState<undefined | HTMLElement>(); const [dom, setDom] = useState<HTMLElement | null>(null);
/** /**
* Sidebar collapsed fetching from local storage * 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 * Setting up the theme of the user by fetching it from local storage
*/ */
useEffect(() => { useEffect(() => {
if (!userProfile?.theme?.theme) return;
if (window) setDom(() => window.document?.querySelector<HTMLElement>("[data-theme='custom']") || undefined);
setTheme(userProfile?.theme?.theme || "system"); 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( applyTheme(
userProfile?.theme?.palette !== ",,,," userProfile?.theme?.palette !== ",,,,"
? userProfile?.theme?.palette ? userProfile?.theme?.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5", : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
false false,
dom
); );
else unsetCustomCssVariables(); } else unsetCustomCssVariables();
}, [userProfile, userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]); }, [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(() => { useEffect(() => {
if (!router.query) return; if (!router.query) return;