Shopify blog - font colour

Store Design
,

Topic summary

Main issue: Comment text on default Shopify blog pages appears white on a white background, making replies unreadable at the bottom of posts.

Context: Multiple blog URLs are affected and a screenshot was shared. The problem is specific to the comment display styling on blog post templates.

Proposed fix: Edit the theme stylesheet section-blog-post.css and update the .article-template__comments-comment rule:

  • Change the text color from rgba(var(–color-foreground), 0.75) to black to ensure readability.
  • Keep the background-color as rgb(var(–color-background)).
  • Correct a minor typo in the rule (ensure margin-bottom is spelled correctly).

Technical note: The CSS color property controls text color; the current semi-transparent foreground on a light background results in near-invisible text.

Outcome/status: A concrete CSS adjustment has been provided, but the original poster hasn’t confirmed resolution yet. The shared code snippet is central to implementing the fix; no other changes or alternatives were discussed.

Summarized with AI on December 28. AI used: gpt-5.
1

I’m using the default Shopify blog pages. At the foot of each blog is the opportunity for someone to leave a comment. However, when a user leaves a reply the text is white against a white background

What change needs to be made so that the text shows up as black?

Solomond_0-1716384995771.png
Solomond_0-1716384995771.png400×225 35.6 KB

Affected URLs: Did the Rhodesian Ridgeback Really Hunt Lions? – Hobbster, Misconceptions about large dog breeds – Hobbster, Are There Fitness Benefits To Owning a Dog? – Hobbster, Paws For Thought: Can Owning A Dog Improve Your Mental Health? – Hobbster

rgds

2

In section-blog-post.css you can change the color attribute to set the comment text colour.

Original Code:

.article-template__comments-comment {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
  margin-bottom: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

Updated Code:

.article-template__comments-comment {
  color: black;
  background-color: rgb(var(--color-background));
  margin-bottom: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

Hope this helps

1 Like