>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3582473. --> Reported by: [marcus_johansson](https://www.drupal.org/user/385947) Related to !1446 >>> <p>[Tracker]<br> <strong>Update Summary: </strong>[One-line status update for stakeholders]<br> <strong>Short Description: </strong>Tool Explorer does not render correctly with Gin dark theme<br> <strong>Check-in Date: </strong>MM/DD/YYYY<br> [/Tracker]</p> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Follow up from <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/ai_agents/-/work_items/3559183" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/ai_agents/-/work_items/3559183</a></span>.</p> <p>The Tool Explorer UI only looks correct when using the Claro admin theme or Gin in light mode. When using Gin with the dark theme enabled, the Tool Explorer has styling issues that make it difficult to use - likely hardcoded colors or missing CSS custom property support that does not adapt to dark mode.</p> <p>The issues can be seen here:<br> <a href="https://www.drupal.org/files/issues/2026-03-31/darkmode-not-good-gin-1.png"><img src="https://www.drupal.org/files/issues/2026-03-31/darkmode-not-good-gin-1.png"></a></p> <p><a href="https://www.drupal.org/files/issues/2026-03-31/darkmode-not-good-gin-2.png"><img src="https://www.drupal.org/files/issues/2026-03-31/darkmode-not-good-gin-2.png"></a></p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Install the AI module and AI Agents module together with Gin theme</li> <li>Set Gin theme to dark mode</li> <li>Visit the agent edit page and see the issues</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Replace hardcoded color values in the Tool Explorer CSS with CSS custom properties (e.g. <code>var(--gin-color-*)</code> when it recognizes that its available in the html tag</li> <li>Where Gin-specific variables are not available, fall back to standard Claro/core custom properties that Gin inherits.</li> </ul> <h3 id="summary-ai-usage">AI usage (if applicable)</h3> <p>[x] AI Assisted Issue<br> This issue was generated with AI assistance, but was reviewed and refined by the creator.</p> <p>[ ] AI Assisted Code<br> [ ] AI Generated Code<br> [ ] Vibe Coded</p> <p>- <strong>This issue was created with the help of AI</strong></p>