Hey Everybody - I have created a nice little Newsletter summarizing my favourite a.i newsletters - it looks perfect but when I read it in dark mode on m mobile - some of the text gets lost. It is obviously an issue in the CCS of the HTML but I am not sure how to fix it - tried multiple times. can somebody help?! This was done in n8n / Claude
Hey there! You’re spot on, this is a classic and very common issue with HTML emails and dark mode. When you view a newsletter in dark mode, the email client (like Gmail, Outlook, Apple Mail) often tries to be “helpful” by inverting colours or applying its own dark theme. If your text colour is hardcoded to be, say, ‘white’ or a very light grey, and the background gets inverted to black, your light text essentially disappears into the dark background.
See here you’ll need to add a ‘style’ block in the ‘head’ section of your HTML email (or within an existing one if you have it). Inside this block, you’ll put your dark mode specific CSS:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Your existing light mode styles go here */
body {
background-color: #f4f4f4; /* Light background for light mode */
color: #333333; /* Dark text for light mode */
}
p {
color: #555555;
}
h1, h2, h3 {
color: #222222;
}
a {
color: #007bff; /* Example link color */
}
/* === Dark Mode Specific Styles === */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a !important; /* Dark background for dark mode */
color: #e0e0e0 !important; /* Light text for dark mode */
}
p {
color: #cccccc !important;
}
h1, h2, h3 {
color: #f0f0f0 !important;
}
a {
color: #88c0ff !important; /* Lighter link color for dark mode */
}
/* Add more specific selectors as needed for your content */
}
</style>
</head>
<body>
<!-- Your newsletter content -->
</body>
</html>
I hope this helps..
Thank You!
