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:
Replies (6)
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)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.
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.
React Dev Vacancy
