Storybook: How to change the preview section's background based on the theme?

I'm using tailwindcss for styling my app. using the storybook-addon-themes I add dark/light class to the html element of the preview's iframe so my components have different styles based on the theme. But how should I change the preview section's background based on the theme? I can manually (using the button in the toolbar) change the background with the background addon but I want to keep it in sync with the theme.

one possible solution that came to my mind is to add tailwindcss classes (something like "bg-light dark:bg-dark") to the iframe so I can control the background with the CSS classes. besides the fact that I don't know how to do that, I don't like it. is there a better solution?

my preivew.js file:

export const parameters = {
  ...
  themes: {
    target: "html",
    default: "Dark",
    list: [
      {
        name: "Dark",
        class: ["dark"],
        color: "#000",
      },
      { name: "Light", class: ["light"], color: "#fff" },
    ],
  },
};