Skip to content
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

Closed
kalpik opened this issue Sep 29, 2022 · 4 comments · Fixed by #732
Closed

Disqus renders horribly #722

kalpik opened this issue Sep 29, 2022 · 4 comments · Fixed by #732

Comments

@kalpik
Copy link

kalpik commented Sep 29, 2022

Hello!

I tried enabling Disqus, and it renders horribly. The Disqus theme is set to "auto".

image

Any pointers?

Thanks

@luizdepra
Copy link
Owner

luizdepra commented Oct 3, 2022

Hey!

Disqus should pick the correct color scheme automatically. See here. They say:

How is the color scheme determined?

  • The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
  • The dark scheme is loaded in all other instances.

Maybe something has changed in their side. Perhaps now they are using prefers-color-scheme.
However, you could change Disqus styling by overriding their CSS rules.

@xiaotianxt
Copy link
Contributor

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.

@luizdepra
Copy link
Owner

@xiaotianxt this could be caused by a CSS rule conflict, maybe with a common class.

@xiaotianxt
Copy link
Contributor

@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.

luizdepra pushed a commit that referenced this issue Nov 28, 2022
### 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.
eshack94 pushed a commit to eshack94/hugo-coder that referenced this issue Dec 21, 2022
### 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants