Mail Body Edit Modal Not Showing Correct Colours

Wappler Version : 7 RC1
Operating System : Win11
Server Model: NodeJS
Database Type: MariaDB
Hosting Type: Windows Server

Expected behavior

What do you think should happen?

Editing an email in Server Actions should result in the message displaying the correct colours taken from the styling in the message code.

Actual behavior

What actually happens?

The email preview shows the background colour thats tied to the system theme and not whats actually in the message body

How to reproduce

Edit email content using the built in editor:

image

The BG in this email should be white in the preview, the button should be blue and the text black/light grey:

Could you post some more html, how is the background defined, is it in a css style or as attribute in the html?

Sure, heres the full list - this has been tested extensively to ensure its viewable on the majority of devices, its been in use for a few years now,

<base href="/mail/">
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"> <!-- Tell iOS not to automatically link certain text strings. -->
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->

    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->

    <!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 23 - 41 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: https://web.archive.org/web/20190717120616/http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
    <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
    <!--<![endif]-->

    <!-- Web Font / @font-face : END -->

    <!-- CSS Reset : BEGIN -->
    <style>
        /* What it does: Tells the email client that both light and dark styles are provided. A duplicate of meta color-scheme meta tag above. */
        :root {
            color-scheme: light dark;
            supported-color-schemes: light dark;
        }

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin: 0 !important;
        }

        /* What it does: forces Samsung Android mail clients to use the entire viewport */
        #MessageViewBody,
        #MessageWebViewDiv {
            width: 100% !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Fixes webkit padding issue. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode: bicubic;
        }

        /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
        a {
            text-decoration: none;
        }

        /* What it does: A work-around for email clients meddling in triggered links. */
        a[x-apple-data-detectors],
        /* iOS */
        .unstyle-auto-detected-links a,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }

        /* What it does: Prevents Gmail from changing the text color in conversation threads. */
        .im {
            color: inherit !important;
        }

        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img+div {
            display: none !important;
        }

        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */

        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
            u~div .email-container {
                min-width: 320px !important;
            }
        }

        /* iPhone 6, 6S, 7, 8, and X */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
            u~div .email-container {
                min-width: 375px !important;
            }
        }

        /* iPhone 6+, 7+, and 8+ */
        @media only screen and (min-device-width: 414px) {
            u~div .email-container {
                min-width: 414px !important;
            }
        }
    </style>
    <!-- CSS Reset : END -->

    <!-- Progressive Enhancements : BEGIN -->
    <style>
        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }

        .button-td-primary:hover,
        .button-a-primary:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 600px) {

            /* What it does: Adjust typography on small screens to improve readability */
            .email-container p {
                font-size: 17px !important;
            }

        }

        /* Dark Mode Styles : BEGIN */
        @media (prefers-color-scheme: dark) {
            .email-bg {
                background: #111111 !important;
            }

            .darkmode-bg {
                background: #222222 !important;
            }

            h1,
            h2,
            h3,
            p,
            li,
            .darkmode-text,
            .email-container a:not([class]) {
                color: #F7F7F9 !important;
            }

            td.button-td-primary,
            td.button-td-primary a {
                background: #ffffff !important;
                border-color: #ffffff !important;
                color: #222222 !important;
            }

            td.button-td-primary:hover,
            td.button-td-primary a:hover {
                background: #cccccc !important;
                border-color: #cccccc !important;
            }

            .footer td {
                color: #aaaaaa !important;
            }

            .darkmode-fullbleed-bg {
                background-color: #0F3016 !important;
            }
        }

        /* Dark Mode Styles : END */
    </style>
    <!-- Progressive Enhancements : END -->


