CODEWITHSUNDEEP
htmlcsshtml-emailemail-client
Noym
Noym

Reputation: 41

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:

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?

Upvotes: 2

Views: 4690

Answers (2)

Jacky001
Jacky001

Reputation: 73

Try this:

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

Upvotes: -1

John Glenn
John Glenn

Reputation: 1629

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.

Upvotes: 0

Related Questions