Theme not applied [v3.0.0]

[areddon]

When supplying the theme to the LiveProvider, the styles it contains are incorrectly disregarded.

See the following line.

props.className is coming in as undefined, while _style object contains theme.plain and therefore the expression will be true, yielding {} when you want _style.

[jpdriver]

hey @areddon -- thanks for opening this issue! we're not aware of any issues passing theme down 🤔

it's covered in one of our StoryBook stories (which passes in the default theme here)

are you able to provide an example reproduction of what you're seeing? thanks!

[oliviadawd]

I've noticed this as well when updating react-live from 2.4.1 to the latest (3.1.1). I tried passing the vsDark theme which worked in v2, but now it looks like this:

vsdark theme on v2

vsdark theme on v3

it looks like the background color and the font-family isn't getting applied properly but the text colors look correct to me!

[GilmarLira]

Our prism-react-renderer theme object is also not rendering correctly, after upgrading from 2.4.1 to 3.1.1. To be specific, the issues seems limited to background color not propagating.

theme.js

var theme = {
  plain: {
    backgroundColor: "#1f2a36"
  }
  ...
}

Before ([email protected])

After ([email protected])

[GilmarLira]

hey @areddon -- thanks for opening this issue! we're not aware of any issues passing theme down 🤔

it's covered in one of our StoryBook stories (which passes in the default theme here)

are you able to provide an example reproduction of what you're seeing? thanks!

@jpdriver, your StoryBook uses a styled Editor, which is defining a background here. It is therefore not really testing the backgroundColor coming from the theme.

That is likely obscuring the issue @oliviadawd and myself are seeing.

[GilmarLira]

Changing this line to use LiveEditor instead will reveal the problem: https://github.com/FormidableLabs/react-live/blob/5123cfd12de4cfafa7c65e59a967927a27eaca70/stories/Live.js#L208

[ryan-roemer]

Confirmed with following diff in default live example:

diff --git a/stories/Live.js b/stories/Live.js
index d29520b..29350de 100644
--- a/stories/Live.js
+++ b/stories/Live.js
@@ -226,6 +226,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
   ...defaultControls,
   code: code,
+  theme: theme,
 };
 
 export const FunctionExample = StyledPreviewTemplate.bind({});

Setting theme.plain.color does work, but setting theme.plain.backgroundColor does not.

[cjseattle]

Thanks for fixing this @ryan-roemer! I didn't realize it was fixed until I read through the releases, do you mind closing the issue?