fix: Theme state logic to account for non-prefers-color-scheme usage

sandpack-react/src/styles/themeContext.tsx

@@ -62,7 +62,10 @@ const SandpackThemeProvider: React.FC<
   }, [theme, id]);
 
   React.useEffect(() => {
-    if (themeFromProps !== "auto") return;
+    if (themeFromProps !== "auto") {
+      setPreferredTheme(themeFromProps);
+      return;
+    }
 
     const colorSchemeChange = ({ matches }: MediaQueryListEvent) => {
       setPreferredTheme(matches ? "dark" : "light");

sandpack-react/src/themes/Theme.stories.tsx

@@ -1,9 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
+import { useState } from "react";
 
 import { Sandpack } from "../";
 
-import { SANDPACK_THEMES } from ".";
+import { SANDPACK_THEMES, defaultLight, defaultDark } from ".";
 
 const stories = storiesOf("presets/Themes", module);
 
@@ -21,3 +22,28 @@ Object.keys(SANDPACK_THEMES).forEach((themeName) =>
     />
   ))
 );
+
+export const ThemeSwitcher = () => {
+  const [theme, setTheme] = useState("light");
+
+  return (
+    <div>
+      <select onChange={(e) => setTheme(e.target.value)} value={theme}>
+        <option value="light">light</option>
+        <option value="dark">dark</option>
+      </select>
+      <Sandpack
+        options={{
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showNavigator: true,
+          showTabs: true,
+        }}
+        template="react"
+        theme={theme === "light" ? defaultLight : defaultDark}
+      />
+    </div>
+  );
+};
+
+stories.add("theme-switcher", () => <ThemeSwitcher />);