From 8b3f23eddc94de83dfe8f9fc90b24b59495a1f6b Mon Sep 17 00:00:00 2001
From: Gerard Marull-Paretas <gerard.marull@nordicsemi.no>
Date: Mon, 28 Jun 2021 20:05:45 +0200
Subject: [PATCH] doc: fix dark-mode-toggle style

- Use designated CSS parts to style the toggle properly
- Use breadcrumbs_aside block to render dark mode toggle

Signed-off-by: Gerard Marull-Paretas <gerard.marull@nordicsemi.no>
---
 doc/_static/css/custom.css      | 12 ++++++++++--
 doc/_templates/breadcrumbs.html |  7 ++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

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 %}