diff --git a/theme/partials/palette.html b/theme/partials/palette.html
index 5633dda066..26b7bba4fd 100644
--- a/theme/partials/palette.html
+++ b/theme/partials/palette.html
@@ -11,4 +11,8 @@
       </label>
     {% endif %}
   {% endfor %}
+  <span class="docs-palette__fallback" aria-hidden="true">
+    <span class="docs-palette__fallback-button docs-palette__fallback-button--light md-icon">{{ icon("moon-outline") }}</span>
+    <span class="docs-palette__fallback-button docs-palette__fallback-button--dark md-icon">{{ icon("sunny-outline") }}</span>
+  </span>
 </form>
diff --git a/theme/stylesheets/header.css b/theme/stylesheets/header.css
index a08ea87e9e..1e2bbc1f18 100644
--- a/theme/stylesheets/header.css
+++ b/theme/stylesheets/header.css
@@ -23,16 +23,21 @@
 .docs-version-select__icon { position: absolute; top: 50%; right: .65rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--docs-text-secondary); pointer-events: none; }
 .version-select-container .select-css:disabled { opacity: 1; color: var(--docs-text-secondary); cursor: wait; }
 .version-select-container .select-css:hover, .version-select-container .select-css:focus { border-color: var(--docs-border-strong); }
-.md-header [data-md-component="palette"] { grid-column: 7; }
-.md-header [data-md-component="palette"] .md-header__button:not([hidden]) { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--docs-bg); color: var(--docs-text-tertiary); }
-.md-header [data-md-component="palette"] .md-header__button:hover { border-color: var(--docs-border-strong); color: var(--docs-text-secondary); }
+.md-header [data-md-component="palette"] { position: relative; display: flex; grid-column: 7; flex: 0 0 2.25rem; width: 2.25rem; min-width: 2.25rem; max-width: 2.25rem; height: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--docs-bg); color: var(--docs-text-tertiary); transition: none; }
+.md-header [data-md-component="palette"] .md-header__button:not([hidden]),
+.md-header [data-md-component="palette"] .docs-palette__fallback-button { display: inline-flex; position: absolute; inset: 0; width: 100%; height: 100%; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
+.md-header [data-md-component="palette"] .docs-palette__fallback { position: absolute; inset: 0; display: block; }
+.md-header [data-md-component="palette"] .md-header__button:not([hidden]) ~ .docs-palette__fallback { display: none; }
+.md-header [data-md-component="palette"] .docs-palette__fallback-button { display: none; }
+body[data-md-color-scheme="codacy-light"] [data-md-component="palette"] .docs-palette__fallback-button--light,
+body[data-md-color-scheme="codacy-dark"] [data-md-component="palette"] .docs-palette__fallback-button--dark { display: inline-flex; }
+.md-header [data-md-component="palette"]:hover { border-color: var(--docs-border-strong); color: var(--docs-text-secondary); }
 .md-header [data-md-component="palette"] .md-header__button:focus-visible { outline: 2px solid var(--docs-link); outline-offset: 3px; }
 .md-header .md-search { display: block; position: fixed; inset: 0; z-index: 100; width: auto; visibility: hidden; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--docs-bg) 55%, transparent); backdrop-filter: blur(3px); }
-/* While search is open, Material locks the page by setting the body to
-   position: fixed, which would drag the sticky header (and its theme toggle)
-   out of view and behind the search overlay. Pin the header to the viewport
-   above the overlay so the whole navbar stays visible and interactive. */
+/* Material locks the page when search opens. Keep the header fixed so the
+   search backdrop can filter every navbar control consistently. */
 .md-toggle[data-md-toggle="search"]:checked ~ .md-header { position: fixed; top: 0; right: 0; left: 0; z-index: 101; }
+.md-toggle[data-md-toggle="search"]:checked ~ .md-header [data-md-component="palette"] { max-width: 2.25rem; opacity: 1; transition: none; }
 .md-toggle[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__inner { width: 0; height: 0; margin: 0; overflow: hidden; }
 .md-toggle[data-md-toggle="search"]:checked ~ .md-header .md-search { visibility: visible; opacity: 1; pointer-events: auto; }
 .md-search__overlay { display: block; position: absolute; inset: 0; background: transparent; }