fix: system default theme for dashboard and booking page (#15291)

* fix: system default theme

* update

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: unknown <adhabal2002@gmail.com>

apps/web/pages/settings/my-account/appearance.tsx

@@ -197,7 +197,7 @@ const AppearanceView = ({
         form={userAppThemeFormMethods}
         handleSubmit={(values) => {
           mutation.mutate({
-            appTheme: values.appTheme ?? null,
+            appTheme: values.appTheme === "" ? null : values.appTheme,
           });
         }}>
         <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">
@@ -249,7 +249,7 @@ const AppearanceView = ({
           mutation.mutate({
             // Radio values don't support null as values, therefore we convert an empty string
             // back to null here.
-            theme: values.theme ?? null,
+            theme: values.theme === "" ? null : values.theme,
           });
         }}>
         <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">

packages/features/ee/organizations/pages/settings/appearance.tsx

@@ -80,7 +80,7 @@ const OrgAppearanceView = ({
         form={themeForm}
         handleSubmit={(value) => {
           mutation.mutate({
-            theme: value.theme ?? null,
+            theme: value.theme === "" ? null : value.theme,
           });
         }}>
         <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">

packages/features/ee/teams/pages/team-appearance-view.tsx

@@ -92,7 +92,7 @@ const ProfileView = ({ team }: ProfileViewProps) => {
             handleSubmit={(values) => {
               mutation.mutate({
                 id: team.id,
-                theme: values.theme || null,
+                theme: values.theme === "" ? null : values.theme,
               });
             }}>
             <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">

packages/lib/hooks/useTheme.tsx

@@ -11,6 +11,7 @@ import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default function useTheme(themeToSet: "system" | (string & {}) | undefined | null, getOnly = false) {
+  themeToSet = themeToSet ? themeToSet : "system";
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();