Gin settings visually broken in Forced Colors mode

Created on 13 February 2025, about 2 months ago

There are several different problems on the Gin settings page in Forced Colors mode:

The active state for the selected option of the Appearance selection component is not perceivable.
The options in the accent color switch component are empty white circles, while the color of the logo in the upper left corner of the window is still being adjusted as the chosen accent color is changed.
There are other issues that have been raised in more specific issues, such as:
- The toggle on the "Gin switch" is invisible in the unchecked state ( 🐛 Increase the color contrast for Gin switches Active )
- Focusable elements in the header have only a dotted outline, meanwhile in the settings fieldset the accent color and focus color have a solid focus indicator, but the rest of the components’ focus outlines are invisible ( 🐛 Improve the accessibility of focus outlines Active )
- Several icons, the images on navigation drupal toolbar and the layout density setting are not displayed ( 🐛 Several icons and images are invisible in Forced Colors mode Active )
- Select fields show a second caret in dark mode with the Forces Colors mode active ( 🐛 Select elements show two carets in Forced Colors mode Active )

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Switch to the dark mode, activate the Forced Colors mode, and then go to admin/appearance/settings/gin

Ensure that the selected active color mode is visible on the appearance switch element.
Show the accent colors in the accent color switch component within the circles, same as in light and dark mode
Make the toggle visible for Gin switch components, also in the unchecked state.
Ensure that focusable elements have a solid and visible focus outline.
Make sure that all the icons and images are displayed
Ensure that no second caret is shown for select fields