docs: give widget reference screenshots a light surface in dark mode#4404
docs: give widget reference screenshots a light surface in dark mode#4404mvanhorn wants to merge 1 commit into
Conversation
Closes beeware#4389. The widget reference images under docs/en/reference/images/ are transparent PNGs captured against the platform's default light surface. In dark mode (mkdocs-material's 'slate' color scheme) the transparency lets the page background bleed through, which renders dark widget chrome and pure white labels against a near-black page and makes the screenshot hard to parse - the OptionContainer reference page in the issue is the clearest example, but every widget reference under the API docs is affected the same way. Add a single CSS rule in toga.css that targets images under /reference/images/ when the slate color scheme is active and wraps them in a white surface with a small padding/radius so the captured chrome stays separated from the page background. Light mode is unchanged (the rule is scoped to [data-md-color-scheme='slate']) and the source PNGs are untouched - no recapture needed.
freakboy3742
left a comment
freakboy3742
left a comment
There was a problem hiding this comment.
Thanks for the contribution.
This PR has all the signs of being generated by an AI tool - the PR description is excessively verbose, and doesn't include the information that we have explicitly asked for in our PR template. It has also failed to follow the basics of our contribution guide (which is why it is failing CI).
If you address these issues, we're happy to review. You should also familiarise yourself with our contribution guide and AI usage policy.
|
Apologies for the verbose body and missing disclosure - I have trimmed the description and added the On CI: the failing job is |
|
Much closer! Those checkboxes that the AI either didn't include or auto-removed are needed for PRs on this project:
|
|
Thanks - re-added the checklist. All three boxes apply (already had |
freakboy3742
left a comment
freakboy3742
left a comment
There was a problem hiding this comment.
This is a novel approach to fixing the problem; however, it's not clear to me how you've tested this, because the RTD preview rendering of the OptionContainer example highlighted in the original issue doesn't appear to be affected by the proposed CSS fix. How did you verify that the proposed fix worked as intended?
3 participants
Summary
Scopes a CSS rule to
[data-md-color-scheme="slate"]so transparent widget reference PNGs get a light surface in mkdocs-material dark mode. Fixes legibility for the OptionContainer page and other widget reference images.Closes #4389
What changed
docs/en/stylesheets/toga.css: scoped rule giving widget reference images a white surface only in slate (dark) mode.changes/4389.doc.md: towncrierdocfragment.Light mode is pixel-identical (rule is scheme-scoped). Source PNGs are untouched.
PR Checks
Assisted-by: Claude Opus 4.7