How do I customise colors (CSS) for the CodePreview section

[aquibbaig]

Pardon my ignorance but how do I customise colors for the <SandpackPreview /> ? Would like it to get white or greyish colors on a dark theme. Any classes provided?
My current CSS rules are:

const SandpackEditorWrapper = styled("div", {
    ".sp-preview-container": {
      background: theme === "light" ? "#fff" : "#151515",
      backdropFilter: "blur(6px)",
    },

    ".sp-layout": {
      borderRadius: "8px",
      border: "1px solid rgba(255, 255, 255, 0.1)",
      boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.1)",

      "@media (min-width: 0px)": {
        position: "relative",
        width: "90vw",
      },

      "@media (min-width: 750px)": {
        width: "100%",
      },

      "@media (min-width: 1200px)": {
        width: "100%",
      },
    },

    ".sp-wrapper": {
      colorScheme: "normal",
    },

    ".sp-cm": {
      padding: "2px 0",
    },
  });

[danilowoz]

Hey @aquibbaig, sorry for my late answer.
If you want to update the preview background, you should set the background color in your style.css that Sandpack consumes. SandpackPreview is an iframe, which means that you can't infer styles or anything else, so you need to apply another internal stylesheet.

<SandpackProvider 
  files={{ "style.css": `body: { background: #151515 }` }} 
  template="react 
/>

I haven't tested it, but it should be something like that

[automationghost]

i have tried this

files={{ "style.css": body: { background: #151515 } }}

but it is not working for me #1224

iam also trying to find out if its possible for the "preview " to use height 100% ... instead of fixed height ?so i want dynamic height ? is that possible ?