Skip to content

[Enhancement] Add support for prefers-color-scheme and Windows High Contrast Mode (forced-colors) #5608

Description

@bram-atmire

Is your feature request related to a problem? Please describe.

DSpace Angular's own SCSS contains no @media (prefers-color-scheme: ...) or @media (forced-colors: active) rules. The prefers-reduced-motion adaptation that users currently benefit from comes from Bootstrap 5 itself, not from any DSpace-authored rule. As a result:

  • Users with the OS-level "Dark" preference see the same light theme regardless.
  • Users in Windows High Contrast Mode see UI elements rendered with author-chosen colours that may be ignored or replaced unpredictably; controls without a forced-color-adjust strategy can become invisible or low-contrast in HCM.

This is not a current WCAG AA failure, but it is a growing accessibility expectation referenced by Microsoft's Forced Colors guidance and the WAI ARIA Authoring Practices, and it is increasingly common across modern web platforms.

A grep across src/**/*.scss on main (commit 9b025a61e) confirms zero authored prefers-color-scheme / forced-colors rules.

Describe the solution you'd like

  1. Baseline prefers-color-scheme: dark mapping for the dspace base theme, that flips a small, well-defined set of CSS custom properties (background, surface, text, border). Can ship as opt-in via a configuration toggle.
  2. @media (forced-colors: active) adjustments for the navbar, the admin sidebar, focus rings, and the skip link, mainly to set forced-color-adjust and use safe system colour keywords (Canvas, CanvasText, LinkText, ButtonText, Highlight).
  3. <meta name="color-scheme" content="light dark"> in src/index.html, so the user agent applies sensible scrollbars and form-control colours under HCM and dark mode.

Describe alternatives or workarounds you've considered

Leave both adaptations entirely to deployer themes. The trade-off is that no theme today does it, so the entire ecosystem ships without HCM / dark-mode handling.

Additional information

Touches WCAG 2.2 SC 1.4.3 / 1.4.6 / 1.4.11 (the forced-colors part guards against contrast failures in HCM specifically).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions