It looks like GitHub manages to solve this :thinki...
# website
p
It looks like GitHub manages to solve this 🤔 I'll have a think..
claude lurk 2
m
the wrap it around there own element that overrides the OS theme, see
themed-picture-element
in the page source. can do the same
👍🏻 1
p
Can you see how it works?
m
Copy code
// Based on mode set media to '(prefers-color-scheme: light),(prefers-color-scheme: dark)'
  // for all sources with matching theme, otherwise set to 'not all'
  private updatePictureTheme(
    mode: ColorModeWithAuto,
    sourcesLight: HTMLSourceElement[],
    sourcesDark: HTMLSourceElement[],
  ) {
    if (mode === 'light') {
      this.toggleSources({off: sourcesDark, on: sourcesLight})
    } else if (mode === 'dark') {
      this.toggleSources({off: sourcesLight, on: sourcesDark})
    }
  }

  private toggleSources({off, on}: {off: HTMLSourceElement[]; on: HTMLSourceElement[]}) {
    for (const source of on) {
      source.setAttribute('media', '(prefers-color-scheme: light),(prefers-color-scheme: dark)')
    }

    for (const source of off) {
      source.setAttribute('media', 'not all')
    }
  }
p
🕵🏻‍♂️
@mashehu you want me to just strip the code / non-docs out of the PR then?
Do you have a copy of it, before I delete it? 😅
m
yes, i have it checked out locally
👍🏻 1
p
Done
m
the mdast implementation in the end