Toggling dark mode on Spring.io makes widget text content unreadable due to extremely low contrast ratio (a11y)

[tannerdolby]

What's The Problem?

Accessibility concern for "Get the Code" text in right sidebar widgets when toggling dark mode. When the sidebar widget containing a link to the GitHub repo gets updated, the parent container <div class="right-pane-widget--container desktop-only"> background isn't updated to inherit from body.dark and instead keeps its light background.

p.s. I wasn't sure if this repo was the correct place to raise an issue regarding the docs site, my apologies if the issue needs to be transferred.

Steps To Reproduce

1. Navigate to https://spring.io/guides/gs/consuming-rest/
2. Toggle the dark mode
3. See right sidebar widget text "Get the Code" become very unreadable due to very low contrast ratio (white text on light background)

Screenshots

Accessibility Concern with contrast ratio

Solution

Select the widget container and update its background to use the same background #1b1f23 as the .dark class.

body[class=dark] .right-pane-widget--container {
    background: #1b1f23;
    /* or background: inherit; */
}

Or update the existing selector #guide main .right-pane-widget--container when body[class=dark] to maintain the higher specificity selector rules.

Expected Result:

[10xtechie]

@tannerdolby,
I guess this issue is similar to #1054. This issue has been resolved by #1060
Please double check.

[tannerdolby]

@10xtechie Thank you for the heads up! It does seem that 1054 was a duplicate/similar issue that was resolved by #1060.

I just double checked https://spring.io/guides/gs/consuming-rest/ and when toggling dark mode, the styles apply correctly to the "Get the code" container. Closing this as its now fixed.