'how to set text color like background color for light and dark mode on html email

Does anyone here develop html emails? I need some help. I'm trying to make some text in the footer section that will be in the same color as the background color, so it will be like "invisible" and only shown when you mark it with the mouse (not hover). For example: example It works on light mode but it won't work on dark mode, even though I set @media (prefers-color-scheme: dark) and changed the text color there to be black. It's not working- on dark mode the text appears to be white. notes:

  • I can't split the css to another file because the system that my comany uses to send newsletters can take only one file. that is the reason that my html and css are in the same file.
  • when it comes to html email you have to consider all email clients. for example yahoo doesn't read classes. so i need most of the style to be inline.
  • html email cannot read js.

here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <title></title>
    <style type="text/css">
        body{
            Margin: 0;
            padding: 0;
            min-width: 100%;
            background-color: #F3F3F3;
        }
        table{
            border-spacing: 0;
        }
        td{
            padding: 0;
        }
        @media (prefers-color-scheme: dark ) {

            h6 {
                color: black!important;;
            }

        }

        @media (prefers-color-scheme: light ) {
            h6 {
                color: #F3F3F3 !important;
            }

        }
    </style>
    <!--[if mso]>
    <style>
        body{
            font-family: Helvetica, Arial, sans-serif!important;
            text-align: center!important;
            display: inline-block!important;
        }
        table{
            border-collapse: collapse!important;
        }
    </style>
    <![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
    <table style="background-color: #F3F3F3; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; font-family: Helvetica, Arial, sans-serif; padding-bottom: 20px;" width="100%" align="center">
        <tr>
            <td>
                <h6 style="width:20%; color: #F3F3F3; direction: ltr; font-size: 12px; padding-top: 15px; display: inline-block; margin: 0;text-align: left; float: left">some text right here</h6>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

any help?

htmlcsshtml-emailemail-client


Solution 1:[1]

The Gmail app does not support dark mode media queries so far. This site lists a few minor work arounds, but there isn't a way to customize most of Gmail's dark mode handling.

Solution 2:[2]

Try this:

  h6::selection {
    background: red;
    color: #fff;
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Glenn
Solution 2 Jacky001

Related Questions