[CAL-3917] Dashboard Theme: system default not working

[hichemfantar]

Issue Summary

The System default theme setting in the appearance settings doesn't work.

Steps to Reproduce

1. go to https://app.cal.com/settings/my-account/appearance
2. if OS theme is dark, set cal.com theme to light, then set it again to system default
3. notice it doesn't change

Actual Results

• system default is light even though OS is dark

Expected Results

• system default should be dark because OS is dark

Technical details

• Browser version: chrome 125, macOS 14.3.1

Evidence

OS is dark:

https://github.com/calcom/cal.com/assets/34947993/c57d778b-37fd-49d0-9a2e-2698866863b4

_CAL-3917

[dosubot[bot]]

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.