thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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;
};
export const applyTheme = (palette: string, isDarkPalette: boolean) => {
export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLElement | null) => {
if (!palette) return;
const dom = document?.querySelector<HTMLElement>("[data-theme='custom']");
// palette: [bg, text, primary, sidebarBg, sidebarText]
const values: string[] = palette.split(",");
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 { 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;