I recently installed K9 on my Samsung phone and I noticed something strange. This html I have, which works properly on every client I have tested so far, in both light and dark mode (thunderbird, outlook, gmail app, all mainstream pc browsers) does not render correctly in dark mode on K9. I am referring specifically to the second picture in the html (marked in the code with ***). It just disappears in dark mode.
<title>Title</title>
<div style="width: 80%; margin: 0 auto; background-color: #ffffff; padding: 20px; border: 1px solid #E0E0E0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px;">
<div style="text-align: center; padding-bottom: 20px;">
<img style="max-width: 100%; height: auto;" alt="logo" src="https://pictutre">
</div>
***<div style="position: relative; width: 100%; height: 60px; background-image: url('picture'); background-size: cover; background-position: center; text-align: center; color: white; line-height: 60px;">***
<h1 style="position: relative; z-index: 2; font-size: 24px; margin: 0;">Text</h1>
</div>
<div style="margin: 20px 0; border: 2px solid #B4A069; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px;">
<h2 style="color: #A51E37; border-bottom: 2px solid #B4A069; padding-bottom: 5px;">Text</h2>
<h3 style="color: #324148;">Hello There</h3>
<p style="font-size: 14px; line-height: 1.6;">Text</p>
<h3 style="color: #324148;">Sub-title 2</h3>
<p style="font-size: 14px; line-height: 1.6;">Text</p>
</div>
<div style="margin: 20px 0; border: 2px solid #B4A069; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px;">
<h2 style="color: #A51E37; border-bottom: 2px solid #B4A069; padding-bottom: 5px;">Text</h2>
<h3 style="color: #324148;">Sub-title 1</h3>
<p style="font-size: 14px; line-height: 1.6;">Small paragraph related to sub-title 1. Text.</p>
<h3 style="color: #324148;">Sub-title 2</h3>
<p style="font-size: 14px; line-height: 1.6;">Small paragraph related to sub-title 2. text</p>
</div>
<div style="text-align: center; font-size: 12px; color: #B4A069; border-top: 1px solid #E0E0E0; padding-top: 10px; margin-top: 20px;">
xx
</div>
</div>