Missing search icon and UI in light but not dark theme on Quarto website

[stephan.koenig]

Hi all,

I have followed the instructions to render my minimal Quarto website on Netlify using the Quarto Netlify Build Plugin:

Quarto - Netlify

I use a light and dark theme. Strangely, the search icon and UI are missing on the light theme only (they are available in the dark theme) when published on Netlify. In contrast, the icon and UI are present when I render the website locally.

I am lost in what is causing this issue. The netlify.toml file seems the most relevant:

[build.processing]
  skip_processing = false
[build.processing.css]
  bundle = true
  minify = true
[build.processing.js]
  bundle = true
  minify = true
[build.processing.html]
  pretty_urls = true
[build.processing.images]
  compress = true

[[plugins]]
package = "@quarto/netlify-plugin-quarto"

[[plugins]]
package = "netlify-plugin-a11y"
  [plugins.inputs]
  # Do not fail the build if a11y issues are found
  resultMode = "warn"
    
[[plugins]]
package = "netlify-plugin-checklinks"
  [plugins.inputs]
  # Do not fail the build if any issues with links are found
  todoPatterns = [
    "load",
  ]

[[plugins]]
package = "netlify-plugin-inline-critical-css"

Here is the source code and rendered website (GitHub/website).

How can I best troubleshoot what is causing the missing search icon and UI, especially since it only affects the light but not the dark theme? I would greatly appreciate any pointers.

Thanks!

[technocrat]

Try changing the theme to have the same top banner background color?

[cderv]

@stephan.koenig can you try rendering a version with Quarto 1.3 pre-release ? Quarto – Download Quarto

it could be an issue with our theming system and it could have been fixed

However, few question:

@stephan.koenig

Strangely, the search icon and UI are missing on the light theme only (they are available in the dark theme) when published on Netlify.

Am I supposed to see the icon on the website link for light theme ? I am seing it FWIW

[stephan.koenig]

Thank you for looking into this.

I believe it is just a placeholder and shows the wrong behaviour. It should look like this (this is my local render below):

If you use the toggle to switch to the dark mode on the published website everything is correct:

Locally I am using Quarto v1.2.313, and it renders correctly. The Quarto Netlify Build plugin uses the latest release, which is also v1.2.313. I tried to change the plugin to use the newest pre-release, but could not get it to work. I decided to switch to GitHub Actions for CI for now (using also the latest release) and it rendered the the search button correctly.

[stephan.koenig]

The theme (flatly) has the correct icon/formatting when I render the website locally. (See also images in my reply below).

[cderv]

@stephan.koenig

I decided to switch to GitHub Actions for CI for now (using also the latest release) and it rendered the the search button correctly.

I wonder if this couldn't be someting about caching mechanism in Netlify. I am no expert though.
Maybe asked in GitHub - quarto-dev/netlify-plugin-quarto ?