New core navigation's top bar in dark mode on small screens has white background with light grey text
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3488177. -->
Reported by: [ambient.impact](https://www.drupal.org/user/1131532)
Related to !530
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Currently looks like this:</p>
<p><img src="https://www.drupal.org/files/issues/2024-11-18/gin-3488177-core-navigation-dark-mode-top-bar-incorrect-colour.png" width="1080" height="1920" alt="Screenshot of Gin in dark mode with a white top bar and barely readable text on it."></p>
<p>How I would expect it to look:</p>
<p><img src="https://www.drupal.org/files/issues/2024-11-18/gin-3488177-core-navigation-dark-mode-top-bar-correct-colour.png" width="1080" height="1920" alt="Screenshot of Gin in dark mode with a dark top bar and well contrasting text on it."></p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<p>Use Gin, install core Navigation module, and size the viewport narrow enough for the sidebar to be hidden and the top bar to be displayed.</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>Looks like this is partly due to core using different selectors and also that they hard code <code>background-color: white</code> rather than one of the custom properties.</p>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<p>Fix styles.</p>
<h3 id="summary-ui-changes">User interface changes</h3>
<p>No longer looks busted.</p>
<h3 id="summary-api-changes">API changes</h3>
<p>None.</p>
<h3 id="summary-data-model-changes">Data model changes</h3>
<p>None.</p>
issue