Dropdown Code block Has Contrast Issue in Dark Mode

[Snivio]

In the Dark Mode Redeadin, the Text Inside the code block Becomes Difficult.

As there is no direct css selector available for the fix.

Temporary Fix: I have used the class name as I can see that it is static for that block .

[data-theme='dark'] .redocusaurus .api-content .sc-jQHtVU {
  background-color: transparent;
}

Is there any known workaround for this issue?

Thank you!

[rohit-gohri]

Your temporary fix is the solution if you can make the selector not use css-in-js class names. Feel free to open a PR adding the style override here - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css

[Snivio]

I was trying to avoid the css-in-js classes but the div position seems to be dynamic and there isn't any other form of selector I can use, cant use the nth,not,has .. etc.

[Snivio]

The problem seems to appear from

https://github.com/rohit-gohri/redocusaurus/blob/fd611cfc37fff4cef53c8cb919c63512171467e8/packages/docusaurus-theme-redoc/src/redocData.ts#L98

This line here is causing the issue i have tried changing the color and running the redoc code seems to have fixed the issue.

The patch also fixed the below issue

[Snivio]

PR: https://github.com/rohit-gohri/redocusaurus/pull/232

[Fiahblade]

Any update on this?