iPhone端Apple Mail深色模式下HTML签名背景变白问题求助

修改步骤 #

• 确保所有容器背景设置为透明，避免Mail应用强制填充白色
• 添加深色模式媒体查询，自动切换文本、边框颜色
• 替换固定RGB颜色为适配明暗模式的动态值

修改后的完整签名代码 #

<div style="background-color: transparent !important;">
    <style>
        .sh-src a {
            text-decoration: none !important;
        }
        /* 深色模式适配 */
        @media (prefers-color-scheme: dark) {
            .dark-text {
                color: #ffffff !important;
            }
            .dark-muted-text {
                color: #cccccc !important;
            }
            .dark-border {
                border-color: #007bff !important;
            }
            .sh-src, .sh-src table {
                background-color: transparent !important;
            }
        }
    </style>
</div>
<br />
<table cellpadding="0" cellspacing="0" border="0" class="sh-src" style="margin: 0px; border-collapse: collapse; background-color: transparent !important;">
    <tr>
        <td style="padding: 0px 1px 0px 0px; background-color: transparent !important;">
            <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; margin: 0px; background-color: transparent !important;">
                <tr>
                    <td valign="top" style="padding: 0px 17px 0px 1px; vertical-align: top; background-color: transparent !important;">
                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse; background-color: transparent !important;">
                            <tr>
                                <td style="padding: 0px 1px 0px 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; background-color: transparent !important;">
                                    <p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(0, 0, 0); white-space: nowrap; margin: 1px;" class="dark-text">My name</p>
                                    <p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 19px; white-space: nowrap; color: rgb(136, 136, 136); margin: 1px;" class="dark-muted-text">My function</p>
                                </td>
                            </tr>
                            <tr>
                                <td valign="middle" colspan="3" style="padding: 3px 1px 0px 0px; vertical-align: middle; background-color: transparent !important;">
                                    <table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse; background-color: transparent !important;">
                                        <tr>
                                            <td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px; background-color: transparent !important;">
                                                <p style="margin: 1px;">
                                                    <a href="linkedin url" target="_blank">
                                                        <img src="https://signaturehound.com/api/v1/png/linkedin/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
                                                    </a>
                                                </p>
                                            </td>
                                            <td width="2" style="padding: 0px 0px 1px; background-color: transparent !important;"></td>
                                            <td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px; background-color: transparent !important;">
                                                <p style="margin: 1px;">
                                                    <a href="insta url" target="_blank">
                                                        <img src="https://signaturehound.com/api/v1/png/instagram/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
                                                    </a>
                                                </p>
                                            </td>
                                            <td width="2" style="padding: 0px 0px 1px; background-color: transparent !important;"></td>
                                            <td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px; background-color: transparent !important;">
                                                <p style="margin: 1px;">
                                                    <a href="YouTube url" target="_blank">
                                                        <img src="https://signaturehound.com/api/v1/png/youtube/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
                                                    </a>
                                                </p>
                                            </td>
                                            <td width="2" style="padding: 0px 0px 1px; background-color: transparent !important;"></td>
                                            <td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px; background-color: transparent !important;">
                                                <p style="margin: 1px;">
                                                    <a href="imdb url" target="_blank">
                                                        <img src="https://signaturehound.com/api/v1/png/imdb/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
                                                    </a>
                                                </p>
                                            </td>
                                            <td width="2" style="padding: 0px 0px 1px; background-color: transparent !important;"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="padding: 1px 0px 0px; border-right-width: 2px; border-right-style: solid; border-right-color: rgb(0, 123, 255); background-color: transparent !important;" class="dark-border"></td>
                    <td valign="top" style="padding: 0px 1px 0px 17px; vertical-align: top; background-color: transparent !important;">
                        <table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse; background-color: transparent !important;">
                            <tr>
                                <td style="padding: 0px 1px 0px 0px; background-color: transparent !important;">
                                    <table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse; background-color: transparent !important;">
                                        <tr>
                                            <td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle; background-color: transparent !important;">
                                                <p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/email/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
                                            </td>
                                            <td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle; background-color: transparent !important;" class="dark-muted-text">
                                                <p style="margin: 1px;">
                                                    <a
                                                        href="mailto:mail"
                                                        target="_blank"
                                                        style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
                                                        class="dark-muted-text"
                                                    >
                                                        <span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;" class="dark-muted-text">
                                                            mail.com
                                                        </span>
                                                    </a>
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle; background-color: transparent !important;">
                                                <p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/mobile/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
                                            </td>
                                            <td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle; background-color: transparent !important;" class="dark-muted-text">
                                                <p style="margin: 1px;">
                                                    <a
                                                        href="tel:phone"
                                                        target="_blank"
                                                        style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
                                                        class="dark-muted-text"
                                                    >
                                                        <span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;" class="dark-muted-text">
                                                            My phone
                                                        </span>
                                                    </a>
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle; background-color: transparent !important;">
                                                <p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/website/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
                                            </td>
                                            <td
                                                style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 254) !important; font-weight: 700; padding: 1px 0px; vertical-align: middle; background-color: transparent !important;"
                                            >
                                                <p style="margin: 1px;">
                                                    <a
                                                        href="domain.com"
                                                        target="_blank"
                                                        style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;"
                                                    >
                                                        <span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;">
                                                            domain.com
                                                        </span>
                                                    </a>
                                                </p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="padding: 0px 1px 14px 0px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 123, 255); background-color: transparent !important;" class="dark-border"></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding: 0px 1px 0px 0px; background-color: transparent !important;">
            &nbsp;
        </td>
    </tr>
</table>

关键修改说明 #

1. 背景透明强制设置：给所有外层容器和表格添加background-color: transparent !important，彻底阻止Mail应用在深色模式下自动填充白色背景
2. 深色模式媒体查询：通过@media (prefers-color-scheme: dark)识别系统深色模式，将原本的黑色文本转为白色，灰色文本转为浅灰色，保证可读性
3. 类名复用：定义.dark-text、.dark-muted-text、.dark-border类，统一控制明暗模式下的颜色切换，避免重复代码

内容的提问来源于stack exchange，提问作者Saku