fix(theme): set color-scheme css property in theme context (#491)

codesandbox · Jun 6, 2022 · 35342a3 · 35342a3
1 parent 163c66b
commit 35342a3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/sandpack-react/src/contexts/themeContext.tsx b/sandpack-react/src/contexts/themeContext.tsx
@@ -11,6 +11,7 @@ import { standardizeTheme } from "../styles";
 import { defaultLight } from "../themes";
 import type { SandpackTheme, SandpackThemeProp } from "../types";
 import { classNames } from "../utils/classNames";
+import { isDarkColor } from "../utils/stringUtils";
 
 const wrapperClassName = css({
   all: "initial",
@@ -22,6 +23,13 @@ const wrapperClassName = css({
   WebkitTapHighlightColor: "transparent",
   WebkitFontSmoothing: "subpixel-antialiased",
 
+  variants: {
+    variant: {
+      dark: { colorScheme: "dark" },
+      light: { colorScheme: "light" },
+    },
+  },
+
   "@media screen and (min-resolution: 2dppx)": {
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale",
@@ -57,13 +65,15 @@ const SandpackThemeProvider: React.FC<
     return createTheme(id, standardizeStitchesTheme(theme));
   }, [theme, id]);
 
+  const isDarkTheme = isDarkColor(theme.colors.surface1);
+
   return (
     <SandpackThemeContext.Provider value={{ theme, id }}>
       <div
         className={classNames(
           c("wrapper"),
           themeClassName.toString(),
-          wrapperClassName,
+          wrapperClassName({ variant: isDarkTheme ? "dark" : "light" }),
           className
         )}
         {...props}

diff --git a/sandpack-react/src/presets/Sandpack.test.tsx b/sandpack-react/src/presets/Sandpack.test.tsx
@@ -33,7 +33,7 @@ describe("getSandpackCssText", () => {
       </SandpackProvider>
     );
 
-    expect(getSandpackCssText().length).toBe(3456);
+    expect(getSandpackCssText().length).toBe(3564);
     expect(getSandpackCssText()).not.toContain(componentClassName);
   });