search

retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.02k stars 201 forks source link

Dark Mode support for giscus on Retype? #568

Closed latenitefilms closed 1 year ago

latenitefilms commented 1 year ago

Following on from #564, I'm having trouble getting dark mode to play nicely with giscus on Retype.

Any tips or tricks?

geoffreymcgill commented 1 year ago

For me, Giscus automatically switched to their dark theme when the system appearance changed from day (light) into evening (dark).

The Giscus theme will be completely independent/separate from the Retype theme.

geoffreymcgill commented 1 year ago

If you're on a Mac, you can switch the Appearance between Light and Dark to see the Giscus widget theme updating.

Screen Shot 2023-06-07 at 3 58 26 PM
latenitefilms commented 1 year ago

I expect it to switch when you change the light/dark mode via this button - but it doesn't seem to?

image
geoffreymcgill commented 1 year ago

I expect it to switch when you change the light/dark mode via this button - but it doesn't seem to?

Sorry, but the Giscus widget is 100% separate from Retype. Giscus is rendered in an <iframe> and is essentially a completely different web site, disconnected from your Retype generated website. The Giscus widget would not be listening for the Theme switching on its parent (retype app).

Theoretically, if Giscus had a Parent-to-giscus event that allowed for switching the Giscus theme, then it would be possible to listen for the dark mode change on the Retype side and call Giscus to switch the theme. To the best of my knowledge, that event or API hook is not available on Giscus.

There might be security issues as well with the Parent (retype app) document calling into the Child (Giscus iframe) document. In general, <iframe> documents are pretty locked down in most modern browsers as <iframe>'s open up a security risk.

latenitefilms commented 1 year ago

Understood. Thanks for the detailed reply!