How to detect the change of palettes?

[eyllanesc]

I know I can detect the change of palette using MutationObserver but it seems to me that it is a hack, is there a stable and official way to do it? Any event that provides mkdocs-material?

[squidfunk]

This should work:

const ref = document.querySelector("[data-md-component=palette]")
component$.subscribe(component => {
  if (component.ref === ref) {
    alert$.next(`Changed to "${component.color.scheme}"`)
    console.log(component.index, component.color)
  }
})

In general you can monitor all components through the component$ observable. There's also the document$ observable to monitor document changes (instant loading) and location$ to track location changes, and more:

mkdocs-material/src/assets/javascripts/bundle.ts

Lines 249 to 258 in 12a016b

	window.document$ = document$ /* Document observable */
	window.location$ = location$ /* Location subject */
	window.target$ = target$ /* Location target observable */
	window.keyboard$ = keyboard$ /* Keyboard observable */
	window.viewport$ = viewport$ /* Viewport observable */
	window.tablet$ = tablet$ /* Media tablet observable */
	window.screen$ = screen$ /* Media screen observable */
	window.print$ = print$ /* Media print observable */
	window.alert$ = alert$ /* Alert subject */
	window.component$ = component$ /* Component observable */

[eyllanesc]

It would be great if this type of information is documented.