Dark mode theme formatting issue (unreadable text)

dma2112 · June 18, 2024, 12:50pm

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 -->

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>

=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.

cyberzork · June 19, 2024, 3:11am

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]

dma2112 · June 19, 2024, 11:38am

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.

cyberzork · June 19, 2024, 9:06pm

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.

si1 · October 6, 2024, 7:26am

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.

cyberzork · October 6, 2024, 7:59am

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.

si1 · October 6, 2024, 10:22am

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

cyberzork · October 6, 2024, 1:07pm

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)

(eM Client V9 Dark Theme Selection)

Gary · October 6, 2024, 2:28pm

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.

si1 · October 6, 2024, 10:16pm

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. : )

cyberzork · October 6, 2024, 10:41pm

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

skybat · October 7, 2024, 11:41am

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
style