nextjs - 💡(How to fix) Fix Docs: bg color and font both white [3 comments, 4 participants]

TL;DR

Adjust the CSS styles for the 'copy code' button to ensure proper contrast between background and font colors in dark theme.

Guidance

• Verify the CSS classes applied to the 'copy code' button and its container to identify where the white background and font colors are being set.
• Check if there are any existing CSS rules that target the dark theme specifically and adjust them to provide sufficient contrast.
• Inspect the HTML structure of the 'copy code' button to determine if any inline styles or JavaScript-generated styles are overriding the expected CSS rules.
• Consider adding a specific CSS rule to target the 'copy code' button in dark theme, setting the background color to a darker shade and the font color to a lighter shade.

Example

No specific code example can be provided without knowing the exact CSS and HTML structure, but a general approach might involve adding a CSS rule like .dark-theme .copy-code-button { background-color: #333; color: #fff; }.

Notes

The exact fix will depend on the specific CSS and HTML implementation of the 'copy code' button and the dark theme styling. This guidance assumes that the issue is related to CSS styling and not a more complex issue with JavaScript or theme configuration.

Recommendation

Apply a workaround by adding custom CSS to adjust the styles for the 'copy code' button in dark theme, as the root cause seems to be related to styling rather than a version or configuration issue.