giscus dark mode

[tomalaforge]

I'm starting a new issue, this will be easier to follow.

From @jdegand I think the dark mode problems may stem from the binding of the theme. See this giscus issue. On my computer the comment section is still white on the dark mode as well. You are binding in the comment section.astro file with data-theme="preferred_color_scheme". I noticed inspecting source code both light and dark in some classes.

Giscus doesn't really seem to support / advertise Angular support (Giscus component has no version for Angular) and I think the binding issue is probably why.

It is just a minor issue.

Originally posted by @jdegand in https://github.com/tomalaforge/angular-challenges/issues/377#issuecomment-1835200992

[jdegand]

export class L extends HTMLElement {
    #e = "starlight-theme";
    constructor() {
        super(), this.#n(this.#o());
        const e = this.querySelector("select");
        e && e.addEventListener("change", n => {
            n.currentTarget instanceof HTMLSelectElement && this.#n(this.#t(n.currentTarget.value))
        })
    }
    #t(e) {
        return e === "auto" || e === "dark" || e === "light" ? e : "auto"
    }
    #s() {
        return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
    }
    #n(e) {
        StarlightThemeProvider.updatePickers(e), document.documentElement.dataset.theme = e === "auto" ? this.#s() : e, this.#r(e)
    }
    #r(e) {
        typeof localStorage < "u" && (e === "light" || e === "dark" ? localStorage.setItem(this.#e, e) : localStorage.removeItem(this.#e))
    }
    #o() {
        const e = typeof localStorage < "u" && localStorage.getItem(this.#e);
        return this.#t(e)
    }
}

I used the web components extension and this nested ternary is used for the select.

document.documentElement.dataset.theme = e === "auto" ? this.#s() : e, this.#r(e)

Does this look right to you?

[tomalaforge]

I've never used web component, but if it does the job, it's right for me.

[jdegand]

I'm thinking now that there maybe a conditional logic error. The issue mentioned attribute binding but the error still occurs when both attributes are correct.

This issue is worth looking at as well.

[tomalaforge]

yes indeed, the change is not done automatically. I need to look at it more closely when I have more time. Or if you want to do it, don't hesitate 😅

[github-actions[bot]]

This issue is stale because it has been open for 20 days with no activity.

[jdegand]

Giscus has a bug and is down for next few days.

[github-actions[bot]]

This issue is stale because it has been open for 20 days with no activity.