Skip to content

Dark mode for embed ignores toggle #327

Description

@LauraLangdon

After #325 is merged, the new events calendar embed (scripts/events/embed.html, loaded in an iframe on /events/) themes itself with @media (prefers-color-scheme: dark). That matches the site whenever the book-theme is on its default "system" setting. But the site's light/dark toggle (the moon icon) can override the OS preference via a .dark class on the document; when a user does that, the embed keeps following the OS and can mismatch the rest of the page.

Fix: the iframe is same-origin, so the embed can read the parent's resolved theme (window.parent.document.documentElement .dark class / data-theme) and apply it to itself, with a MutationObserver to follow live toggles, falling back to prefers-color-scheme when the parent isn't readable.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions