JSONSchemaViewer colors palette override

[manuelscurti]

Hi there! thanks for this wonderful plugin :)

Any hint on how to customize the colors used by the JSONSchemaViewer React component and override the ones given by docusaurus?

thanks!

[jy95]

Hello @manuelscurti, thanks ;)

Good question. I didn't tried this yet - would be curious about it.
Some hints could be :

• https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima
• https://infima.dev/
• https://infima.dev/docs/utilities/colors

The plugin uses at least the following things from Docusaurus color palette :

• classes alert alert--info for the collapse component ( https://infima.dev/docs/components/alert#info )
• --ifm-color-primary for the text
• --ifm-background-color for the background
• --ifm-menu-color-background-active for hovering
• --ifm-color-secondary-darkest for constant
• --ifm-color-danger for required
• --ifm-color-primary-darker for writeOnly
• --ifm-color-info-darker for readOnly
• --ifm-color-warning for deprecated

Maybe start with the Global styles approach - the documentation website has a custom.css you can play with it . I have a Netlify set up as it is quite convenient to see visual changes in MR

[manuelscurti]

thanks for your answer. However, my docusaurus site already has its own theme (using the custom.css approach you mentioned) but for a specific page I would like the JSONSchemaViewer to have its own background color that is different from the one coming from Docusaurus theme. don't know if I made myself clear 👀

[jy95]

@manuelscurti Thanks for the clarification, I thought it wasn't the case yet.
I will publish the 1.12.0 version where you can put whatever className (by default, it will be json-schema-viewer ).

With CSS Specificity, you can override the colors to your liking. I guess something like this could work :

/* "jsv-styles.module.css" for example*/
.json-schema-viewer {
   :root {
      --ifm-color-primary: #25c2a0;
      --ifm-code-font-size: 95%;
   }
}

For the way to add it to your website, either include the css file (with customCss) or using a wrapper class could do the job.

Of course, I would appreciate an real world example that I can put in 🛠️ Customizations showcases
- would be handy for the future😉

[manuelscurti]

awesome! thanks ❤️