Dark mode or override for background color

[digeverything]

I love this new option, Storybook has caused me problems in the past. Looking forward to you guys building out this simulator.

Is your feature request related to a problem? Please describe.

I'm developing a website in dark mode (the majority of the background is black, the text is white). When previewing slices in Slice Simulator the background is hardcoded to white, so my slice does not look correct.

Describe the solution you'd like

Either a dark mode toggle alongside the current device viewport choices. Or a way of overriding the background color as a parameter on the component itself.

Describe alternatives you've considered

Additional context

I am using React.

[lihbr]

Hey there, thank you so much for your feedback/contribution!

That's dully noted~

In the meantime you can update your the sliceZone prop on your simulator to add that style:

import { SliceSimulator } from "@prismicio/slice-simulator-react";
import SliceZone from "next-slicezone";

import state from "../.slicemachine/libraries-state.json";
import resolver from  "../sm-resolver";

const SliceSimulatorPage = () => (<SliceSimulator
    sliceZone={({ slices }) => {
        return (<div style={{ background: "#000000" }}>
            <SliceZone slices={slices} resolver={resolver} />
        </div>);
    }}
    state={state}
/>);

export default SliceSimulatorPage;

[lihbr]

Hey there, just released a new version, the React simulator now supports new background and className props. The background prop accepts any CSS value so you're able to use CSS var in it, the className prop comes here to support utility-based CSS frameworks (like TailwindCSS), thanks!

Changelog: https://github.com/prismicio/slice-simulator/blob/master/packages/react/CHANGELOG.md#013-2022-01-26

The above example can still be used as an escape hatch for edge cases (could be helpful to render a "dark/light mode" switch above the component perhaps)