redocusaurus
redocusaurus copied to clipboard
rohit-gohri
Support for overriding table row colors?
Hello Rohit, thank you for making this great plugin! I was wondering if there's a way to change the table row colors. I'm currently seeing an issue where they're rendering like this in dark mode. I've tried several ways, but now stumped.
We're also seeing a code block color contrast issue, in light mode only:
Sure thing! Here you go, and many thanks for the quick response.
Hi @rohit-gohri , I'm still working on this one and feel like I'm getting closer! It may be something on our end, but could I run these ideas past you? cc @swiatekm-sumo
Our issues are the table row poor color contrast (in dark mode) and code snippet poor color contrast (in light mode). For your reference, here's our redocusaurus page and Redocly page .
- Is it possible to import CSS directly into a yaml spec file?
- Does redocusaurus accept override CSS code or entire CSS files in docusaurus.config.js?
Hey, thank you for taking the time to get to the bottom of this issue.
If you have fixed this with some custom css then I would be happy to merge the changes into the package itself (as long as it's not specific to your spec file). You can add your changes here and open a PR: https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css
As for your questions:
Is it possible to import CSS directly into a yaml spec file? Does redocusaurus accept override CSS code or entire CSS files in docusaurus.config.js?
The answer would be no to both, but redocusaurus is just React components and some config. So you could ideally just import the React component and use it directly like in this example: https://github.com/rohit-gohri/redocusaurus/blob/main/website/src/pages/examples/custom-page/index.jsx . And import the custom css in that file.
Hi @rohit-gohri , I came back to this (almost a year later) and was able to resolve the issue using a custom class in our CSS!
.redocusaurus table > tbody > tr {
border: 1px solid #F1F1F1;
background-color: transparent;
color: #000000;
}
Do you think this would work across the board for all users, they want to override? I've just picked plain colors here, but other users can choose what they want.
That looks good to me! Thanks for posting it back
I've just picked plain colors here
Maybe we can use css variables from the infima theme that docusaurus uses - https://github.com/facebookincubator/infima/blob/main/packages/core/styles/common/variables.pcss rather than hardcoded values?
Oh good call. This worked for me!
.redocusaurus table > tbody > tr {
background-color: var(--ifm-table-cell-color) !important;
}
Awesome! It'll be great if you can open a PR for it, otherwise I'll add it whenever I get the time to work on this