Dark mode with coloured backgrounds (Groups) can ruin contrast

  • I have a fresh install of 5.6.1 with nothing non-standard installed except the Twentig plugin.

    I have a two Column layout where I want one Column to have a different background colour. Because Columns cannot specify a colour, I must use a Group inside the Column. (Colouring paragraphs does not give a contiguous block of colour.)

    This works well until the user selects Dark Mode, whereupon the text colour is automatically changed to suit the now dark main background. The problem this creates is the text inside the Group is coloured as if for a dark background and the colour of the group background does not change.

    The result is very low contrast text and I can see no mechanism to deal with this other than force the text colour also, making the group completely ignore dark mode switching.

    It seems like this is a gap in functionality.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • you could try custom CSS; example:

    .is-dark-theme .wp-block-group.has-blue-background-color { background-color: darkblue; }

    dark mode adds the CSS class .is-dark-theme to the body tag, on which you can base any dark specific styles…

    Thread Starter zkarj

    (@zkarj)

    Thanks, that’s useful as a workaround.

    But I don’t think the out-of-the-box functionality is as it should be. One of the key features of the theme is automatic selection of contrasting text and this does not work in the above situation, nor possibly others.

    Seeing as I do not define the dark background that pairs with my choice of beige, why should I have to choose one to pair with the blue? These are all theme colours.

    If I choose a custom colour then it’s a much harder ask and I wouldn’t necessarily expect it to work.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Dark mode with coloured backgrounds (Groups) can ruin contrast’ is closed to new replies.

Tags