Take review into account

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-logo.html

@@ -19,16 +19,17 @@
   {# use alt_text if given. If not, only add alt text if no additional branding text given. #}
   {% set alt = theme_logo.get("alt_text", "" if theme_logo.get("text") else "%s - Home" % docstitle) %}
   {% if is_logo %}
-    {# Theme switching is only available when JavaScript is enabled.
-     # Thus we should add the extra image using JavaScript, defaulting
-     # depending on the value of default_mode; and light if unset.
+    {#
+       Theme switching is only available when JavaScript is enabled.
+       We thus adds elements that should be present only when javscipt is
+       enabled with a pst-js-only class
      #}
     {% if default_mode is undefined or default_mode == "auto" %}
       {% set default_mode = "light" %}
     {% endif %}
     {% set js_mode = "light" if default_mode == "dark" else "dark" %}
     <img src="{{ theme_logo['image_relative'][default_mode] }}" class="logo__image only-{{ default_mode }}" alt="{{ alt }}"/>
-    <img src="{{ theme_logo['image_relative'][js_mode] }}" class="logo__image only-{{ js_mode }} jsonly" alt="{{ alt }}"/>
+    <img src="{{ theme_logo['image_relative'][js_mode] }}" class="logo__image only-{{ js_mode }} pst-js-only" alt="{{ alt }}"/>
   {% endif %}
   {% if not is_logo or theme_logo.get("text") %}
     <p class="title logo__title">{{ theme_logo.get("text") or docstitle }}</p>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html

@@ -1,6 +1,9 @@
 {# Displays a search field image that opens a search overlay when clicked. #}
-{# As this function will only work when JavaScript is enabled, we add it through JavaScript. #}
-<button class="btn search-button-field search-button__button jsonly" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+{# 
+    As this function will only work when JavaScript is enabled,
+    we add a class that will hide it if js is disable.
+#}
+<button class="btn search-button-field search-button__button pst-js-only" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
  <i class="fa-solid fa-magnifying-glass"></i>
  <span class="search-button__default-text">{{ _('Search') }}</span>
  <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html

@@ -1,6 +1,6 @@
 {# Displays a magnifying glass icon that opens a search overlay when clicked. #}
-{# As this function will only work when JavaScript is enabled, we hide it with jsonly #}
-<button class="btn btn-sm pst-navbar-icon search-button search-button__button jsonly" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+{# As this function will only work when JavaScript is enabled, we hide it with pst-js-only #}
+<button class="btn btn-sm pst-navbar-icon search-button search-button__button pst-js-only" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
     <i class="fa-solid fa-magnifying-glass fa-lg"></i>
 </button>
 `);

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -1,6 +1,6 @@
 {# Displays an icon to switch between light mode, dark mode, and auto (use browser's setting). #}
-{# As the theme switcher will only work when JavaScript is enabled, we hide it with `jsonly`. #}
-<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+{# As the theme switcher will only work when JavaScript is enabled, we hide it with `pst-js-only`. #}
+<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
   <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
   <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
   <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

@@ -1,8 +1,8 @@
 {# Displays a dropdown box for switching among different versions of your documentation. #}
 {%- set button_id = unique_html_id("pst-version-switcher-button") -%}
 {%- set dropdown_id = unique_html_id("pst-version-switcher-list") -%}
-{# As the version switcher will only work when JavaScript is enabled, we hide it with jsonly #}
-<div class="version-switcher__container dropdown jsonly">
+{# As the version switcher will only work when JavaScript is enabled, we hide it with pst-js-only #}
+<div class="version-switcher__container dropdown pst-js-only">
   <button id="{{ button_id }}"
     type="button"
     class="version-switcher__button btn btn-sm dropdown-toggle"

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -22,7 +22,7 @@
   -->
   <noscript>
     <style>
-      *.jsonly, *.btn.jsonly { display: none; } 
+      *.pst-js-only, *.btn.pst-js-only { display: none; } 
 
     </style>
   </noscript>

tests/test_build/navbar_switcher.html

@@ -1,4 +1,4 @@
-<div class="version-switcher__container dropdown jsonly">
+<div class="version-switcher__container dropdown pst-js-only">
  <button aria-controls="pst-version-switcher-list-2" aria-haspopup="listbox" aria-label="Version switcher list" class="version-switcher__button btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" id="pst-version-switcher-button-2" type="button">
   Choose version
   <!-- this text may get changed later by javascript -->

tests/test_build/navbar_theme.html

@@ -1,4 +1,4 @@
-<button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
+<button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
  <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light">
  </i>
  <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark">

tests/test_build/sidebar_subpage.html

@@ -33,7 +33,7 @@
   </div>
   <div class="sidebar-header-items__end">
    <div class="navbar-item">
-    <button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
+    <button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
      <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light">
      </i>
      <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark">