Closed digeverything closed 2 years ago
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;
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)
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.