Closed hichemfantar closed 1 month ago
The "System default" theme setting in the cal.com app does not change to dark mode when the OS is set to dark mode because the ThemeProvider
is configured with enableSystem: false
. This setting disables the automatic switching based on the system's color scheme.
return {
storageKey,
forcedTheme,
themeSupport,
nonce: props.nonce,
enableColorScheme: false,
enableSystem: themeSupport !== ThemeSupport.None, // This should be true to enable system theme
key: storageKey,
attribute: "class",
};
Additionally, the useTheme
hook in useTheme.tsx
is designed to handle themes, including the system theme, but it requires proper configuration. If the themeToSet
is not set to "system" or if the embed theme takes precedence, the system theme might not be applied as expected.
export default function useTheme(themeToSet: "system" | (string & {}) | undefined | null, getOnly = false) {
const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
const embedTheme = useEmbedTheme();
useEffect(() => {
if (getOnly || themeToSet === undefined) {
return;
}
const finalThemeToSet = embedTheme ? (embedTheme === "auto" ? "system" : embedTheme) : themeToSet;
if (!finalThemeToSet || finalThemeToSet === activeTheme) return;
setTheme(finalThemeToSet);
}, [themeToSet, setTheme, embedTheme]);
if (getOnly) {
return {
resolvedTheme,
forcedTheme,
activeTheme,
};
}
return;
}
To resolve this issue, ensure that enableSystem
is set to true
in the ThemeProvider
configuration and verify that the useTheme
hook is correctly handling the system theme setting [1][2].
To continue talking to Dosu, mention @dosu.
Issue Summary
The
System default
theme setting in the appearance settings doesn't work.Steps to Reproduce
light
, then set it again tosystem default
Actual Results
system default
islight
even though OS is darkExpected Results
system default
should bedark
because OS is darkTechnical details
Evidence
OS is dark:
https://github.com/calcom/cal.com/assets/34947993/c57d778b-37fd-49d0-9a2e-2698866863b4
CAL-3917