Example values in Dark mode are hard/impossible to read

[Fox32]

Describe the bug

When using the dark theme, the example values are hard to read. It feels like these color values are not taken from the theme, but are hard coded.

To Reproduce

1. Go to the storybook deployment for the dark mode: https://stoplightio.github.io/json-schema-viewer/?path=/story/jsonschemaviewer--dark
2. Replace the background with a dark color, as it isn't set correctly
3. Observe the example values.

Expected behavior

Example values should be styled base on the current theme.

Additional context

I'm trying to embed the json-schema-viewer into Backstage, but would like to support both light and dark mode. It's a bit difficult right now as mosaic is not public yet, but I could get it to work and understand how theming is configured 😉. I'm also aware that this is in an early state, but I'm already quite satisfied with it, nice work!

Screenshots

Environment (remove any that are not applicable):

• Library version: [e.g. 3.0.0]
• OS: [e.g. Windows 7]
• Browser: [e.g. Chrome 61]
• Platform: [desktop or web]

[Fox32]

The fix would probably touch https://github.com/stoplightio/json-schema-viewer/blob/beta/src/components/shared/Validations.tsx#L189, but I'm not sure which is the right color value to use here.

[marcelltoth]

Hey @Fox32 ! Thanks for pointing out the issue!

We'll be looking into this as soon as we enable dark mode support within our own platform. In the meanwhile if you find a way to fix it, we appreciate any pull requests.

[Fox32]

I think using a base color and applying it with opacity might be handy here. That way it could work with both light and dark mode.

I can't make any promises about creating a PR for it though. Right now I'm stuck at integrating the package as I run into issues with existing CSS in my app.

[marcelltoth]

We are working on that, too.:)

[marbemac]

Pretty sure just need to remove the hardcoded backgroundColor style (relic of v3?) https://github.com/stoplightio/json-schema-viewer/blob/beta/src/components/shared/Validations.tsx#L189 and add sl-canvas-50 class.