'Why does my dark mode logo display when viewing email using iCloud.com's Mail client only?

I have light and dark mode versions of my logo, with light mode set as the default. When I view my email on iCloud.com's Mail app, the dark mode version of my logo, which is all white, displays. With the white background behind the logo, the logo becomes hidden. I should see the color version of my logo with the white background behind as shown below.

This issue ONLY appears with iCloud.com's Mail app using my laptop/desktop. It does NOT happen in the mobile iOS version (iPhone & iPad), nor does it happen in Gmail and Outlook.

The mso code below is for Outlook, so in my case I'm saying if it's not Outlook, load the div with the "dark-img" class. This is hidden by default until the CSS media query "dark" is preferred by the user. Then I show the white logo (.dark-img) and hide the color logo (.light-img).

@media (prefers-color-scheme: dark) {
  /* Shows Dark Mode-Only Content, Like Images */
  .dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: normal !important;
    margin-top: 0px !important;
    visibility: inherit !important;
  }
  /* Hides Light Mode-Only Content, Like Images */
  .light-img {
    display: none !important;
  }
}

<img class="light-img" src="https://example.com/content/img/color-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
  border="0">
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="left">
  <img src="https://example.com/content/img/white-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
    border="0">
</div>
<!--<![endif]-->