Regression: Example header less readable color in light mode

[rohit-gohri]

Regression: Example header less readable color in light mode

[mfaux]

FYI, this bug still occurs if the operation does not have operationId declared in the OpenAPI file.

For example, given this operation...

paths:
  /products:
    get:

...Redocusaurus renders this HTML:

Since the div is missing an id prefixed with operation, the CSS selector fails to match:

p.s. thank you for your work on this project!

[ArtFlag]

I've open this issue to request some classes to help style the right pane more easily.

[MichielDeMey]

@rohit-gohri Done, PR is up: #112

[rohit-gohri]

Thanks for reporting this! Probably caused by #60 I think

[inacho]

Removing the following styles fixes the issue:

.redocusaurus h2,
.redocusaurus h3,
.redocusaurus h4 {
  color: var(--ifm-font-color-base);
}

@rohit-gohri Do you think it's ok to completely remove those styles?

[rohit-gohri]

Probably not, they are required in the main content I think. I think we need to invert the color for the right sidebar as that always has a dark bg.

[MichielDeMey]

Currently in the same boat as @mfaux, we don't have any operationId specified for any API routes.

[MichielDeMey]

Currently fixed the sidebar header colors (without the need for operationIds) using the following CSS override for Redocusaurus v0.5.0.

html:not([data-theme="dark"])
  .redocusaurus
  .redoc-wrap
  .api-content
  > div
  > div:nth-child(1)
  > div:nth-child(2)
  h3 {
  color: var(--ifm-font-color-base-inverse);
}

[rohit-gohri]

Thanks @MichielDeMey! It would be great if you can open a PR with the fix, this is the file with the style overrides: https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css#L29

I would be happy to merge it and cut a release with the fix