Dark mode theme formatting issue (unreadable text)

Hi there, I prepared this example of how the dark mode HTML rendering sometimes renders things I cannot read. It is however read correctly on my iphone also in dark mode.

I can’t attach the full HTML but can provide it to support.
snippet:
Copyright(C) 2024 United States Postal Service(R). All Rights Reserved. Informed Delivery™ and the trade dress of USPS(R) Packaging are among the many trademarks of the U.S. Postal Service(R).

This is an automated message. Please do not reply.
–1c8fc9177dae41ff7e21ed912d18b2895048c7e2e817fd7f4e10e93a4823
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset=“utf-8”

Informed Delivery /* LIGHT Mode media queries to target some Android and Outlook.com= */ @media (prefers-color-scheme: light) {
        .img-dark-mode, .x_img-dark-mode,
        .multi-envelope-icon-dark-mode, .x_multi-envelope-icon-dark-mod=

e {
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(348d=
eg) brightness(0%) contrast(100%) !important;
}

        .primary-background-color {
            background: linear-gradient(#333366, #333366) !important;
        }

        .secondary-background-color {
            background: linear-gradient(#3573B1, #3573B1) !important;
        }

        .header-font-colors {
            color: #333366 !important;
        }

        .dark-mode-section {
            background: linear-gradient(#F7F7F7, #F7F7F7) !important;
            background-color: #F7F7F7;
            color:#000001 !important;
        }

        .primary-font-color,
        .responsive-header {
            color: #333366 !important;
        }

        .secondary-font-color {
            color: #000001 !important;
        }

        .tracking-number a {
            color: #3573B1 !important;
        }

        .estimated-delivery {
            color: #000001 !important;
        }

        .warning-message {
            color: #000001 !important;
        }

        .linkable-text {
            color: #333366 !important;
            text-decoration: none !important;
        }

        .linkable-text:focus {
            outline: 3px solid #52addb !important;
        }

    }

    /* LIGHT Mode END */

    /* Dark Mode media queries to target some Android and Outlook.com *=

/
@media (prefers-color-scheme: dark) {

        .img-dark-mode, .x_img-dark-mode,
        .multi-envelope-icon-dark-mode, .x_multi-envelope-icon-dark-mod=

e {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(20=
4deg) brightness(103%) contrast(104%) !important;
}

        .primary-background-color {
            background: linear-gradient(#3573B1, #3573B1) !important;
        }

        .secondary-background-color {
            background: linear-gradient(#333366, #333366) !important;
        }

        .header-font-colors {
            color: #fffffe !important;
        }

        .dark-mode-section {
            background: linear-gradient(#2A2A32, #2A2A32) !important;
            background-color: #2A2A32;
            color:#fffffe !important;
        }

        .primary-font-color,
        .responsive-header {
            color: #fffffe !important;
        }

        .secondary-font-color {
            color: #fffffe !important;
        }

        .tracking-number a {
            color: #fffffe !important;
        }

        .estimated-delivery {
            color: #fffffe !important;
        }

        .warning-message {
            color: #fffffe !important;
        }

        .linkable-text {
            color: #fffffe !important;
            text-decoration: none !important;
        }
    }
    /* DARK Mode END */

    /* targets color attribute outlook web */
    [data-ogsc] .fubar {}

    /* targets background attribute outlook web */
    [data-ogsb] .primary-background-color {
            background: linear-gradient(#333366, #333366) !important;
        }

    [data-ogsb]  .secondary-background-color {
            background: linear-gradient(#3573B1, #3573B1) !important;
        }

    .primary-background-color {
        background-color: #333366 !important;
    }

    .secondary-background-color {
        background-color: #3573B1 !important;
    }

    .header-font-colors {
        color: #333366;
    }

    .dark-mode-section {
        background-color: #F7F7F7 !important;
        color: #000001;
    }

    .from-section-desktop {
        border-bottom: 2px solid #b8b8b8 !important;
    }

    .from-section-mobile {
        background-color: #F7F7F7 !important;
        border-bottom: none;
    }

    .primary-font-color,
    .responsive-header {
        color: #333366;
    }

    .secondary-font-color {
        color: #000001;
    }

    .email-box-shadow {
        box-shadow: 0px 8px 4px -4px#dee2e6 !important;
    }

    .mobile {
        mso-hide: all !important;
        display: none !important;
    }

    .expected-items-total {
        background-color: #333366 !important;
        min-width: 80px;
        padding: 10px 8px 8px 8px;
        margin: 0;
        font-size: 15px;
        text-align: center;
        color: #fffffe !important;
        border-radius: 12px;
        font-weight: normal !important;
    }

    .linkable-text {
        color: #000001;
        text-decoration: none !important;
    }

    .linkable-text:focus {
        outline: 3px solid #52addb !important;
    }

    .primary-button {
        background-color: #333367 !important;
        border: none !important;
        border-radius: 3px;
        color: #fffffe !important;
        display: inline-block;
        font-size: 16px;
        line-height: 44px;
        text-align: center;
        text-decoration: none;
        width: 225px;
        -webkit-text-size-adjust: none;
        white-space: nowrap;
        -webkit-text-size-adjust: none;
        height: 42px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: middle !important;
        margin-right: 20px;
    }

    .view-dashboard-a {
        text-decoration: none !important;
    }

    .view-dashboard-button {
        border-radius: 3px;
        padding: 9px 10px;
        border: 1px solid #fffffe !important;
        text-decoration: none !important;
        cursor: pointer;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        height: 44px;
        color: #fffffe !important;
        width: 200px;
        white-space: nowrap;
    }

    .view-dashboard-button:focus {
        outline: 4px solid #52addb;
    }

    .secondary-button {
        border: 1px solid #333366;
        background-color: #fffffe !important;
        border-radius: 3px;
        color: #333366 !important;
        display: inline-block;
        font-size: 16px;
        line-height: 44px;
        text-align: center;
        text-decoration: none;
        width: 225px;
        -webkit-text-size-adjust: none;
        white-space: nowrap;
        -webkit-text-size-adjust: none;
        height: 42px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: middle !important;
        margin-right: 20px;
    }

    .expected-items-total {
        background-color: #333366 !important;
        min-width: 80px;
        padding: 10px 8px 8px 8px;
        margin: 0;
        font-size: 15px;
        text-align: center;
        color: #fffffe !important;
        border-radius: 12px;
        font-weight: normal !important;
    }

    .more-mail {
        border-bottom: 2px solid #999999;
        padding-bottom: 5px;
    }

    .more-mail p {
        font-size: 12px;
    }


    .legal p {
        font-size: 11px;
    }

    .legal td {
        color: #000001 !important;
    }

    .legal td a {
        color: #3573B1 !important;
    }

    .tracking-number {
        font-size: 16px;
        font-weight: bold;
    }

    .estimated-delivery {
        font-size: 16px;
    }

    .warning-message {
        border-left: 10px solid #D4352D !important;
        padding-left: 15px;
        margin-right: 25px;
        line-height: 22px;
        margin-top: 0px;
    }

    * {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    table,
    td {
        mso-table-lspace: 0pt !important;
        mso-table-rspace: 0pt !important;
        font-family: Arial, Helvetica, sans-serif;
    }

    .custom-email-doc {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: normal;
        display: block;
        margin: 0 auto;
        max-width: 800px;
    }

    p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: normal;
    }

    hr {
        clear: both;
        display: block;
        height: 2px;
        background-color: #b8b8b8 !important;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    a {
        font-family: Arial, Helvetica, sans-serif;
        color: #3573B1;
    }

    a img {
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    img {
        outline-width: medium;
        outline-style: none;
        outline-color: initial;
        text-decoration: none;
        /* max-width: 100%; */
    }

    h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 21px;
        font-weight: bold;
        margin: 0;
        padding: 5px 0;
    }

    table {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }

    .header h1 {
        font-size: 33px;
        font-weight: bold;
    }

    .header tbody tr td a img {
        padding-left: 30px;
    }

    .refer {
        border-top: 2px solid #999999 !important;
    }

    .refer button {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    b,
    strong {
        font-weight: bold;
    }

    i,
    em {
        font-style: italic;
    }

@media screen and (max-width: 768px) {
.view-dashboard-button, a.view-dashboard-button {
border: none!important;=20
text-decoration: underline !important;
font-weight: normal !important;
}
}
@media screen and (max-width: 960px) {
.desktop {
mso-hide: all !important;
display: none !important;
}

        .mobile {
            display: block !important;
        }

        .mobile-button {
            border: none !important;
            text-decoration: underline !important;
            font-weight: normal !important;
        }

        .responsive-header {
            font-size: 18px !important;
            margin-right: auto !important;
        }

        .responsive-header-logo {
            margin-left: auto !important;
        }

        .from-section-desktop {
            border-bottom: none !important;
            border-top-right-radius: 18px;
        }

        .from-section-mobile {
            border-bottom: 2px solid #b8b8b8 !important;
        }
    }

    @media screen and (max-width: 573px) {
        .primary-button {
            width: 100% !important;
            margin-bottom: 20px;
            margin-right: 0 !important
        }

        .secondary-button {
            width: 100% !important;
            margin-top: 0 !important;
            margin-right: 0 !important
        }

        .refer button {
            margin-right: 0 !important;
        }

        .referButtons {
            text-align: center !important;
            margin-left: 0px !important;
        }

        .refer-email-button,
        .refer-text-button,
        #refer-email-link,
        #refer-text-link {
            text-align: center !important;
            margin-left: 0px !important;
            display: block !important;
            width: 100% !important;
        }
    }

</style><!-- Begin: Makes background images in 72ppi Outlook render at=

correct size. →

@media screen and (max-width: 960px) { .desktop { mso-hide: all !important; display: none !important; }
        .mobile {
            display: block !important;
        }

        .mobile-button {
            border: none !important;
            text-decoration: underline !important;
            font-weight: normal !important;
        }

        .responsive-header {
            font-size: 18px !important;
            margin-right: auto !important;
        }

        .responsive-header-logo {
            margin-left: auto !important;
        }

        .from-section-desktop {
            border-bottom: none !important;
            border-top-right-radius: 18px;
        }

        .from-section-mobile {
            border-bottom: 1px solid #b8b8b8;
        }
    }

    @media screen and (max-width: 573px) {
        .primary-button {
            width: 100% !important;
            margin-bottom: 20px;
            margin-right: 0 !important
        }

        .secondary-button {
            width: 100% !important;
            margin-top: 0 !important;
            margin-right: 0 !important
        }

        .refer button {
            margin-right: 0 !important;
        }

        .referButtons {
            text-align: center !important;
            margin-left: 0px !important;
        }

        .refer-email-button,
        .refer-text-button,
        #refer-email-link,
        #refer-text-link {
            text-align: center !important;
            margin-left: 0px !important;
            display: block !important;
            width: 100% !important;
        }
    }
</style><!--[if mso]>
    <table role=3D"presentation" class=3D"mso-ghost-wrapper" align=3D"c=

enter" width=3D"820" cellpadding=3D"0" cellspacing=3D"0" border=3D"0">

<td width=3D"100%">
<![endif]–>

<= !-- to get around auto margin/padding inconsistencies on mobile -->
=3D"USPS

COMING TO YOU SOON

You have 0 inbound pa= ckage(s) arriving soon.

Tuesday

18=
June
2024

0

Mailpiece(s)

=C2=A0

0

Package(s)

You have 0 mailpiece(s) and 0 inbound package(s) arriving soon.

Jun<= h1 class=3D"header-font-colors" style=3D"mso-line-height-rule: exactly;mso-= hide:all;font-size: 26px; padding-top:0px;" i= d=3D"date-day-secondary"> 18

0

Mailpiece(s)<= /p>

0

Package(s)

<= /td>
3D"Icon

=C2=A0=C2=A0MAIL

View Dashboard

There is one or = more mailpieces for which we do not currently have an image that is includ= ed in today's mail.

3D"multi

I prepared this example of how the dark mode HTML rendering sometimes renders things I cannot read.

If you are having problems viewing emails using the Dark Theme in eM Client V9.x or V10.x Beta for desktop, then you can try using the “Toggle dark / light” mode button at the top right of the email as in the below eM Client support video example.

https://www.emclient.com/assets/video/localized/en/Toggle-Dark-Light-mode.mp4

The eM Client mobile app doesn’t have that toggle dark / light mode at this stage. Don’t know if that will be in a later version. Hopefully.

If the problem is only with the mobile app, you can send that feedback to [email protected]

If the problem is happening in both dark or light mode even using the latest V10 Beta then send to [email protected]

Thanks yes I do use that but it seems like the interpretation of CSS is off which is what I was hoping to bring to their attention. It is the desktop 9.x version that I have this problem.

It is the desktop 9.x version that I have this problem.

Suggest then to try the latest V10 Beta from the release history page and see if it’s any difference.

If you do try V10, backup V9.x first via “Menu / Backup” so you can easily restore if you need to.

You can see when the backup is complete via clicking the drop-down on the right of Refresh top left, and clicking Show Operations.

Lastly close eM Client before updating.

Many emails I get in dark theme are displayed with black text, so, black text on black background and it’s unreadable. I contacted the sender but they say they are just sending regular emails. Is this just a bug with dark theme? It seems to be an issue in emails sent from mailing lists.

Yes some sender emails are not formatted correctly for dark themes. That is not a fault with eM Client but with the sender html coding.

So at the top right of the body of the email “toggle the dark / light switch” to then view that in non dark theme view. That normal fixes that issue.

See that eM Client video support link I posted further up in this thread on how to do that.

Ah, thanks! I am on v 9.2.2280 but I don’t see any light / dark toggle?

Ah, thanks! I am on v 9.2.2280 but I don’t see any light / dark toggle?

When you are using the built-in “eM Client Dark Theme” via “Menu / Settings (Preferences) / Appearance / Themes”, you will then see at the top right corner of your email body a “Toggle Sun & Moon” small icons as in the V9 below example. This is the same in V9 or 10.

If you don’t see the toggle light and dark icons, then “you might not be using the built-in default dark theme” and could be using a (custom dark theme), where you will then need to modify your dark theme in the Theme Editor to show the toggle icons via “Menu / Tools / Theme Editor”.

(eM Client V9 Dark Theme Toggle light / dark icons)
image

(eM Client V9 Dark Theme Selection)

As well as using the built-in Dark theme, you need to be using the background from the theme. Once you have changed it, restart eM Client to see the toggle.

1 Like

Thanks Gary, seems I was not using font or background color of theme, but for good reason. I really like the dark theme everywhere EXCEPT for when reading emails. I prefer the emails themselves to be regular white background / black font. I actutally find the way I had it is more readable than any other option (for me).

So my request would be for a theme that was as per ‘dark theme’ but where the emails themselves were not on a dark background, but light. : )

I prefer the emails themselves to be regular white background / black font.

Then suggest you maybe look at the following user created Themes where there might be something suitable you can use.

(User created eM Client Themes)
https://www.emclient.com/themes

Ot you could then eg: Save the current Dark Theme and then modify it to suit what you want in the Theme Editor.

(eM Client Themes / Theme Editor)

https://www.emclient.com/webdocumentation/en/9.2/emclient/default.htm#Settings/Themes.htm?Highlight=Theme%20Editor

lunes 07 octubre 2024 :: 1340hrs (UTC +0100)

I do not know if this will work with the eMC Dark Theme in v9.* but you can try, if not you can download from the User Gallery this Dark Theme that does work: https://www.emclient.com/api/themes/7/download

Go to Menu ->Settings ->Mail → ->Read ->Preferred Style →

Here you can select:
BLACK for TEXT
and
WHITE for background

Sorry is in Spanish but position of field is same

DO NOT FORGET TO SAVE CHANGES

¡Buena suerte!

skybat

¡Saludos desde Valencia la soleada en España!
¡Mis mejores deseos y mantente a salvo!

[email protected]

Hablo español, luego portugués, inglés, francés y alemán
con conocimiento de varios otros idiomas.

1 Like

Gracias, pero no podria importalo:

I had to change the exension to .xml to import it …

That is for importing settings, not themes.

  1. You import settings here.

  2. You import themes here.

I seem to be exactly there?

And here we are a year later still with unreadible mail.

Does the email read if you toggle the light button?

Also is it only one specific email that you carn’t see in Dark Theme or all your emails?

Also have you tried adjusting the font colour background etc as advised in the posts above?

Lastly what version of eM Client are you using and do you have Windows or Mac?

I was having trouble finding my original post so I added this email which came today here to this post which is addressing the same issue. But I readlly hadn’t gone through this post in detail as I had some others. The mass html up front wasn’t something I was going to undertake. I think they were just sharing an email’s html that was causing problems. There really was no complaint in the typical sense.

I didn’t even know there was a button until now and I just had resintalled because my system just wouldn’t boot anymore so I may not have had an official dark theme before.

Yes, for this specific email it, the button, does work but I don’t know what email may come tomorrow or the next day. I’ll get one on Friday or Saturday that I know I cannot read the last section of the email but the rest will be perfectly fine and that’s were the button may fall short. This particular one was a little more forgiving than some others.

This is becoming a problem for printing as well so you may want to think about what happens when you print an email with a dark theme or from a dark theme setup regardless of who initiated the dark theme. What will print if you’ve pushed the button and then chose to print? Printing the entire page black doesn’t work well and usually is very unreadible. I just reported the priniting issue to IrfanView yesterday as a matter-of-fact. The problem is that it’s not always easy to recreate a corrected version for printing. I couldn’t even post the example to their forum without it being re-manipulated by the uploading software making it appear like there was no problem. The very software that they use to upload images to their system may be the solution to printing.

As I said above there are certain emails that I know are problems but most work fine.

I have not tried adjusting the font because it’s the email that drives it. Changing a font color would be a very specific fix for a spot in an email and may not be agreeable to the rest of the email. Even a recurring email may not respond in the expected way in the next version of the email. I did not see a post that was referring to a specific font change just some questions regarding if the version was the problem and some html vs css discussion. I would suspect that fixing the outliers based on a simple color choice would create more problems than it would solve.

I don’t know exactly what the logic is behind dealing with mail sent from non-dark themed desktops to people like me that use dark themes because of visual issues with brighness. I’d suggest if you incoprorate a requirment that would essentially ensure that you have a certain depth of brightness from foreground to background? Maybe easier said then done. I don’t know if you can calculate colors from each other alhtough I would suspect that there is some way ensure a depth of contrast from a formula. I see these new high contrast color combos appearing in different places. Windows 10 has high contrast themes or color selections so there must be a way to calculate a contrast to at least know if your resulting output will be readible.

I have Win10 x 64 and the client is 10.3.1738 (984d31d)

As I said above there are certain emails that I know are problems but most work fine.

I’ll get one on Friday or Saturday that I know I cannot read the last section of the email but the rest will be perfectly fine and that’s were the button may fall short. This particular one was a little more forgiving than some others.

If you are using the default built-in eM Client Dark Theme and a specific senders email does not display properly (but others do display ok), then it usually means the html in the senders email is not designed 100% for Dark themes or has some issue with it and the specific email coding will need to be checked out to see why it won’t display properly.

So when you get another one like that, if you have a current active paid Pro or Personal version go to the VIP support page and login and lodge a support ticket “with the specific senders email exported attached as an .eml file”. You can export it to .eml via “Menu / File / Export”.