[Fix] Make docs sidebar logos legible in dark mode - #7
Conversation
|
No new code issues found. See task The only change since the last review was a merge of The earlier review of the Non-blocking (carried from the prior review): 23 of the 27 sidebar icons come from external Iconify URLs still matched with the prefix-anchored |
|
Thank you for your contribution! Before we can merge this pull request, we need you to sign our Contributor License Agreement. You can sign it by posting the comment below. I have read the CLA Document and I hereby sign the CLA You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot. |
What changed
Broadened the dark-mode CSS invert rule in
apps/docs/roomote.cssso it covers the docs sidebar navigation icons, not just the inlineIntegrationNametable logos. The previous rule only matchedimg.integration-logo, which is the class used by theIntegrationNamesnippet inside page content; the sidebar nav icons render as plainimgelements with classsize-4, so they were never inverted and stayed near-black (#111827) against the dark sidebar background.The new rules invert any dark monochrome icon in dark mode:
.dark img[src^='https://api.iconify.design/simple-icons:']— covers all Iconify Simple Icons frontmatter icons (Slack, Teams, Telegram, GitHub, GitLab, Gitea, Azure DevOps, Docker, Modal, Asana, Better Stack, Braintrust, Grafana, Jira, Linear, Neon, Notion, PostHog, Railway, Sentry, Snowflake, Supabase, Vercel, etc.). Mintlify forces these to#111827..dark img[src*='/logo/integrations/']— covers the local/logo/integrations/*.svgicons (E2B, Daytona, Pylon, Supermemory), which usefill="#111827". Switched from^=to*=so it also matches the S3-rewritten URL Mintlify uses in production.Why this change was made
In dark mode the provider and integration logos in the docs sidebar were nearly invisible — monochrome
#111827icons on a near-black background. The inline integration-table logos already had an invert rule, but it was scoped to the.integration-logoclass and never reached the sidebar nav icons.Impact
All 27 provider and integration sidebar icons (Communications, Source Control, Compute, and Integrations groups) now render as light/inverted icons in dark mode and are clearly legible. Light mode is unaffected. The inline
IntegrationNamelogos continue to invert as before (the broader rule produces the same result for them). Validated with the Mintlify dev server: dark mode active,filter: invert(1)confirmed on every target sidebar icon, and screenshots reviewed showing the icons now light against the dark sidebar.