Making minor changes to the CSS

We are frequently asked if it's possible to change the CSS of the search interface. For example, to de-emphasize the font weight of a particular heading or adjust the font-stack to match that of your site itself.

The answer to this question is yes and no, both at once.

Let's dive into the "no" first:

Why adjusting the CSS is hard

Our search interface is rendered inside a shadow root and as a result it is isolated from the CSS of your website itself. A side effect of this is that you are stuck with the neutral font-stack we have chosen, and the fonts of your site are ignored. The inverse also holds true: the CSS we ship with Monocle does not leak out onto your site either – which is the reason we made this design decision when building our search embed.

The fact that we cannot (and if truth be told do not want to) promise we won't change the HTML markup of the interface we ship, make matters even worse: Custom CSS you write might be valid one day, and suddenly break the next. No good.

Let me do it all the same

There is a hack you can use to make smaller adjustments all the same.

You can run an mutation observer that injects your custom styles into our search embed when it is created. This does work very well, but does not circumvent the problems mentioned above. Our search embed wasn't built to be styled, so isn't easily styleable. The HTML will eventually change too. Therefore: please only use this hack to make smaller (safe) adjustments.

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>