>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3538251. --> Reported by: [mherchel](https://www.drupal.org/user/118428) Related to !182 >>> <p>This is a followup from <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/bluecheese/-/work_items/3528253" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/bluecheese/-/work_items/3528253</a></span></p> <p>The current menu system isn't great in forced colors mode. See <a href="https://devtoolstips.org/tips/en/emulate-forced-colors/">https://devtoolstips.org/tips/en/emulate-forced-colors/</a></p> <p>We should use modern techniques including the forced-colors media query, transparent borders, and mask images to make it great to use. </p> <p>This includes techniques that we use with core themes:</p> <ul> <li>Transparent borders - these will show as opaque in forced colors mode</li> <li>Mask images: when combined with background colors using named colors (buttonText, linkText, etc), icons can adapt to the forced colors theme</li> </ul> <p>To test this out, turn on forced colors emulation (<a href="https://devtoolstips.org/tips/en/emulate-forced-colors/">https://devtoolstips.org/tips/en/emulate-forced-colors/</a>). You can also switch to a dark theme on the same pane within dev tools. Forced colors can have different themes, and its good to test in both. You'll want to test at both desktop and mobile. </p> <p>We primarily want to make sure the entire menu is perceivable, operable, and understandable. It doesn't need to look good in forced-colors (in fact, it rarely will). </p> <p>But by adding borders, we let the user know the extent of the header, where the dropdowns and flyouts. By using mask images, we ensure the icons will adapt to whatever forced colors scheme the user is using. </p> <p>Example before/after photos:</p> <p><img src="https://www.drupal.org/files/issues/2025-08-07/current.png" alt><br> <img src="https://www.drupal.org/files/issues/2025-08-07/new.png" alt></p>