Styling Blogger Embedded Comment Form for Dark Theme

A CSS tips to style the Blogger (blogspot) embedded comment form to make it looks good in both light and dark theme.

The Challenges

The last blog theme that you picked in the Theme page will affect the looks of the embedded comment form. This stays true for custom blogger template, because they are build on top of Blogger's default theme.

Blogger uses the <b:skin> variables to apply styles to the comment form. You can't overwrite them using the blog's CSS, because the form is placed inside an <iframe> on a different origin.

That said, there's still a way to style the comment form by solely tinkering with CSS filters, e.g. adjusting the brightness, contrast, and saturation.

Always Go With Light Theme

If you're designing a blog theme that supports both light and dark theme, I'd say always choose one of the light-themed design for your base theme. Simply because dark-themed comment form doesn't blend really well in a light-themed design.

Reduce the Brightness

When the dark theme is active, reduce the brightness of the comment form container to make it less straining for the eye and better match the color of the surrounding elements.

.comment-replybox-single:not(:empty), 
.comment-replybox-thread:not(:empty), 
.comments.embed .comment-form {
  background: white;
  color: initial;
  filter: brightness(0.95);
}