Make work with dark mode, high-contrast, forced-colors

Created on 21 June 2023, about 1 year ago
Updated 13 October 2023, 9 months ago

Problem/Motivation

When using dark mode, high contrast mode and force-colors, the borders and spinner appear in grayscale/reduced opacity. They should remain solid white to improve visibility and respect the high contrast setting.

Steps to reproduce

1. Use a chromium based browser (we tested on Microsoft Edge on Mac, also Chrome)
2. Open the "Rendering" panel in the dev tools
3. Check "Enable automatic dark mode"
4. Set forced-colors: active
5. Set prefers-contrast: more
6. Observe the Project Browser main page at /admin/modules/browse
7. Borders, and spinner appear in grayscale/reduced opacity

Screenshot: https://www.drupal.org/files/issues/2023-06-21/Screenshot%202023-06-21%2... β†’
Spinner video: https://www.drupal.org/files/issues/2023-06-07/highcontrast.mp4 β†’

Proposed resolution

Popular sites don't seem to have this issue. Update the CSS to make sure the high contrast settings are respected.

Remaining tasks

  • βœ… File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
πŸ“Œ Task
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States earthday47

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024