Docz: Custom background for the playground

[alvinometric]

Hi, thanks for your work on Docz, I'm giving it a try and it's fantastic! 🎉

How would one go about changing the background of the preview in the <Playground> for _only one_ component ? It doesn't look like it's possible at the time of writing.

Description

I know you can create a custom theme for the entire Docz site, but in our case it's only a specific subset of components that don't work well on a white background, with the vast majority looking great.

It would be great if we could just pass in a CSS colour as a property of the playground that would only affect that specific instance.

Thanks,
Alvin

[kikorb]

Hi @alvinsight

We did run into a similar problem. For now we do:

<Playground>
  <div style={{ backgroundColor: "#eeeeee", margin: '-2em', padding: '2em' }}>
    <Button handleClick={ () => alert('Working') } >
      Accept
    </Button>
  </div>
</Playground>

[kikorb]

You can pass style to PlayGround also:

<Playground style={{ backgroundColor: "#eee", margin: '-2em', padding: '2em' }}>
  <Button handleClick={ () => alert('Working') } >
    Accept
  </Button>
</Playground>

But it leaves some paddind on the right. Give it a try and let me know, the div nails it for me

[kikorb]

I did recheck and the width is the problem. This works great:

<Playground style={{ backgroundColor: "#eee", margin: '-2em', padding: '2em', width: 'auto' }}>
  <Button handleClick={ () => alert('Working') } >
    Accept
  </Button>
</Playground>

[danielberndt]

Note that there's a media-query which sets the the padding to 1.5em if the viewport is smaller than 420px.

[thebergamo]

What about having a toggle for some kind of black and white theme in this situations? In some cases you can set what should be the default, but in other you can allow user to select it. @pedronauck what do you think?

[nicholasess]

@thebergamo I liked it, Do you send to roadmap as a feature?

http://feedback.docz.site/

Thanks man

[thebergamo]

Will do it. Maybe I can open a PR as well sooner.

[nicholasess]

@thebergamo nice man 🚀

[pedronauck]

Fixed on release v0.12.10 ✅

[corysimmons]

style doesn't seem to work on <Playground> anymore, and I can't wrap playground in a <div>. Seems the only way to style is within playground, which means people hitting the clipboard btn will get the wrapping element/styles as well. :(

[sanderdsz]

style doesn't seem to work on <Playground> anymore, and I can't wrap playground in a <div>. Seems the only way to style is within playground, which means people hitting the clipboard btn will get the wrapping element/styles as well. :(

I can confirm this, my inline styles into Playground component isn't working anymore.

[wenche]

The <Playground> component uses some colour codes from theme-ui config, as far as I can see for the background and border.

colors: {
    playground: {
        bg: 'white',
        border: 'rgb(220, 220, 220)',
    },
}

But this only affects the upper part of the component, the lower part with the live editor has it's bg style inside the component.

I would love to have a consistent way to change the look of the <Playground>. As it is now, the live editor background color doesn't look good with the rest of our theme and it will also be impossible to add a proper dark theme for our docs.