Bug: Dark Mode Print on table-striped
Hey Guys,
When you try print a page with a table that has table-striped, you cannot make out whats in the table:
<img src="https://i.ibb.co/C0NbqDB/Screenshot-2023-03-09-at-12-46-15.png" class="w-100"/>
Replies (6)
Hi,
Unfortunately, the dark mode is not supported for print mode due to some dark mode's html/css limitations in the print mode. The original bootstrap has the same behavior in the dark mode. We will double-check this and try to find a workaround.
Regards.
The temporary fix for me was:
original declaration:
.table-striped > tbody > tr:nth-of-type(odd) > * {
--bs-table-accent-bg: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color);
}Fix:
.table-striped > tbody > tr:nth-of-type(odd) > * {
--bs-table-accent-bg: rgba(0,0,0,0.1);
color: var(--bs-table-striped-color);
}I'm sure you guys can come up with a better solution where it uses var() instead of a set color. In theory, the same fix would have to apply to the :hover of .table-striped too otherwise if PRINT is invoked while a row is hovered, it will have a black row where the mouse was at time of PRINT.
Digging a little deeper, saw you guys were setting --bs-table-striped-bg as a 75% value of --bs-gray-100-rgb
The fix then was just to set a @print media value that was better than 75%, ie - the fix was:
@media print {
.table-striped > tbody > tr:nth-of-type(odd) > * {
--bs-table-accent-bg: rgba(var(--bs-gray-100-rgb), 0.1);
}
.table-hover > tbody > tr:hover > * {
--bs-table-accent-bg: transparent;
}
.table-striped > tbody > tr:hover:nth-of-type(odd) > * {
--bs-table-accent-bg: rgba(var(--bs-gray-100-rgb), 0.1);
}
}Hi,
Thank you for sharing this. We will check this further and consider applying in a future update. Appreciate your contribution.
Regards.
Apologies, img url is wrong and I cannot edit the post, gives an error (this is another bug you might want to look into, cant edit any forum posts)
<img>https://i.ibb.co/C0NbqDB/Screenshot-2023-03-09-at-12-46-15.png
Hi,
Thank you for reporting this. Sure, we will check this issue as soon as possible,
Regards.
