-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disqus renders horribly #722
Comments
Hey! Disqus should pick the correct color scheme automatically. See here. They say:
Maybe something has changed in their side. Perhaps now they are using |
I'm having the same issue, it seems that the background color of the discus board is on light mode, but the text are on dark mode. |
@xiaotianxt this could be caused by a CSS rule conflict, maybe with a common class. |
I've fixed it, I will present you a PR soon. |
### Prerequisites - [x] This pull request fixes a bug. - [x] This pull request adds a feature. - [ ] This pull request introduces breaking change. ### Description This PR fixes the bug about disqus iframe background in dark mode, it also fix another bug when switching color mode. Before: <img width="881" alt="opaque background in dark mode" src="https://user-images.githubusercontent.com/17041194/202862887-720dbb82-f0c8-4a24-97fd-78baef2a7cb4.png"> After: <img width="883" alt="CleanShot 2022-11-20 at 01 12 52@2x" src="https://user-images.githubusercontent.com/17041194/202863146-d5a246a7-bbe5-4bef-9687-883ce33f5b1a.png"> #### Why this happens The problem is widely discussed [here](w3c/csswg-drafts#4772). >If the color scheme of an iframe differs from embedding document, iframe gets an opaque canvas bg appropriate to its color scheme. So I made two fixes: 1. Add `color-scheme: light` CSS property for disqus `iframe`, this creates a transparent background and fixes the opaque issue. 2. Add `themeChanged` event to notice disqus comments board refresh when the theme change, this fixes the opaque problem when you switch the mode. #### Reference I've been working on this issue for a whole night and the fixing idea was strongly inspired by [Sergeyski's Blog](https://sergeyski.com/css-color-scheme-and-iframes-lessons-learned-from-disqus-background-bug/). ### Issues Resolved Fixes #722.
### Prerequisites - [x] This pull request fixes a bug. - [x] This pull request adds a feature. - [ ] This pull request introduces breaking change. ### Description This PR fixes the bug about disqus iframe background in dark mode, it also fix another bug when switching color mode. Before: <img width="881" alt="opaque background in dark mode" src="https://user-images.githubusercontent.com/17041194/202862887-720dbb82-f0c8-4a24-97fd-78baef2a7cb4.png"> After: <img width="883" alt="CleanShot 2022-11-20 at 01 12 52@2x" src="https://user-images.githubusercontent.com/17041194/202863146-d5a246a7-bbe5-4bef-9687-883ce33f5b1a.png"> #### Why this happens The problem is widely discussed [here](w3c/csswg-drafts#4772). >If the color scheme of an iframe differs from embedding document, iframe gets an opaque canvas bg appropriate to its color scheme. So I made two fixes: 1. Add `color-scheme: light` CSS property for disqus `iframe`, this creates a transparent background and fixes the opaque issue. 2. Add `themeChanged` event to notice disqus comments board refresh when the theme change, this fixes the opaque problem when you switch the mode. #### Reference I've been working on this issue for a whole night and the fixing idea was strongly inspired by [Sergeyski's Blog](https://sergeyski.com/css-color-scheme-and-iframes-lessons-learned-from-disqus-background-bug/). ### Issues Resolved Fixes luizdepra#722.
Hello!
I tried enabling Disqus, and it renders horribly. The Disqus theme is set to "auto".
Any pointers?
Thanks
The text was updated successfully, but these errors were encountered: