diff --git a/doc/_static/css/custom.css b/doc/_static/css/custom.css
index 1f69b3d6350..33587f3d6e9 100644
--- a/doc/_static/css/custom.css
+++ b/doc/_static/css/custom.css
@@ -927,8 +927,16 @@ kbd, .kbd {
     background-color: var(--admonition-danger-background-color);
 }
 
-#dark-mode-toggle {
-    float: right;
+
+dark-mode-toggle::part(fieldset) {
+  padding-inline: 0.75rem;
+  padding-block: 0;
+}
+
+dark-mode-toggle::part(darkLabel),
+dark-mode-toggle::part(lightLabel),
+dark-mode-toggle::part(toggleLabel){
+  font-size: unset;
 }
 
 /* Home page grid display */
diff --git a/doc/_templates/breadcrumbs.html b/doc/_templates/breadcrumbs.html
index a1210d04db0..499354e523d 100644
--- a/doc/_templates/breadcrumbs.html
+++ b/doc/_templates/breadcrumbs.html
@@ -11,5 +11,10 @@
      <li><a href="{{ doc.link|e }}">{{ doc.title }}</a> &raquo;</li>
   {% endfor %}
   <li>{{ title }}</li>
-  <dark-mode-toggle id="dark-mode-toggle" appearance="toggle" permanent="true"/>
+
 {% endblock %}
+{%- block breadcrumbs_aside %}
+  <li class="wy-breadcrumbs-aside">
+    <dark-mode-toggle id="dark-mode-toggle" appearance="toggle" permanent="true"/>
+  </li>
+{%- endblock %}