feat: improve system color scheme support and documentation (#1050)

* feat: Added auto mode to themeContext

Added auto mode to themeContext and setPreferredTheme

* feat: Add 'auto' option to theme

Added 'auto' option to DevToolsTheme and themeMode

sandpack-react/src/components/ReactDevTools/index.tsx

@@ -9,7 +9,7 @@ const devToolClassName = css({
   width: "100%",
 });
 
-type DevToolsTheme = "dark" | "light";
+type DevToolsTheme = "dark" | "light" | "auto";
 
 export const SandpackReactDevTools = ({
   clientId,

sandpack-react/src/hooks/useSandpackTheme.ts

@@ -9,7 +9,7 @@ import type { SandpackTheme } from "../types";
 export const useSandpackTheme = (): {
   theme: SandpackTheme;
   themeId: string;
-  themeMode: "dark" | "light";
+  themeMode: "dark" | "light" | "auto";
 } => {
   const { theme, id, mode } = React.useContext(SandpackThemeContext);
   return { theme, themeId: id, themeMode: mode };

sandpack-react/src/styles/themeContext.tsx

@@ -35,7 +35,7 @@ const wrapperClassName = css({
 const SandpackThemeContext = React.createContext<{
   theme: SandpackTheme;
   id: string;
-  mode: "dark" | "light";
+  mode: "dark" | "light" | "auto";
 }>({
   theme: defaultLight,
   id: "light",
@@ -51,13 +51,34 @@ const SandpackThemeProvider: React.FC<
     children?: React.ReactNode;
   }
 > = ({ theme: themeFromProps, children, className, ...props }) => {
-  const { theme, id, mode } = standardizeTheme(themeFromProps);
+  const [prefferedTheme, setPreferredTheme] = React.useState<
+    SandpackThemeProp | undefined
+  >(themeFromProps);
+  const { theme, id, mode } = standardizeTheme(prefferedTheme);
   const classNames = useClassNames();
 
   const themeClassName = React.useMemo(() => {
     return createTheme(id, standardizeStitchesTheme(theme));
   }, [theme, id]);
 
+  React.useEffect(() => {
+    if (themeFromProps !== "auto") return;
+
+    const colorSchemeChange = ({ matches }: MediaQueryListEvent) => {
+      setPreferredTheme(matches ? "dark" : "light");
+    };
+
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", colorSchemeChange);
+
+    return () => {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", colorSchemeChange);
+    };
+  }, [themeFromProps]);
+
   return (
     <SandpackThemeContext.Provider value={{ theme, id, mode }}>
       <div

website/docs/src/components/Themes.jsx

@@ -27,13 +27,22 @@ export default function Themes() {
   };
 
   const predefinedThemes = ["auto", "dark", "light"].includes(current);
-  const codeBlock = predefinedThemes
-    ? `// Predefined theme
+  const codeBlock = (() => {
+    if (current === "auto") {
+      return `// System color scheme (light or dark)
+      
+<Sandpack theme="${current}" />`;
+    }
+
+    if (predefinedThemes)
+      return `// Predefined theme
     
-<Sandpack theme="${current}" />`
-    : `import { ${current} } from "@codesandbox/sandpack-themes";
+<Sandpack theme="${current}" />`;
 
+    return `import { ${current} } from "@codesandbox/sandpack-themes";
+    
 <Sandpack theme={${current}} />;`;
+  })();
 
   return (
     <div>