Skip to content

[Fix] Make docs sidebar logos legible in dark mode - #7

Merged
mrubens merged 2 commits into
developfrom
fix/docs-dark-mode-sidebar-logos-3azprf29rx3f8
Jul 8, 2026
Merged

[Fix] Make docs sidebar logos legible in dark mode#7
mrubens merged 2 commits into
developfrom
fix/docs-dark-mode-sidebar-logos-3azprf29rx3f8

Conversation

@roomote-roomote-v1

Copy link
Copy Markdown

Opened on behalf of Matt Rubens. Follow up by mentioning @openmote, in the web UI, or in Slack.

What changed

Broadened the dark-mode CSS invert rule in apps/docs/roomote.css so it covers the docs sidebar navigation icons, not just the inline IntegrationName table logos. The previous rule only matched img.integration-logo, which is the class used by the IntegrationName snippet inside page content; the sidebar nav icons render as plain img elements with class size-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/*.svg icons (E2B, Daytona, Pylon, Supermemory), which use fill="#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 #111827 icons on a near-black background. The inline integration-table logos already had an invert rule, but it was scoped to the .integration-logo class 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 IntegrationName logos 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.

@roomote-roomote-v1

roomote-roomote-v1 Bot commented Jul 8, 2026

Copy link
Copy Markdown
Author

No new code issues found. See task

The only change since the last review was a merge of develop into the branch, which adds openmote to the CLA allowlist in .github/workflows/cla.yml. That is consistent with this PR's bot author and does not affect the docs dark-mode CSS fix.

The earlier review of the apps/docs/roomote.css invert change still stands: broadening the selectors from img.integration-logo to img is safe because both matched src patterns (Iconify Simple Icons and /logo/integrations/*.svg) are monochrome dark icons, so inverting any matching <img> in dark mode is correct and won't touch colored images. The ^= (external Iconify) vs *= (local, S3-rehosted) split is deliberate and matches how Mintlify serves each source.

Non-blocking (carried from the prior review): 23 of the 27 sidebar icons come from external Iconify URLs still matched with the prefix-anchored ^=, and validation was done on the dev server. Worth a quick confirm in a production build that Mintlify does not proxy/rewrite those external api.iconify.design frontmatter icon URLs; if it ever does, the ^= rule would miss them the same way ^=/logo/integrations/ missed the rehosted local logos.

@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

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.

@mrubens
mrubens marked this pull request as ready for review July 8, 2026 19:09
@mrubens
mrubens merged commit 2d97eab into develop Jul 8, 2026
@mrubens
mrubens deleted the fix/docs-dark-mode-sidebar-logos-3azprf29rx3f8 branch July 8, 2026 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant