Bad contrast on darkmode with dark brand color

[schonhoff]

• Laravel Version: 8.83.7
• Nova Version: 4.1.0
• PHP Version: 8.0.6
• Database Driver & Version: MySQL 8
• Operating System and Version: Windows 10
• Browser type and version: Chrome 100

Description:

Hello,

our brand color is a dark red rgb(141, 39, 50). With dark mode on, the color of the buttons are very bad in context of contrast (text-color vs. background-color).

Detailed steps to reproduce the issue on a fresh Nova installation:

• Set in Nova config:

    'brand' => [
        'colors' => [
            "400" => "141, 39, 50, 0.5",
            "500" => "141, 39, 50",
            "600" => "141, 39, 50, 0.75",
        ]
    ],

• Go to a Nova
• Go to users
• See this:
  

Possible solution

• Maybe it would be possible to set the text-color, too, instead of only using the background-color?
• Another solution could be a HSL algorithm to check the lightness of a background and set the text color to a dark or a light one.
• Possibility to disable dark mode per config file (worst case!)
• Possibility to add a separate brand color for dark mode

[BerkanYildiz]

Could we also have an (optional) dark-mode logo path config ? My brand's logo text is pretty dark/black and it doesn't render well in dark mode.

[WayneHarris]

A similar solution to this could be used: https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/

[schonhoff]

@BerkanYildiz My brand's logo test is dark too. I get it to work with a class in the svg like this p-1 dark:bg-gray-600. It adds a nice lighter background.

But I agree with you, there should be a brand color and logo for light and dark mode.

[davidhemphill]

What we do is have our logo parts use different classes for light and dark mode.

There could be ways to enhance this in the future if we come up with a clean approach.

[ramonfeleus]

For those wanting their logo to color along to dark mode: I already happened to have style="fill:currentColor" on the letters in the logo. This automatically made the logo switch to the text color for dark mode.

I do think contrast could be better there, a lighter text would help. More customisation options for setting text color could work in some scenarios, as we do tweak the branding a bit for our customers.

[sanderbaas]

Maybe you have already found your solution, but I came across the same problem and used your hint to add fill:currentColor. On top of that I added class=dark:text-white to the svg tag of the logo to get a light currentColor in dark mode.

[Synchro]

Separately from the brand color, the default text-on-background contrast is really low in dark mode. I ran it through a contrast accessibility checker and it's not good, especially as a default:

[ramonfeleus]

Lighthouse in Google Chrome also throws a lot of contrast ratio issues as well in dark mode.

[whitespacecode]

Lighthouse in Google Chrome also throws a lot of contrast ratio issues as well in dark mode.

Did you find an easy 'fix' for this ?

[LiamKarlMitchell]

Dark mode is actually really hard to read.
Agree could we please have light and dark branding options for logo and colors.
Otherwise should this be solved by injecting our own style sheet somehow?

[dalmarcolucas]

@whitespacecode @ramonfeleus did you guys found a way to change the text color?