HTML-письмо. Как сделать темную и светлую тему для логотипа

пытаюсь сверстать html-письмо. У меня есть 2 логотипа, один для темной темы, другой для светлой темы. Сейчас проблема заключается в том, что он мне не выдает эти изображение или же просто показывает эти 2 логотипа вместе, хотя надо чтобы был только один логотип для заданной темы, ни в какую не идет и ничего не помогает. Media-запросы не помогают, а также script нельзя подключать к html-письму. Нужно сделать так, чтобы работало в gmail app, потому что там только такая проблема. Во всех остальных такой проблемы нет.

style:

.logo-img-dark,
    .logo-img-light {
        display: inline-block;
    }

    .logo-img-dark {
        display: none;
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: var(--background-color-dark);
            color: var(--text-color-dark);
        }

        .logo-img-dark {
            display: inline-block;
        }

        .logo-img-light {
            display: none;
        }
    }

    @media (prefers-color-scheme: light) {
        body {
            background-color: var(--background-color-light);
            color: var(--text-color-light);
        }

        .logo-img-dark {
            display: none;
        }

        .logo-img-light {
            display: inline-block;
        }
    }


<!-- Logo -->
                <tr>
                    <td>
                        <table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
                            <tr>
                                <td>
                                    <img id="logo-img-dark" src="dfrgthjukilokjhg" alt="Dark Logo"
                                        style="display: none; vertical-align: middle; margin-left: 20px">
                                    <img id="logo-img-light" src="fghjkjg" alt="Light Logo"
                                        style="display: none; vertical-align: middle; margin-left: 20px">
                                    <p class="logo-text" style="display: inline-block; margin-left: 10px; font-size: 24px; font-weight: 700; line-height: 24px; text-decoration: none; vertical-align: middle;"></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- End Logo -->