Hi,
we are looking into using media query in our HTML emails so our logo will work for both devices with dark mode and regular ones.
The idea is to use our logo in SVG format. Whenever the app uses dark mode, the color of the word/font will change to white.
just an example:
(prefers-color-scheme: dark) {
.darkmode { background-color: #111111 !important; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff !important; }
.dark-logo { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-logo { display:none; display:none !important; }
However, we are not able to upload SVG on ACS. We have found previous posts about this here but without a specific answer.
is it possible to use SVG on Campaign Standard?
cheers
PS: We already tried inserting the SVG code inside the HTML, but ACS does not like it. It keeps uploading the template forever.
Views
Replies
Total Likes
Hi Fern,
At this time, SVG is not supported. If necessary, I recommend opening a ticket with Campaign Support for an enhancement request.
Thank you,
Craig
Hi @fern1,
@Craig_Thonis is right, in the meantime while contacting support you can try to convert your SVG files into PNG files.
Regards,
Celia
Views
Replies
Total Likes
With PNG our issue remains the same with our logo not working properly on darkmode.
And applying media query does not work for all apps.
Views
Replies
Total Likes
Hi @fern1 ,
An alternative approach:
- Convert to SVG logos into two separate PNG files - one for light mode and one for dark mode.
-Conditional image loading: Instead of just using media queries only, use a mix of HTML and inline CSS to conditionally load the correct PNG image based on the user's theme. This can be made by embedding both images in the email and using a media query to hide/show the appropriate one. Here is a code example:
<style>
@media (prefers-color-scheme: dark) {
.dark-logo { display: block !important; }
.light-logo { display: none !important; }
}
@media (prefers-color-scheme: light) {
.dark-logo { display: none !important; }
.light-logo { display: block !important; }
}
</style>
<img src="light-logo.png" class="light-logo" alt="Light Mode Logo" />
<img src="dark-logo.png" class="dark-logo" alt="Dark Mode Logo" style="display:none;" />
-Ensure that the light mode logo is the default in case the media query fails , so it displays correctly in all the devices.
¡Hope this helps!
Regards,
Celia
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies