>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3582474. --> Reported by: [marcus_johansson](https://www.drupal.org/user/385947) Related to !1445 >>> <p>[Tracker]<br> <strong>Update Summary: </strong>[One-line status update for stakeholders]<br> <strong>Short Description: </strong>MDX Editor 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 MDX Editor UI only looks correct when using the Claro admin theme or Gin in light mode. When using Gin with the dark theme enabled, the MDX Editor has styling issues that make it difficult to use. This can be reproduced in the Prompt Library where the MDX Editor is used for editing prompts.</p> <p><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> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Install the AI module with prompt types configured.</li> <li>Set Gin as the admin theme and enable dark mode in Gin settings.</li> <li>Navigate to the Prompt Library and edit a prompt.</li> <li>Observe that the MDX Editor does not render correctly - colors, backgrounds, or text contrast are broken compared to the light theme or Claro.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Replace hardcoded color values in the MDX Editor CSS with CSS custom properties that adapt to both light and dark modes when gin classes is 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> <li>Test the MDX Editor with Claro, Gin light, and Gin dark to ensure all three render correctly.</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>