6dfc19247e
## What does this PR do? Fixes #10187 See [Tests Done](https://www.loom.com/share/f03e0191b60143d8b45a505042dbfa11) ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How should this be tested? - [x] Configure embed to use `dark` theme and verify that dark theme is shown on event booking page(when user has light theme set). This is failing in main - Additional Tests for embed to avoid any new regression - [x] - Configure "auto" theme using embed API and see it reacts to system theme - [x] - Don't configure any theme and see that "light" theme is shown even when we switch system theme(Because User has configured light theme in App) - Tests outside embed to avoid any new regression - [x] - See that light theme is shown even after switching system theme - [x] - Now, switch the user theme to dark and see that it reflects the change. ## Mandatory Tasks [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { useTheme as useNextTheme } from "next-themes";
|
|
import { useEffect } from "react";
|
|
|
|
import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
|
|
|
|
/**
|
|
* It should be called once per route if you intend to use a theme different from `system` theme. `system` theme is automatically supported using <ThemeProvider />
|
|
* If needed you can also set system theme by passing 'system' as `themeToSet`
|
|
* It handles embed configured theme automatically
|
|
* To just read the values pass `getOnly` as `true` and `themeToSet` as `null`
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
export default function useTheme(themeToSet: "system" | (string & {}) | undefined | null, getOnly = false) {
|
|
const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
|
|
const embedTheme = useEmbedTheme();
|
|
|
|
useEffect(() => {
|
|
// Undefined themeToSet allow the hook to be used where the theme is fetched after calling useTheme hook
|
|
if (getOnly || themeToSet === undefined) {
|
|
return;
|
|
}
|
|
|
|
// Embed theme takes precedence over theme configured in app.
|
|
// If embedTheme isn't set i.e. it's not explicitly configured with a theme, then it would use the theme configured in appearance.
|
|
// If embedTheme is set to "auto" then we consider it as null which then uses system theme.
|
|
const finalThemeToSet = embedTheme ? (embedTheme === "auto" ? "system" : embedTheme) : themeToSet;
|
|
|
|
if (!finalThemeToSet || finalThemeToSet === activeTheme) return;
|
|
|
|
setTheme(finalThemeToSet);
|
|
// We must not add `activeTheme` to the dependency list as it can cause an infinite loop b/w dark and theme switches
|
|
// because there might be another booking page with conflicting theme.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [themeToSet, setTheme, embedTheme]);
|
|
|
|
if (getOnly) {
|
|
return {
|
|
resolvedTheme,
|
|
forcedTheme,
|
|
activeTheme,
|
|
};
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Returns the currently set theme values.
|
|
*/
|
|
export function useGetTheme() {
|
|
const theme = useTheme(null, true);
|
|
if (!theme) {
|
|
throw new Error("useTheme must have a return value here");
|
|
}
|
|
return theme;
|
|
}
|