ARTICLE AD BOX
I am using a HTML template (shared below) with placeholders to generate the body of an email, which is sent to users using a logic app workflow. Despite attempting to define the [data-ogsc] attribute, it still overwrites the background of the email body - which i need to retain despite the user's preferred theme. How can i improve my HTML template to ensure that the defined colors persist irrespective of the user's theme?
<!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Prevent dark mode inversion in Outlook and Apple Mail --> <meta name="color-scheme" content="light" /> <meta name="supported-color-schemes" content="light" /> <title>AI & Technology Radar — Weekly Edition</title> <style> /* Force light mode only */ :root { color-scheme: light only; } /* Outlook dark mode override — [data-ogsc] is injected by Outlook when dark mode is on */ [data-ogsc] body { background-color: #f2f2f2 !important; } [data-ogsc] .outer-td { background-color: #f2f2f2 !important; } [data-ogsc] .main-wrap { background-color: #0B0B0B !important; } [data-ogsc] .main-td { background-color: #0B0B0B !important; } [data-ogsc] .signal-card-td { background-color: #1A1A1A !important; } [data-ogsc] .signal-wrap-td { background-color: #0B0B0B !important; } [data-ogsc] .section-td { background-color: #0B0B0B !important; } [data-ogsc] .footer-td { background-color: #97999b !important; } [data-ogsc] .green-header-td { background-color: #86BC25 !important; } [data-ogsc] .text-white { color: #f5f5f5 !important; } [data-ogsc] .text-green { color: #86bc25 !important; } [data-ogsc] .text-lightgreen { color: #99ff99 !important; } [data-ogsc] .text-dark { color: #1a1a1a !important; } [data-ogsc] .text-header-white { color: #ffffff !important; } [data-ogsc] p { color: #f5f5f5 !important; } /* Apple Mail / Gmail dark mode override */ @media (prefers-color-scheme: dark) { body { background-color: #f2f2f2 !important; } .outer-td { background-color: #f2f2f2 !important; } .main-wrap { background-color: #0B0B0B !important; } .main-td { background-color: #0B0B0B !important; } .signal-card-td { background-color: #1A1A1A !important; } .signal-wrap-td { background-color: #0B0B0B !important; } .section-td { background-color: #0B0B0B !important; } .footer-td { background-color: #97999b !important; } .green-header-td { background-color: #86BC25 !important; } .text-white { color: #f5f5f5 !important; } .text-green { color: #86bc25 !important; } .text-lightgreen { color: #99ff99 !important; } .text-dark { color: #1a1a1a !important; } .text-header-white { color: #ffffff !important; } } </style> </head> <body style=" background-color: #f2f2f2; margin: 0; padding: 40px 0; font-family: Arial, Helvetica, sans-serif; " > <table width="100%" bgcolor="#F2F2F2" cellpadding="0" cellspacing="0"> <tr> <td align="center" class="outer-td" style="background-color: #f2f2f2;"> <!-- Main dark container --> <table width="680" bgcolor="#0B0B0B" cellpadding="0" cellspacing="0" class="main-wrap" style="margin: 0 auto; padding: 0; background-color: #0B0B0B;" > <!-- Header --> <tr> <td class="main-td" style="padding: 32px; text-align: center; background-color: #0B0B0B;"> <h1 class="text-green" style=" color: #86bc25; font-size: 24px; font-weight: bold; margin: 0; " > AI & Technology Radar — Weekly Edition </h1> <p class="text-white" style=" color: #f5f5f5; font-size: 16px; margin: 8px 0; " > Edition Date: {{DatePlaceholder}} </p> <p class="text-green" style=" color: #86bc25; font-size: 16px; font-style: italic; font-weight: bold; margin: 16px 0; " > {{OverviewPlaceholder}} </p> </td> </tr> <!-- Divider --> <tr> <td class="main-td" style="border-top: 1px solid #333333; background-color: #0B0B0B;"></td> </tr> <!-- Executive Summary --> <tr> <td class="section-td" style="padding: 32px; background-color: #0B0B0B;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#86BC25" class="green-header-td text-header-white" style=" color: #ffffff; font-size: 18px; font-weight: bold; padding: 8px; background-color: #86BC25; " > Executive Summary </td> </tr> <tr> <td class="main-td text-white" style=" color: #f5f5f5; font-size: 15px; padding: 16px; background-color: #0B0B0B; " > <ul style="margin: 0; padding: 0;"> {{ExecutiveSummary - Unordered list}} </ul> </td> </tr> </table> </td> </tr> <!-- This Week's Signals --> <tr> <td class="section-td" style="padding: 32px; background-color: #0B0B0B;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#86BC25" class="green-header-td text-header-white" style=" color: #ffffff; font-size: 18px; font-weight: bold; padding: 8px; background-color: #86BC25; " > This Week's Signals </td> </tr> <!-- Signal 1 --> <tr> <td class="signal-wrap-td" style="padding: 16px; background-color: #0B0B0B;"> <table width="100%" bgcolor="#1A1A1A" cellpadding="16" cellspacing="0" style="border: 1px solid #333333; border-radius: 8px; background-color: #1A1A1A;" > <tr> <td class="signal-card-td text-green" style=" color: #86bc25; font-size: 17px; font-weight: bold; background-color: #1A1A1A; " > 1. {{Signal_1_Title}} </td> </tr> <tr> <td class="signal-card-td text-white" style=" color: #f5f5f5; font-size: 15px; background-color: #1A1A1A; " > <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">What's new?</strong> <br /> <p class="text-white" style="color: #f5f5f5;">{{Signal_1_WhatsNew}}</p> <br /> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Who should care?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_1_WhoShouldCare}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Why does it matter to Deloitte?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_1_Why4Deloitte}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">How do i dig deeper?</strong> <ul style="margin: 0; padding: 0; list-style: none;"> {{Signal_1_DigDeeperLinks}} </ul> </td> </tr> </table> </td> </tr> <!-- Signal 2 --> <tr> <td class="signal-wrap-td" style="padding: 16px; background-color: #0B0B0B;"> <table width="100%" bgcolor="#1A1A1A" cellpadding="16" cellspacing="0" style="border: 1px solid #333333; border-radius: 8px; background-color: #1A1A1A;" > <tr> <td class="signal-card-td text-green" style=" color: #86bc25; font-size: 17px; font-weight: bold; background-color: #1A1A1A; " > 2. {{Signal_2_Title}} </td> </tr> <tr> <td class="signal-card-td text-white" style=" color: #f5f5f5; font-size: 15px; background-color: #1A1A1A; " > <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">What's new?</strong> <br /> <p class="text-white" style="color: #f5f5f5;">{{Signal_2_WhatsNew}}</p> <br /> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Who should care?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_2_WhoShouldCare}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Why does it matter to Deloitte?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_2_Why4Deloitte}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">How do i dig deeper?</strong> <ul style="margin: 0; padding: 0; list-style: none;"> {{Signal_2_DigDeeperLinks}} </ul> </td> </tr> </table> </td> </tr> <!-- Signal 3 --> <tr> <td class="signal-wrap-td" style="padding: 16px; background-color: #0B0B0B;"> <table width="100%" bgcolor="#1A1A1A" cellpadding="16" cellspacing="0" style="border: 1px solid #333333; border-radius: 8px; background-color: #1A1A1A;" > <tr> <td class="signal-card-td text-green" style=" color: #86bc25; font-size: 17px; font-weight: bold; background-color: #1A1A1A; " > 3. {{Signal_3_Title}} </td> </tr> <tr> <td class="signal-card-td text-white" style=" color: #f5f5f5; font-size: 15px; background-color: #1A1A1A; " > <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">What's new?</strong> <br /> <p class="text-white" style="color: #f5f5f5;">{{Signal_3_WhatsNew}}</p> <br /> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Who should care?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_3_WhoShouldCare}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">Why does it matter to Deloitte?</strong> <p class="text-white" style="color: #f5f5f5;">{{Signal_3_Why4Deloitte}}</p> <strong class="text-lightgreen" style="color: #99ff99; font-size: 13px; text-transform: uppercase;">How do i dig deeper?</strong> <ul style="margin: 0; padding: 0; list-style: none;"> {{Signal_3_DigDeeperLinks}} </ul> </td> </tr> </table> </td> </tr> </table> </td> </tr> <!-- Recommended Actions --> <tr> <td class="section-td" style="padding: 32px; background-color: #0B0B0B;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#86BC25" class="green-header-td text-header-white" style=" color: #ffffff; font-size: 18px; font-weight: bold; padding: 8px; background-color: #86BC25; " > Recommended Actions </td> </tr> <tr> <td class="main-td text-white" style=" color: #f5f5f5; font-size: 15px; padding: 16px; background-color: #0B0B0B; " > <ul style="margin: 0; padding: 0; list-style: none;"> {{RecommendedActions_Items}} </ul> </td> </tr> </table> </td> </tr> <!-- Footer --> <tr> <td class="footer-td text-dark" style=" background-color: #97999b; color: #1a1a1a; font-size: 12px; text-align: center; padding: 16px; " > <p class="text-dark" style="margin: 0; color: #1a1a1a;"> This newsletter is produced by the Alphalabs team's Technical Research Platform, a cutting-edge research engine which continuously monitors emerging signals across research publications and technology news to surface trends relevant to our clients and practice areas. </p> <p class="text-dark" style="margin: 0; color: #1a1a1a;"> © Deloitte 2026. For internal use only. </p> </td> </tr> </table> </td> </tr> </table> </body> </html>The email in an inbox with dark theme The preferred design (in an inbox having a colorful/white team)
1
Explore related questions
See similar questions with these tags.
