How to Fix Blogger Comment iframe Dark Mode Errors

One of the most frustrating challenges I faced while working with Blogger themes was figuring out how to make the Blogger comment iframe properly adapt to light and dark mode.

If you're planning to add a light/dark mode toggle to your Blogger website, you may have noticed that Blogger's built-in themes are limited when it comes to supporting both modes at the same time. Even after implementing a theme switcher, the comment box often remains stuck in its default appearance instead of changing with the rest of the website.

After years of experimenting and trying different approaches, I finally found a solution to this problem. In this tutorial, you'll learn how to fix Blogger comment iframe dark mode issues and make the comment section properly adapt to your website's light and dark modes.

Before we begin, I want to make one thing clear: if you use this solution in your own tutorials or blog posts, please give proper credit. Please don’t simply copy and paste the content without acknowledging the source. A lot of time and effort went into experimenting, testing, and understanding how this works, so I believe it’s only fair to respect that work.

What Did I Do to Discover the Solution?

I know this may not bother everyone, call me OCD but I’m very particular about details, and this had been bothering me for a long time.

I had already asked a Blogger theme developer how she managed to make her comment box appear in dark mode, but unfortunately, she never replied to my question. Maybe she chose not to share it (gatekeeping huh), or perhaps she simply didn’t see or have time to respond to my comment. Either way, I wasn’t able to get an answer.

That’s okay—you can keep your method private if you want. But I decided to share what I discovered with my fellow bloggers who are facing the same problem.

I also asked another Blogger theme developer about it. Thankfully, he kindly replied and said that he didn’t know how to do it either. Instead, he suggested an alternative solution using a CSS filter, such as sepia or adjusting the brightness. I tried that method, but I wasn’t satisfied with the result because the avatars in the comment box appeared in negative/inverted colors.

While searching for a theme for my own website, I came across the Kaikomik developer’s work and noticed that they had successfully made the comment section dark. That caught my attention and made me curious about how they did it.

That curiosity eventually led me to discover a working method myself. I couldn’t find any clear documentation explaining how it worked. So I spent time experimenting, testing different approaches, and refining the results until I finally figured out how to control the appearance of the Blogger comment iframe.

Understanding the Problem

First, we need to understand where the problem is coming from.

The Blogger comment section is managed by Google, and the comment box is loaded inside an <iframe>. This means that from your theme, you can only directly control the styling of the elements surrounding the comment section. You cannot directly access or modify the CSS inside the iframe.

Because of this, even if you add !important to your CSS rules, those styles still won't reach the elements inside the comment iframe.

So, if we can't use CSS directly, how can we change the appearance of the comment section? The answer lies in Blogger's built-in theme variables.

When Blogger serves the comment section, its internal engine looks at the Theme Variables defined inside your <b:skin>. These variables don't only affect your main theme, they can also influence certain elements rendered inside the comment iframe.

Important: Since we are editing the core XML of your theme, I always recommend taking a backup of your theme before you begin.

Step 1: Open Your Blogger Theme Editor

1. First, navigate to your Blogger Dashboard and go to Theme.
2. Click the down arrow next to the Customize button, then select Edit HTML
3. Once you’ve opened your theme’s source code, copy and paste the following code inside the <html> tag.

   b:templateUrl='indie.xml'

   This code is required to make the light and dark modes work properly.

Step 2: Locate the Skin Section

1. Click anywhere inside the HTML editor and then press CTRL + F (or CMD + F on Mac)
2. Search for: <b:skin><![CDATA[
3. This is where your Blogger theme variables and CSS are defined.

Step 3: Add the Group Variable

1. Directly below the <b:skin><![CDATA[ tag, copy and paste the following code:

   <Group description="Comment Blogger (Contempo, Soho, Emporio, Notable)">
     <Variable name="body.text.color" description="Text Color" type="color" default="#d9d9d9" value="#7f8893"/>
     <Variable name="posts.background.color" description="Posts Background" type="color" default="transparent" value="transparent"/>
     <Variable name="tabs.color" description="Tabs Color" type="color" default="#ccc" value="#cccccc"/>
     <Variable name="tabs.selected.color" description="Selected Tabs Color" type="color" default="#fff" value="#ffffff"/>
     <Variable name="tabs.overflow.background.color" description="Overflow Background" type="color" default="#fff" value="#ffffff"/>
     <Variable name="tabs.overflow.color" description="Overflow Text Color" type="color" default="$(body.text.color)" value="#1d2129"/>
     <Variable name="tabs.overflow.selected.color" description="Overflow Selected Color" type="color" default="$(body.text.color)" value="#1d2129"/>
     <Variable name="posts.title.color" description="Post Title Color" type="color" default="$(body.text.color)" value="#1d2129"/>
     <Variable name="posts.text.color" description="Post Text Color" type="color" default="$(body.text.color)" value="#1d2129"/>
   </Group>

   This code was sourced from the Kaikomik Theme.
2. Click Save

Customize the Colors

The code above uses specific hex color codes (such as #7f8893). To adapt it to your preferred light or dark mode, you first need to understand which variable controls each part of the comment box:

Common Mistakes

Even with the correct code, things can still go wrong. Here are the most common mistakes I see:

• Wrong Placement: The code will not work if it is inserted in the wrong location. Always place it before your CSS rules begin.
• Duplicate Variables: This will cause an error. Instead of adding the entire Group Variables again, try modifying the value of the existing variable.

Final Thoughts

So yes, you can make your Comment Box/Iframe adapt to both light and dark modes. All you need to do is understand how Group Variables behave in your theme. Blogger may be limited when it comes to modifying the theme, but once you understand how it works, you’ll be able to overcome those limitations and create a solution like the one I did.

If you encounter any problems, be sure to read my Common Mistakes section first. If you’ve already done that and still need help, let me know in the comment section and include a link to your website so I can check it for you. Please use the link tool when adding your website so your comment won’t get removed as spam.

Also read:

• More Blogger Tutorials
• Blogger's XML