[META] Designs for dark background layers and its color palette

Created on 25 November 2021, over 2 years ago
Updated 3 August 2023, 11 months ago

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

    ๐Ÿ“Œ Task
    Status

    Active

    Version

    11.0 ๐Ÿ”ฅ

    Component
    Claroย  โ†’

    Last updated 8 minutes ago

    Created by

    ๐Ÿ‡ช๐Ÿ‡ธSpain ckrina Barcelona

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

    Comments & Activities

    Not all content is available!

    It's likely this issue predates Contrib.social: some issue and comment data are missing.

    • ๐Ÿ‡จ๐Ÿ‡ฆCanada xmacinfo Canada

      Is the dark mode started somewhere?

    • Status changed to Needs review 12 months ago
    • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom Dandolorion

      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**

    • ๐Ÿ‡จ๐Ÿ‡ฆCanada xmacinfo Canada

      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 Clare 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.

    • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom Dandolorion

      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?

    • Status changed to Active 11 months ago
    • ๐Ÿ‡ช๐Ÿ‡ธSpain ckrina Barcelona

      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 ๐Ÿ“Œ [META] Layout redesign Active , 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!

    Production build 0.69.0 2024