giscus dark mode about angular-challenges

[jdegand]

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

[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]

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

[github-actions]

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