Bad contrast for striped tables in dark theme

Topic: Bad contrast for striped tables in dark theme

Arthur pro premium priority asked a year ago

Hello,

I'm using the default mdb.dark.min.css file to quickly have a dark theme on my application.I'm calling themes like so:

<link href=/css/mdb.min.css" media="(prefers-color-scheme: light)" rel="stylesheet" type="text/css">
<link href=/css/mdb.dark.min.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css">

Expected behavior

Have a good contrast for striped table no matter which class is used.

Actual behavior

Using following codes gives bad contrast.

<table class="table table-bordered table-hover table-striped">
[multiple tr without any special classes]
</table>

Also tested with table-secondary, table-info, table-success, ...It seems that the .table class have a color:#fff for dark mode that I don't see in light mode, maybe it is the issue?

Resources (screenshots, code snippets etc.)

Default table table-primary

Add comment

Kamila Pieńkowska staff answered a year ago

0 0 Best answer

It seems that there were changes in mapping.

If you do not like the accent color in the table you can change its value for a dark theme or for both. Example:

  .table {
        --mdb-table-striped-color: hsla(0,0%,100%,.50);
      }

Arthur pro premium priority commented a year ago

Ok I will override the default behavior, thanks.

Add comment

Kamila Pieńkowska staff answered a year ago

0 0 Best answer

Do you have additional styles added?

You can see in the demo that dark-themed table looks different.

Arthur pro premium priority commented a year ago

I double checked and I have removed all custom css from my application and still have the same issue (I've checked that when inspecting an element all css came from mdb.dark.min.css only). In fact the table don't look like this in the demo (https://mdbgo.io/marta-szymanska/mdb5-demo-pro-dark/pro/components/full-demo.html).

I've tested to replace the mdb.dark.min.css I downloaded from "my orders" by the one available on the demo (https://mdbgo.io/marta-szymanska/mdb5-demo-pro-dark/css/mdb.dark.min.css) and now it's working properly for the tables.

Maybe there is an issue in the downloaded file ?

Add comment

Arthur pro premium priority answered a year ago