求助：Quarto深色模式无法正常工作的问题排查

问题背景 #

使用以下_quarto.yml配置文件构建网站时，指定Litera主题作为明暗模式，出现深色模式显示异常的情况，且更换其他主题后该问题依然存在：

project:
  type: website
  output-dir: ../../docs

website:
  title: "Harmonium"
  navbar:
    tools:
      - icon: github
        href: https://github.com/daniellga/harmonium
        text: GitHub
  sidebar:
    style: "docked"
    contents:
      - section: "Classes"
        contents: contents/* 

format:
  html:
    theme:
      dark: litera
      light: litera
    css: styles.css
    toc: true
    grid:
      body-width: 1000px

可能的问题原因 #

• 自定义CSS冲突：配置中引入了styles.css，若自定义样式覆盖了深色模式相关的CSS变量（如主题预设的背景色、文字色变量）或[data-theme="dark"]选择器下的样式，会破坏主题自带的深色模式切换逻辑，导致显示异常。比如仅定义了浅色模式下的元素样式，未适配深色模式场景。
• Quarto版本兼容问题：旧版本Quarto在主题明暗模式的处理上可能存在bug，尤其是当指定同一主题同时作为明暗模式时，容易出现样式加载异常。建议升级至最新稳定版Quarto再测试。
• 主题资源加载异常：若主题相关的CSS资源未正确加载（比如路径错误、资源文件损坏），会导致深色模式的样式缺失，表现为页面显示异常。可通过浏览器开发者工具的网络面板，检查所有主题相关CSS文件是否成功加载。
• 主题自身兼容性缺陷：部分主题在特定配置组合下（比如配合固定侧边栏、自定义网格宽度），深色模式的样式适配可能存在漏洞，导致导航栏、侧边栏等区域显示异常。

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