<!--
	The email background color (#222222) is defined in three places:
	1. body tag: for most email clients
	2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
	3. mso conditional: For Windows 10 Mail
-->


    <center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #ebeff7;" class="email-bg">
        <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;" class="email-bg">
    <tr>
    <td>
    <![endif]-->

        <!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="max-height:0; overflow:hidden; mso-hide:all;" aria-hidden="true">
            This is an email sent from Rigg Access Ltd
        </div>
        <!-- Visually Hidden Preheader Text : END -->

        <!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
        <!-- Preview Text Spacing Hack : BEGIN -->
        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
            β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ 
        </div>
        <!-- Preview Text Spacing Hack : END -->

        <!--
            Set the email width. Defined in two places:
            1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
            2. MSO tags for Desktop Windows Outlook enforce a 600px width.
        -->
        <div style="max-width: 600px; margin: 0 auto;" class="email-container">
            <!--[if mso]>
            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
            <tr>
            <td>
            <![endif]-->

            <!-- Email Body : BEGIN -->
            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
                <!-- Email Header : BEGIN -->
                <tbody><tr>
                    <td style="padding: 20px 0; text-align: center">
                        <img src="https://rigg-access.com/assets/images/logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto;  font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                    </td>
                </tr>
                <!-- Email Header : END -->

                <!-- Hero Image, Flush : BEGIN -->
                <tr>
                    <td style="background-color: #ffffff;" class="darkmode-bg">

                    </td>
                </tr>
                <!-- Hero Image, Flush : END -->

                <!-- 1 Column Text + Button : BEGIN -->
                <tr>
                    <td style="background-color: #ffffff;" class="darkmode-bg">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tbody><tr>
                                <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
                                    <h2 style="text-align:center; margin: 0 0 20px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Your Account is Live.!</h2>

                                    <p style="margin: 0;"> Hi {{queryUsersDetails.firstname}},</p>


                                    <p style="margin: 10;">Great news, your Rigg Access personnel account is now live.</p>

                                    <p style="margin: 10;"><b>Account Details:</b><br> Please ensure you always have:
                                    </p><ul>
                                        <li>An up to date CV uploaded to your profile, use the CV Elevate option to use our AI assistant to make it better</li>
                                        <li>Certificates in your Ticket Vault</li>
                                        <li>Your <i><b>full</b></i> profile page completed</li>
                                    </ul>


                                    <p style="margin: 10;">Your account also includes tools for you to enhance your career, from speculative job enquiries, to live salary info and training match - we encourage you to take a look around your new account and get to know its features as they really can make a difference to your prospects.<br><br>As you already know, height work is a very photogenic industry so please take a look at your photo gallery and upload some photos of you in action - we'll be creating a sales channel in the near future that will allow you to sell your action shots directly from your account - <i>we'll email you to let you know when this is live.</i><br><br>We offer comprehensive support for all software and web apps we operate so please drop us a line if you have any questions and we'll be glad to help.<br><br><b><i>Welcome aboard {{queryUsersDetails.firstname}}..!</i></b></p>


                                    <p style="margin: 10;">Please reply back to this email if you have any issues and I'll be happy to assist.
                                    </p>

                                    <p style="margin: 10;">Kind regards,<br><br>Terri - Rigg Access admin
                                    </p>


                                </td>
                            </tr>

                        </tbody></table>
                    </td>
                </tr>
                <!-- 1 Column Text + Button : END -->



                <!-- Clear Spacer : BEGIN -->
                <tr>
                    <td aria-hidden="true" height="40" style="font-size: 0px; line-height: 0px;">
                         
                    </td>
                </tr>
                <!-- Clear Spacer : END -->

                <!-- 1 Column Text : BEGIN -->
                <tr>
                    <td style="background-color: #ffffff;" class="darkmode-bg">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tbody><tr>
                                <td style="padding: 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">

                                    <p style="margin: 0;">We recommend you keep your account up to date as our network of employers is increasing daily.</p>
                                </td>
                            </tr>

                            <tr>
                                <td style="border-radius: 20px; padding: 10px; font-family: sans-serif; font-size: 15px; line-height: 10px; color: #555555;">
                                    <!-- Button : BEGIN -->
                                    <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
                                        <tbody><tr>
                                            <td class="button-td button-td-primary" style="border-radius: 6px; background: #222222;">
                                                <a class="button-a button-a-primary" href="https://rigg-access.com/personnel/login" style="background: #27a2fc; border: 1px solid #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Personnel Log in</a>
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    <!-- Button : END -->
                                </td>
                            </tr>
                        </tbody></table>
                    </td>
                </tr>
                <!-- 1 Column Text : END -->

            </tbody></table>
            <!-- Email Body : END -->

            <!-- Email Footer : BEGIN -->
            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;" class="footer">
                <tbody><tr>
                    <td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #000000;">

                        <br><br>
                        Rigg Access Ltd<br><span class="unstyle-auto-detected-links">https://rigg-access.com</span>
                        <br><br>
                    </td>
                </tr>


                <tr>
                    <td style="overflow-wrap:break-word;word-break:break-word;padding:20px 10px 10px;font-family:arial,helvetica,sans-serif;" align="left">

                        <div align="center">
                            <div style="display: table; max-width:140px;">
                                <!--[if (mso)|(IE)]><table width="140" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-collapse:collapse;" align="center"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width:140px;"><tr><![endif]-->


                                <!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 15px;" valign="top"><![endif]-->
                                <table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 15px">
                                    <tbody>
                                        <tr style=" vertical-align: top">
                                            <td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
                                                <a href="https://www.facebook.com/groups/ropeaccessjobs" title="Facebook" target="_blank">
                                                    <img src="https://rigg-access.com/assets/images/mail/image-1.png" alt="Facebook" title="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--[if (mso)|(IE)]></td><![endif]-->

                                <!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 15px;" valign="top"><![endif]-->
                                <table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 15px">
                                    <tbody>
                                        <tr style="vertical-align: top">
                                            <td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
                                                <a href="https://twitter.com/riggaccess" title="Twitter" target="_blank">
                                                    <img src="https://rigg-access.com/assets/images/mail/image-2.png" alt="Twitter" title="Twitter" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--[if (mso)|(IE)]></td><![endif]-->

                                <!--[if (mso)|(IE)]><td width="32" style="width:32px; padding-right: 0px;" valign="top"><![endif]-->
                                <table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 0px">
                                    <tbody>
                                        <tr style="vertical-align: top">
                                            <td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
                                                <a href="https://www.linkedin.com/company/10067185/" title="LinkedIn" target="_blank">
                                                    <img src="https://rigg-access.com/assets/images/mail/image-4.png" alt="LinkedIn" title="LinkedIn" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!--[if (mso)|(IE)]></td><![endif]-->


                                <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
                            </div>
                        </div>

                    </td>
                </tr>






            </tbody></table>
            <!-- Email Footer : END -->

            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>

        <!-- Full Bleed Background Section : BEGIN -->
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #27a2fc;" class="darkmode-fullbleed-bg">
            <tbody><tr>
                <td>
                    <div align="center" style="max-width: 600px; margin: auto;" class="email-container">
                        <!--[if mso]>
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
                        <tr>
                        <td>
                        <![endif]-->
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tbody><tr>
                                <td style="padding: 10px; text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
                                    <p style="margin: 0;">We offer support seven days a week, contact us with any questions or queries</p>
                                </td>
                            </tr>
                        </tbody></table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </div>
                </td>
            </tr>
        </tbody></table>
        <!-- Full Bleed Background Section : END -->

        <!--[if mso | IE]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </center>

So this is not a template file you're using, but you're pasting it directly in the mail body/content in the UI?

Yes, I wasn't aware template files could be used in this editor.

Yes you can select an html file for the mail body:
Screenshot 2025-06-03 at 12.37.44

I've tested it with your html template and it shows the dark theme. I tested it in light mode and it showed correctly with a white background.

The editor should be reflecting what the email actually looks like - as it does in 6.8 and not what theme is selected for the Wappler UI.

It does reflect what the email actual looks like, the css in your email template has autodetection for the theme. If the email should not have dark mode you should remove it from its css.

I've got hundreds of these in one site, each email is different so there's no way I'll be hand-balling them to make any more changes (each change will have to be tested again on all relevant mail platforms). All have worked perfectly for years. If it can't be changed I guess I'll have to put up with it.

Is there any way to switch theme in the Mail Body editing window? Instead of having to change it for the whole UI (I edit using a dark theme as standard).

I will see what is possible, maybe we can add a button to the toolbar to toggle the theme.

1 Like

Thank you, that would be great if you could, it’s not a major thing but just one of those little annoyances that sometimes crop up.

Fixed in Wappler 7 RC2. Now there's a dark/light mode switcher available.

1 Like

Works perfectly, many thanks for that :slight_smile:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.