Email design template preview shows dark regardless of "Light" option being selected

[mrkylegp]

What version of Invoice Ninja are you running? ie v4.5.25 / v5.0.30 5.3.5

What environment are you running? Self Hosted

Describe the bug In Chrome or Edge, the email template preview section remains dark despite selecting the Light theme option.

Steps To Reproduce In Chrome or Edge (potentially others, but this issue does not occur in Firefox) Go to Settings > Email Settings > Email Design > and change it to "Light" Then go to Email Templates & Reminders > Preview. Note that the preview is still using dark elements and not appearing correctly.

Expected behavior The preview should show the Light theme preview correctly if that is the selected theme

Screenshots

CHROME/EDGE (With Light email design selected)

FIREFOX (With Light email design selected)

(v5) Can you replicate the issue on our demo site? https://demo.invoiceninja.com Yes, it can be replicated even on your demo.

[turbo124]

I cannot recreate this locally or on our hosted server.

@beganovich are you able to recreate this?

[mrkylegp]

I cannot recreate this locally or on our hosted server.

@beganovich are you able to recreate this?

It is reproducible even on your demo at https://demo.invoiceninja.com

Here is a video I just made: https://youtu.be/3HVcAueGxmk

It's worth noting that this is also on a different computer (I have tried it on a few) so it is not an isolated issue with any of my browsers on the local machine. I can reproduce this 100%.

Did you use Chrome or Edge to verify the issue?

[turbo124]

Quite bizarre, I wasn't able to reproduce on Demo either, I used chrome, @hillelcoren thoughts?

[mrkylegp]

Quite bizarre, I wasn't able to reproduce on Demo either, I used chrome, @hillelcoren thoughts?

Quite bizarre indeed because I can reproduce this across PC's and every time with Chromium based browsers it seems. Tried also disabling any extensions I had (not that I thought any would influence this issue) and still had this issue.

Here is my Chrome version just for additional information:

And again, Firefox works exactly as it should so I'm not sure what's going on here myself.

[beganovich]

Works fine for me on demo.invoiceninja.com & invoicing.co.

[mrkylegp]

I just figured this out. When the browsers are set to their dark mode appearance, this is what causes the issue.

This also becomes an issue for anyone who has set Windows 10 to use dark theming, which is very common, and the browser is set to follow the system theme.

So it would still seem something might have to be considered for users utilising the dark mode in these browsers.

Here's a video demonstrating this: https://youtu.be/idi_9NbR5P4

Go ahead and verify that for yourselves if you can. @beganovich @turbo124

[turbo124]

@mrkylegp

Thanks that is quite conclusive. @hillelcoren should we move this to admin-portal repo?

[mrkylegp]

@turbo124 @hillelcoren

In addition to this I found that </br>tags work and are shown correctly in the preview but in the actual email the client receives, they are not respected. This also seems like it requires attention to get line break tags actually showing up in the emails, not just the previews. I was able to use <p> tags instead to get the spacing how I wanted, but either way you can see what I mean with the </br> tags in the screenshots below:

Preview in Invoice Ninja

Email Client: Thunderbird

[beganovich]

Thanks for reporting. We plan to release an updated version of templates really soon, which includes bunch of email fixes :+1:

[mrkylegp]

@beganovich @hillelcoren @turbo124 Still an issue as of v5.5.5. Went to change my theme to Light today and noticed this was still the behaviour.

https://www.youtube.com/watch?v=idi_9NbR5P4