Revert color-scheme for embed (#8229)

apps/web/lib/app-providers.tsx

@@ -84,14 +84,14 @@ const CalcomThemeProvider = (
   // One such example is our Embeds Demo and Testing page at http://localhost:3100
   // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
   const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
+  const isEmbedMode = typeof embedNamespace === "string";
   // If embedNamespace is not defined, we use the default storageKey -> The default storage key changs based on if we force light mode or not
   // This is done to ensure that the default theme is light when we force light mode and as soon as you navigate to a page that is dark we dont need a hard refresh to change
-  const storageKey =
-    typeof embedNamespace === "string"
-      ? `embed-theme-${embedNamespace}`
-      : !isThemeSupported
-      ? "cal-light"
-      : "theme";
+  const storageKey = isEmbedMode
+    ? `embed-theme-${embedNamespace}`
+    : !isThemeSupported
+    ? "cal-light"
+    : "theme";
 
   return (
     <ThemeProvider
@@ -101,6 +101,17 @@ const CalcomThemeProvider = (
       forcedTheme={forcedTheme}
       storageKey={storageKey}
       attribute="class">
+      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
+      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
+      {typeof window !== "undefined" && !isEmbedMode && (
+        <style jsx global>
+          {`
+            .dark {
+              color-scheme: dark;
+            }
+          `}
+        </style>
+      )}
       {props.children}
     </ThemeProvider>
   );
@@ -121,7 +132,6 @@ const AppProviders = (props: AppPropsWithChildren) => {
       <SessionProvider session={session || undefined}>
         <CustomI18nextProvider {...props}>
           <TooltipProvider>
-            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
             <CalcomThemeProvider
               nonce={props.pageProps.nonce}
               isThemeSupported={props.Component.isThemeSupported}>

apps/web/styles/globals.css

@@ -44,8 +44,6 @@
   --cal-brand-text: white;
 }
 .dark {
-  color-scheme: dark;
-
   /* background */
 
   --cal-bg-emphasis: #2b2b2b;