如何调整Quarto HTML文档中主题切换按钮的位置

要把主题切换按钮从右上角移到目录（TOC）下方，你可以通过添加自定义JavaScript和CSS实现，具体方案如下：

完整可复用代码 #

---
title: "Change position theme button"
format: 
  html:
    toc: true
    theme: 
      light: default
      dark: darkly
    include-in-header:
      - text: |
          <script>
            document.addEventListener('DOMContentLoaded', function() {
              // 获取主题切换按钮元素
              const themeBtn = document.querySelector('.navbar-toggler.navbar-theme');
              // 获取目录容器元素
              const tocContainer = document.getElementById('toc-container');
              
              if (themeBtn && tocContainer) {
                // 将按钮移到目录容器末尾
                tocContainer.appendChild(themeBtn);
                // 移除原导航栏样式类，避免冲突
                themeBtn.classList.remove('navbar-toggler', 'me-2');
                // 添加自定义类用于样式调整
                themeBtn.classList.add('toc-theme-btn');
              }
            });
          </script>
          <style>
            .toc-theme-btn {
              margin-top: 1rem;
              padding: 0.5rem 1rem;
              border-radius: 0.25rem;
              background-color: #f8f9fa;
              border: 1px solid #dee2e6;
              cursor: pointer;
            }
            .toc-theme-btn:hover {
              background-color: #e9ecef;
            }
            /* 适配深色主题的按钮样式 */
            .dark .toc-theme-btn {
              background-color: #343a40;
              border-color: #495057;
              color: #fff;
            }
            .dark .toc-theme-btn:hover {
              background-color: #495057;
            }
          </style>
---

## Chapter

Some text to make it reproducible

### Test

代码说明 #

• JavaScript逻辑：页面加载完成后，定位主题切换按钮和目录容器，将按钮移动到目录容器内部的末尾位置，同时移除原导航栏相关样式类，避免布局冲突。
• CSS样式：给移动后的按钮添加合适的间距和基础样式，同时适配深色主题下的显示效果，保证按钮在两种主题模式下都有良好的视觉表现。

内容的提问来源于stack exchange，提问作者Quinten