Skip to content

Versioning : color contrast in dark mode with red and green background #47838

@woluweb

Description

@woluweb

Steps to reproduce the issue

Articles > Versions button > Compare

Version

6.1

Expected result

No matter whether you are in Dark Mode or Light Mode, the Compare popup of Versioning should have a good color contrast

Actual result

With dark mode, the changes are

  • white on light green
  • white on light red
    and is not readable (color contrast)

See screenshots

Image Image

What device were you using? (eg, phone, laptop)

desktop

What web browser were you using? (eg, Chrome, Safari)

Firefox (latest)

Assistive Technology?

No response

Additional Comments

Maybe contrast-color() could make sense to solve this kind of issues.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color

I noticed this issue on Versions > Compare and I don't think right now of other places using that red/green background, but maybe there are other places to fix in the backend

When editing from the front-end, the issue does not arise because front-end edition does not follow the light/dark mode setting of the backend. I also checked the case of a front-end Template which is in dark mode, but even in that case the Modal Window for Versions Compare has white background

Metadata

Metadata

Assignees

No one assigned

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions