Using media queries in decorators

I have the following decorator in my stories:

export default {
    title: 'Components/Button',
    decorators: [storyFn => <div style={{ backgroundColor: 'black', padding: '24px' }}>{storyFn()}</div>],
};

This is because the elements support dark mode out of the box so need a black background when displayed in the Docs…

However I only want this when in Dark Mode…

So I need something like:

export default {
    title: 'Components/Button',
    decorators: [storyFn => <div style={{ @media(prefers-color-scheme: dark) { backgroundColor: 'black', } padding: '24px' }}>{storyFn()}</div>],
};

But it doesn’t like that syntax (obviously)… how can you add media queries into the decorator?

[iamdriz]

😬 pretty please? ❤️

[Bowriverstudio]

Did you manage to solve this issue?