Adding search field to top nav removes dark mode icon

[kathatherine]

I'm attempting to replace the search button in the top nav with the search field. The documentation advises to use the following:

html_theme_options = {
    "navbar_end": ["navbar-icon-links.html", "search-field.html"]
}

However, when I try this, along with removing the search button with:

"navbar_persistent": [],

I only get the search field in the top nav. The dark mode icon disappears entirely.

If I remove my changes to navbar_persistent, same thing.

If I directly copy the generated HTML (from my prod site) for the icon into a template HTML file to attempt to force it to appear, it doubles up on me.

I'm not quite sure what I'm missing. Whether it's a bug or user error, the documentation might need some updates or extra context. Or maybe I should just go back to the button. :)

[trallard]

Hi @kathatherine, thanks for flagging this. What version of the PyData Sphinx Theme are you using?

If I remove my changes to navbar_persistent, same thing.

It also seems you end up with two search components which is a type of bug I have not seen before. Do you have a branch or PR I can use to check/debug? If not I can try and reproduce this locally

[kathatherine]

I'm on 0.15.3 of the theme. I don't think the two search components is a bug, because as far as I can tell, the search button is placed in navbar_persistent and I placed the search field in navbar_end, per the docs. And if I make navbar_persistent empty, (like "navbar_persistent": [],) the search button doesn't appear.

The repo these docs are in is private, so I don't think I can make a PR available.

My html_theme_options look like this when I attempt the search button to search field replacement:

html_theme_options = {
    "navbar_align": "content",
    "navbar_center": ["navbar-nav-override"],
    "navbar_end": ["navbar-icon-links.html", "search-field.html"],
    "navbar_persistent": [],
    "article_footer_items": ["feedback.html"],
    "footer_start": ["copyright"],
    "footer_center": ["sphinx-version"],
    "footer_end":["theme-version"],
    "logo": {
        "alt_text": "Anaconda - Home",
    },
}

We have a custom navigation template we're using, but when I removed that and had the default instead, I got the same issue.

However, trying the following:

    "navbar_align": "content",
    #"navbar_center": ["navbar-nav-override"],
    "navbar_end": ["navbar-icon-links.html", "search-field.html"],
    #"navbar_persistent": [],
    "article_footer_items": ["feedback.html"],
    "footer_start": ["copyright"],
    "footer_center": ["sphinx-version"],
    "footer_end":["theme-version"],
    "logo": {
        "alt_text": "Anaconda - Home",
    },
}

I get something like this:

This doesn't happen with left or right in navbar_align or when I have my navbar-nav-override (as seen above) in place.

I'm not sure if something in my custom.css might be messing with something, so I'm attaching that here:
custom.css.txt

Let me know if you need more information!