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 is that the neutral font stack we chose stays in place, and the fonts from your site are ignored. The inverse also holds true: the CSS we ship with SearchCue does not leak out onto your site either. That is why we made this design decision when building the search embed.

We cannot promise that the HTML markup of the interface will stay the same. Custom CSS you write might be valid one day and break the next.

If you still need custom CSS

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

You can run a mutation observer that injects custom styles into the search embed when it is created. This can work for small changes, but it does not remove the problems above. The search embed was not built to be styled this way, and the HTML will change over time. 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>