Alterar botão de troca de tema de posição no Quarto

Isso é um pouco mais complicado do que eu esperava, pois o botão não é colocado após o índice (TOC) no DOM. Você pode alterar as regras CSS, mas, embora funcione para o exemplo, se você tiver títulos suficientes para que seu TOC precise rolar, o botão de alternância não flutuará.

Para conseguir a flutuação, precisamos mudar a estrutura do DOM para colocar o botão de alternância diretamente após o TOC. O botão de alternância é adicionado dinamicamente após a página ser carregada, então precisamos de algum JavaScript que observe as alterações feitas no DOM, por exemplo, um MutationObserver .

A primeira coisa a fazer é adicionar include-in-header: move-toggle.htmlao seu Quarto yaml. Então crie move-toggle.htmlo que procura por mudanças no DOM e move o botão se ele encontrar (e o índice também é carregado):

<script>
    // function to move toggle
    const moveToggle = (mutations, obs) => {
        const toggleButton = document.querySelector('.quarto-color-scheme-toggle');
        const toc = document.querySelector('#TOC');

        // check if table-of-contents and button are loaded
        if (toggleButton && toc) {

            // move button (adjust as desired)
            toc.after(toggleButton);
            toggleButton.style.position = 'relative';
            toggleButton.style.top = '0';
            toggleButton.style.right = '0';
            toggleButton.style.margin = '1em 0';

            obs.disconnect(); // no need to keep observing
        }
    }

    // function to observe DOM for changes
    const observeDom = () => {
        const observer = new MutationObserver(moveToggle);
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // observe the DOM after it has loaded
    document.addEventListener("DOMContentLoaded", observeDom);
</script>

Saída

Modo claro

Modo escuro

Documento Quarto completo

Para reprodutibilidade, aqui está o qmdarquivo completo. A única linha adicional é include-in-header: move-toggle.html.

---
title: "Change position theme button"
format: 
  html:
    toc: true
    theme: 
      light: default
      dark: darkly
    include-in-header: move-toggle.html
---

## Chapter

Some text to make it reproducible

### Test