The output in Forced Colors mode is different depending on if the light or dark mode is active

Created on 13 February 2025, 5 months ago

Problem/Motivation

Depending on which color mode you have selected the output in Forced Colors mode differs

light mode - forced colors mode

dark mode - force colors mode

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

Steps to reproduce

  • Go to
  • admin/appearance/settings/gin
  • , switch on Forced Colors mode and switch between the light and dark mode.

    Proposed resolution

    • If technically possible if the Forced Colors mode is being active use the styling currently used for the dark mode no matter if the light or dark mode is being active.
    • Ideally it should be signified on the appearance switch component that the light & dark mode is currently overridden and the selection mode has currently no effect in Forced Colors mode.

    Remaining tasks

    User interface changes

    API changes

    Data model changes

πŸ› Bug report
Status

Active

Version

4.0

Component

User interface

Created by

πŸ‡©πŸ‡ͺGermany rkoller NΓΌrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

    This is an interesting one. I do think it is important to give folks the choice of either light or dark mode. Glad that Gin does that. However, if someone has already specified their preference by specifying a high contrast mode, then there really isn't a need to support two versions of their preferences. Probably simpler to just support one consistently.

  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

    So putting up a warning here when forced-colors is active could be done by modifying the HTML:

    <span class="fieldset__label fieldset__label--group">Appearance</span>

    to

    <span class="fieldset__label fieldset__label--group">Appearance <span class="forced-colors-warning" role="note">– Unavailable in Forced Colors Mode</span></span>

    And adding this CSS:

    /* Hide by default */
    .forced-colors-warning {
      display: none;
      font-weight: bold;
      border: 0px solid transparent;
      color: ButtonText;
      background-color: ButtonFace;
    }
    
    /* Show only in forced colors mode */
    @media (forced-colors: active) {
      .forced-colors-warning {
        display: inline;
        border-color: ButtonText;
      }
    }
  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario
  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario
Production build 0.71.5 2024