Change CSS

Your site CSS cannot directly style the Monocle Search interface.

Why site CSS does not apply

The search interface renders inside a shadow root. This keeps the Monocle CSS separate from your site CSS. Your site fonts do not apply inside the interface, and Monocle styles do not affect your site.

The HTML in the search interface can change. Custom CSS selectors can therefore stop working after an update.

Apply a small CSS change

You can use a mutation observer to insert custom styles into the search interface. This workaround does not make the HTML stable.

Use it only for small changes. Test your changes after embed updates.

The script looks like this:

<script>
  const CSS_SOURCE = `
    /* YOUR CSS GOES HERE */
    .mnc-overlay {
      font-family: 'Lato', Arial, Helvetica, sans-serif !important;
      font-weight: 400 !important;
    }
    h1,h2,h3,h4,h5,h6,p,span,div {
      font-weight: 400 !important;
    }
  `

  function injectStyles(hostEl) {
    const shadowHost = hostEl.querySelector(':scope > div') // plain div child
    if (!shadowHost || !shadowHost.shadowRoot) return // safety check

    if (shadowHost.shadowRoot.querySelector('style[data-injected]')) return

    const style = document.createElement('style')
    style.setAttribute('data-injected', '')
    style.textContent = CSS_SOURCE
    shadowHost.shadowRoot.appendChild(style)
  }

  const obs = new MutationObserver((muts) => {
    for (const m of muts) {
      for (const n of m.addedNodes) {
        if (n.nodeType !== 1) continue
        if (n.classList?.contains('mnc-root')) injectStyles(n)
        n.querySelectorAll?.('.mnc-root').forEach(injectStyles)
      }
    }
  })

  obs.observe(document.documentElement, { childList: true, subtree: true })
</script>