2022-07-26 08:27:57 +00:00
|
|
|
import { useTheme as useNextTheme } from "next-themes";
|
2023-02-17 11:18:54 +00:00
|
|
|
import { useEffect } from "react";
|
2021-07-09 22:59:21 +00:00
|
|
|
|
2022-05-27 15:37:02 +00:00
|
|
|
import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
|
2023-02-16 22:39:57 +00:00
|
|
|
import type { Maybe } from "@calcom/trpc/server";
|
2021-10-14 19:22:01 +00:00
|
|
|
|
2023-04-17 12:16:54 +00:00
|
|
|
/**
|
|
|
|
* It should be called once per route and only if you want to use app configured theme. System only theme works automatically by using ThemeProvider
|
|
|
|
* Calling it without a theme will just returns the current theme.
|
|
|
|
* It handles embed configured theme as well.
|
|
|
|
*/
|
|
|
|
export default function useTheme(themeToSet?: Maybe<string>) {
|
2023-02-17 11:18:54 +00:00
|
|
|
const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
|
2022-04-08 05:33:24 +00:00
|
|
|
const embedTheme = useEmbedTheme();
|
2022-02-16 15:53:26 +00:00
|
|
|
|
2022-07-26 08:27:57 +00:00
|
|
|
useEffect(() => {
|
2023-04-17 12:16:54 +00:00
|
|
|
// If themeToSet is not provided the purpose is to just return the current the current values
|
|
|
|
if (themeToSet === undefined) return;
|
2021-07-09 22:59:21 +00:00
|
|
|
|
2023-04-17 12:16:54 +00:00
|
|
|
// Embed theme takes precedence over theme configured in app. This allows embeds to be themed differently
|
|
|
|
const finalThemeToSet = embedTheme || themeToSet || "system";
|
|
|
|
|
|
|
|
if (!finalThemeToSet || finalThemeToSet === activeTheme) return;
|
|
|
|
|
|
|
|
setTheme(finalThemeToSet);
|
2023-04-20 11:57:28 +00:00
|
|
|
}, [themeToSet, setTheme, embedTheme, activeTheme]);
|
2023-04-05 18:14:46 +00:00
|
|
|
|
2021-07-09 22:59:21 +00:00
|
|
|
return {
|
2022-07-28 10:50:25 +00:00
|
|
|
resolvedTheme,
|
2022-07-26 08:27:57 +00:00
|
|
|
setTheme,
|
2022-07-28 10:50:25 +00:00
|
|
|
forcedTheme,
|
2023-02-17 11:18:54 +00:00
|
|
|
activeTheme,
|
2021-07-11 19:35:56 +00:00
|
|
|
};
|
|
|
|
}
|