Problem/Motivation

Claro has designs for white layers and have the basic colors like color for links set. But we still don't have any design or accessibility work done for dark layers/regions like Tour, Settings Tray or even a future dark mode. As a result, we currently have important accessibility issues on that regions:

Steps to reproduce

@todo

Proposed resolution

Design a new set of color palette/s and layer definitions for Claro that work with dark regions. Some explorations done so far can be found in Claro's working Figma file, and a few screensohts:

Remaining tasks

Other related issues:

  • Create issues for each component/region

    • User interface changes

    All dark regions will need to be updated.

    API changes

    Release notes snippet

    CommentFileSizeAuthor
    #12 claro_dark_mode.png121.66 KBDandolorion
    layer-tests.png12.43 KBckrina
    tour-explorations.png131.79 KBckrina
    tour.png27.2 KBckrina
    Support from Acquia helps fund testing for Drupal Acquia logo

    Comments

    ckrina created an issue. See original summary.

    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes
    Related issues: +#3251280: Tour style update

    Adding #3251280: Tour style update as a child issue.

    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes
    Related issues: +#3088531: Off-canvas dialog style update

    Adding #3088531: Off-canvas dialog style update.

    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes
    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes

    Related issue, since it's about the color scale naming conventions https://www.drupal.org/project/drupal/issues/3155531

    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes
    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Issue summary: View changes
    Related issues: +#3167349: Redesign Settings Tray, +#3023301: Messages style update

    Version: 9.4.x-dev » 9.5.x-dev

    Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

    Version: 9.5.x-dev » 10.1.x-dev

    Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

    xmacinfo’s picture

    xmacinfo
    he/him
    Primary language French
    Location Canada
    CreditAttribution: xmacinfo at xMac info commented

    Is the dark mode started somewhere?

    Version: 10.1.x-dev » 11.x-dev

    Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

    Dandolorion’s picture

    Dandolorion CreditAttribution: Dandolorion as a volunteer and at Versantus commented
    Status: Active » Needs review
    FileSize
    claro_dark_mode.png121.66 KB

    Hi all,

    This issue is a little confusing and cannot ascertain what the actual requirements are, so have produced something as a starting block in order to get some conversation going and issue moved forward.

    I have reproduced a standard Claro screen example as a "Dark Mode". The idea here was to start building the basics for a dark mode colour palette and how it can all come together.

    The concept I have produced takes into account the following:
    1) Drupal branding
    2) Accessibility
    3) Readability
    4) Eye strain factors

    I have stayed away from using straight Black & White as the contrast can be quite jarring and gone for a soft white over a deep midnight blue. As stated, this is a proof of concept and a palette idea to start a conversation.

    I have created a new Figma file as the one provided was quite messy to deal with. Meanwhile I can share a preview.

    Claro Dark Mode

    **For now, this is purely a draft and to get a conversation going**

    claro dark mode

    xmacinfo’s picture

    xmacinfo
    he/him
    Primary language French
    Location Canada
    CreditAttribution: xmacinfo at xMac info commented

    I am currently using the Darcula Drupal admin theme (1.0.0) and I find it quite accessible.

    But I prefer the color palette proposed for this issue. And I like very much the mockup made in #12.

    I think the goal of this issue is to finalize the color palette and background layers. Some mockups can be created to give us an overall view.

    Areas of concern:

    • We would not add any Drupal branding to the Dark version of Claro.
    • Color contrasts should meet accessibility industry standards.
    • Font weight may differ from Claro is some areas to improve readability.

    Overall, switching from Claro light or Claro dark should use the same screen estate, same text size, etc.

    And, of course, we won’t create a new dark theme based on Claro but instead support both light and dark in the same Claro theme files.

    Any additional work, for example fixing a button accessibility code, should be done in a separate ticket.

    Dandolorion’s picture

    Dandolorion CreditAttribution: Dandolorion as a volunteer and at Versantus commented

    I can provide a palette breakdown if needed from the mockup. I have tested for contrast and lowest is 6.16:1 so good to go from a AA perspective.

    I can draw up a base palette if that will help?

    ckrina’s picture

    ckrina
    she/her
    Primary language Catalan
    Location Barcelona
    CreditAttribution: ckrina at Lullabot commented
    Status: Needs review » Active

    Thanks @Dandolorion! Reflecting here what was discussed in Slack(#admin-ui-design channel):

    We’re currently working on redesigning the layout itself, what will change how the layers work in #3076820: [META] Layout redesign, together with the new sidebar navigation / toolbar redesign. I’m afraid it’ll impact the blue/accent scale: for example, which will be the base dark for the backgrounds.
    Anyway @saschaeggi is the person with more experience here with dark modes since he already implemented it on Gin, and helped giving the initial directions when we started the conversation a while back.
    What I would say about the example you shared is that it looks great, and maybe the blue tone would go closer to what Gin did (and somehow something that plays well with the light Claro mode too?): I remember Sascha mentioning something about the need to have a color less saturated but I forgot why.
    Anyway, happy to see this moving forward & have conversations around it!

    Edit: I'd skip Drupal branding as an influencing factor for the tone. The color we chose for Claro skipped that in purpose, trying to give another tone to the UI so it's perceived different from previous.