So I don't think this is going to be a quick fix (IE something that can be coded in a few days and easy to maintain forever).

Normally, we would want to use a css style to override the classes of the playground elements and just replace that with the styling from patternfly. However, Playground uses styled-components, a react library, and compiles the styles into nonsense css class names. So editing the css file is a no go.

There is some basic theme support in playground, but it isn't terribly well documented and a lot of the styles are hard coded in the components. Finally there is a lot of logic embedded in the component we will have to test for and support.

So our options are to do one of the following

• Let the light theme be enough (my suggestion)
• Do the best we can with what themes that are in Playground. I don't particularly like this because we will be duplicating patternly css styles in javascript, and then implementing them half way.
• Extend playground's theming so it can look like patternfly (this is doable, and if we can commit the work back upstream hopefully it will be supported. However this is will be a lot of work and the LaF still won't match patternfly enough).
• Rewrite Playground using patternfly. (Even if we had the time, and manpower we nobody wants to support that)