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

Is the dark mode started somewhere?

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

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.

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?

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!

Just wondering how dark mode as a core feature for Claro (and Olivero) are coming along - are they still in development. I just saw this new module in contrib I'm likely to going to give a try - https://www.drupal.org/project/xclaro → .

@w01f: Thanks for trying out xClaro. But note that in xClaro I am not using the same dark colours as we can see in the draft mock-up displayed in comment #12. The official dark colours of Claro should be defined by the Claro maintainers, and, hopefully, developed and release before we hit Drupal 12.