New slicemachine 0.2 simulator changing the background to mach with the layout

Developing with Prismic
1

Hi! First post here:)
Just installed the v.0.2 and enabled simulator. It works nicely and i am very happy that I dont have to work with 4th party modules. Although I like storybook alot, its just one more thing that has to work...

My layout has a dark background and my text is then obviously light, then in the simulator I cant see the light elements or text.
Where can i change the styles of the simulator, or even add the styles from my nuxt layout?

Thanks!

2

I tested it out and a solution would be to add the class to the slice simulator page:

<template>
  <SliceSimulator :state="state" #default="props" >
    <SliceZone v-bind="props" class="bg-black"/>
  </SliceSimulator>
</template>

But it dosnt really look nice. It would be awsome if this page also inclueds the layout of the nuxt page:D Possible?

5

Hello @mikmar168

Welcome to the Prismic community, and thanks for posting to us.

I am discussing this with the team for you, and I will come back to you once I have an answer.

Thanks,
Priyanka

6

Hello @mikmar168

Our Slice Machine team has released an update today. You can configure the background of the simulator in many ways now:

  1. by using the new background prop, e.g. <SliceSimulator background="#000000" />.
  2. pass classes to it and apply them using class.
  3. provide any valid CSS value to the background prop, so CSS var should be working.

Let me know if you have other questions.

Thanks,
Priyanka

7

Ooohhh Nice! Then i can pass all the the classes from layout as props also maybe?

I will see more into it.

Thanks for the answer!

8

Hello @mikmar168

Yes, you can pass classes as a prop.

Thanks,
Priyanka