bug: Some elements depend on using backgrounds, which break for print media

[OiYouYeahYou]

What version of daisyUI are you using?

latest

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/wWndQ9FxeZ

Describe your issue

When printing browsers remove background colours to avoid excessive use of ink and other problems. But many of the Daisy components use background colour as part of it's feature this breaks. I've only tested on Chrome (Linux), but am certain this is a cross browser issue.

ATM I'm just using a .print-fix class:

.print-fix {
    print-color-adjust: exact;
}

Though, I expect this is low severity as few people are doing anything with print media

@media screen aka "normal view"

@media print aka from print preview

[github-actions[bot]]

Thank you @OiYouYeahYou for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[Root-acess]

This is a common issue with print styling, especially when working with components that rely heavily on background colors for their design and branding, as with DaisyUI components. Most browsers disable background colors by default for print to save ink, but in certain cases, like in your use case, preserving these colors is essential. The solution you’re using with the .print-fix class and print-color-adjust: exact; is actually the correct approach for handling this, and it’s often the most effective fix.

Here’s a more detailed solution:

Solution

1. Global Print Style: You can add a global print style in your CSS to apply print-color-adjust: exact; to all DaisyUI components if you need this fix applied broadly across your app.

   @media print {
       /* Apply to all elements with DaisyUI classes */
       .btn, .card, .badge, .alert, .navbar, .dropdown, /* add more as needed */ {
           print-color-adjust: exact;
       }
   }
   

2. Target Specific Components: If only certain components need color preservation, use a more targeted approach in your print stylesheet. For example:

   @media print {
       .card, .alert, .badge {
           print-color-adjust: exact;
       }
   }
   

3. Using .print-fix Class: Since you’re already using a .print-fix class, you can add this class to any DaisyUI component that needs color preservation, rather than styling every component individually.

4. Custom Print Styling: If certain colors are too intense for print, consider using @media print to adjust them to lighter shades to improve readability and reduce ink usage.

Additional Considerations

• Testing: While you’ve confirmed this issue on Chrome, it’s good to test on Firefox and Edge, as some browsers have minor differences in how they handle print rendering.
• Framework Updates: Check DaisyUI’s changelogs for updates, as print compatibility improvements may be added in future releases.

The approach you’re using is effective, and it should maintain consistent print color handling across your app without disrupting screen display styles.