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>
This commit is contained in:
Gerard Marull-Paretas 2021-06-28 20:05:45 +02:00 committed by Carles Cufí
commit 8b3f23eddc
2 changed files with 16 additions and 3 deletions

View file

@ -927,8 +927,16 @@ kbd, .kbd {
background-color: var(--admonition-danger-background-color); 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 */ /* Home page grid display */

View file

@ -11,5 +11,10 @@
<li><a href="{{ doc.link|e }}">{{ doc.title }}</a> &raquo;</li> <li><a href="{{ doc.link|e }}">{{ doc.title }}</a> &raquo;</li>
{% endfor %} {% endfor %}
<li>{{ title }}</li> <li>{{ title }}</li>
<dark-mode-toggle id="dark-mode-toggle" appearance="toggle" permanent="true"/>
{% endblock %} {% endblock %}
{%- block breadcrumbs_aside %}
<li class="wy-breadcrumbs-aside">
<dark-mode-toggle id="dark-mode-toggle" appearance="toggle" permanent="true"/>
</li>
{%- endblock %}