One of the most frustrating challenges I faced while working on Blogger themes was figuring out how to make the Blogger comment iframe adapt to light and dark mode. If you’ve ever built a theme with a toggle option, you probably noticed this issue too. The main site switches perfectly between light and dark, but the comment section remains stuck in its default state. It breaks the entire visual flow and ruins the professional feel of your site.
For a long time, this question bothered me. I asked several veteran Blogger developers who build themes with light and dark modes, but no one gave me a straight answer. Whether it was something they didn’t know or something they preferred not to share, I can’t say for sure. Either way, their silence forced me to figure it out by myself.
At one point, a developer suggested using a CSS filter like sepia (or something similar), but I wasn’t a fan of how it looked. The result felt off, especially since avatars ended up looking like negative images, which just didn’t sit right with me.
So, I was curious about how the developer of Kaikomik managed to make the comment section dark, and that curiosity led me to uncover a working method. It wasn’t obvious, and there wasn’t any clear documentation about it, but through testing and refinement, I finally figured out how to control the appearance of the Blogger comment iframe.
Now, I’m sharing this with other developers who are building Blogger themes and facing the same issue.
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. Avoid simply copying and pasting the content without acknowledgment. A lot of time and effort went into experimenting and understanding this behavior, and it’s only fair to respect that work.
Understanding the Problem
The Blogger comment system is rendered inside an iframe, which means it operates somewhat independently from your main theme. Because of this, your site's CSS cannot "reach inside" the iframe to change its internal elements. This is why, no matter how much !important you add to your theme’s CSS, the comment section remains indifferent to your styling.
So, if we can't use CSS, how do we control it? 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 in your <b:skin>. These variables influence not only your main theme but also certain elements inside the comment iframe.
Most developers overlook these variables because they focus entirely on custom CSS. However, by properly defining a specific Group
of variables, you can force the comment iframe to inherit the colors of your choice.
Step-by-Step Guide
This method doesn't require complex JavaScript or “hacks.” It relies on using Blogger's XML syntax exactly as the system expects it.
Step 1 — Open Your Blogger Theme Editor
First, navigate to your Blogger Dashboard.
- Go to Theme
- Click the downward arrow next to the “Customize” button and select Edit HTML
- This will open your theme’s source code.
Step 2 — Locate the Skin Section
Inside the HTML editor:
- Click anywhere inside the code editor
- Press CTRL + F (or CMD + F on Mac)
- Search for:
<b:skin><![CDATA[ - This is where your Blogger theme variables and CSS are defined.
Step 3 — Add the Group Variable
Directly below the <b:skin><![CDATA[ tag, 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>How to Customize the Colors
The code above uses specific hex codes (like #7f8893). To make this work with your specific light or dark mode, you need to understand which variable controls which part of the comment box:
| Variable Name | What it Controls |
|---|---|
posts.background.color |
The main background of the comment area. |
body.text.color |
The color of the comments and labels. |
tabs.color |
The color of the "Comment as..." or "Google" login tabs. |
posts.text.color |
The secondary text inside the iframe. |
Common Mistakes
Even with the right code, things can go wrong. Here are the most common mistakes I see:
- Wrong Placement: It will not work if inserted elsewhere.
- Duplicate Variables: If your theme already has a variable named
posts.background.color, adding a second one will cause an error. In that case, find the existing variable and modify itsvaluerather than adding a new one.
Discovering this method took time, patience, and a lot of trial and error. Blogger’s system isn’t always easy, especially when dealing with embedded components like the comment iframe.
Most developers either ignore the issue or accept it as a limitation. But with the right approach, you can improve the visual consistency of your theme significantly.
If you’re building a Blogger theme with a light/dark toggle, this technique is extremely useful. It helps maintain a seamless design and enhances the overall user experience.
I hope this guide saves you the frustration I faced and helps you build a more cohesive, professional theme. If you have questions or find further refinements to this method, feel free to leave a comment below and share this with your fellow developers. Remember, if you use this method in your own content, a link back to this post is greatly appreciated!