Here is how is looks before I go inpect and make the fix. I have to remove the “dark:prose-invert light” class in the first div that wraps everything. How I can make this change permanently?
Topic summary
A Shopify store owner encountered an issue where product descriptions appeared grayed out on the Refresh theme. The problem was traced to CSS classes dark:prose-invert and light being automatically added to elements.
Initial troubleshooting:
- Removing the problematic classes via browser inspector temporarily fixed the display
- Adding custom CSS through the theme editor’s custom CSS box provided a workaround
Root cause & solution:
- The issue originated in
base.csswith thelight{opacity}property - Changing the opacity value to 1 permanently resolved the grayed-out text
Related case:
Another user reported the same dark:prose-invert light classes affecting a single blog post, successfully removing them via inspector but seeking guidance on permanent removal from the blog template or entire site.
Both cases involve unwanted CSS classes affecting text visibility, with solutions requiring direct CSS modifications.
I found a fix, I just added some of my own css in the custom css box when I click the entire product information card in the theme editor. However is there a better way to approach this? Not sure if this will cause issues in the future. Please and thank you!
Nevermind I found the root cause of it. I found it in the base.css. It was the light{opacity}. I just change it to 1
I googled “Why is Shopify adding dark:prose-invert light to my blog post” and found this thread.
I have the same issue but only on my latest blog post. So strange.
https://sharphampark.com/blogs/news/tune-in-to-bbc-radio-ft-sharpham-park
I used the inspector and found some code saying ‘light’ and removed it in the inspector and it made the blog normal.
How do I remove it from the blog template or entire site?